Showcase Presentation Remotion App

A dynamic video presentation generator built with Remotion and a WebSocket backend, integrated into the BMAD agent framework for automated showcase generation.

Live: https://mibracy.github.io/showcase/ Live Demo: https://mibracy.github.io/showcase/remotion/index.html

🎬 What Is This?

This project generates professional presentation videos automatically from structured data or scripts. It's used by the BMAD agent framework to showcase capabilities, release notes, features, and more.

Key Features

✅ Script-Driven Generation - Regenerate presentations from Markdown scripts
✅ Remotion-Powered - High-quality video rendering with React animations
✅ Real-Time Control - WebSocket backend for interactive presentations
✅ Theme Consistency - Dark theme matching BMAD's aesthetic
✅ Docker-Ready - Containerized development and deployment
✅ Make Automation - Simple commands for common tasks
✅ Hot Reload - Live preview while editing slides

📁 Repository Structure

.
├── _bmad-output/
│   └── presentations/
│       └── showcase/
│           ├── remotion/          # Remotion frontend app
│           │   ├── src/
│           │   │   ├── Root.tsx           # Main composition
│           │   │   ├── slides/            # Slide components
│           │   │   └── theme.ts           # Theme config
│           │   ├── server/                # WebSocket backend
│           │   │   └── ws-server.js
│           │   ├── package.json
│           │   ├── Dockerfile
│           │   └── remotion.config.ts
│           ├── data/
│           │   └── release-notes.json     # Content data
│           ├── assets/
│           └── README.md                  # Showcase-specific guide
├── Makefile                   # Build automation
├── docker-compose.yml         # Container orchestration
├── index.md                   # BMAD framework index
└── docs/
    └── SHOWCASE_PROJECT_DOCUMENTATION.md  # Detailed docs

🚀 Quick Start

Prerequisites

Node.js 18+ Download
npm (comes with Node.js)
Git

(Alternatively, use Docker - no Node.js required)

Option A: Local Development (with Make)

# 1. Install dependencies
make install

# 2. Start both frontend and backend
make start
# Opens Remotion studio at http://localhost:3000
# WebSocket server runs on ws://localhost:3001

# 3. Open browser and preview presentation

# 4. When done, Ctrl+C to stop servers

Option B: Docker (Recommended)

# 1. Start services (runs in background)
make docker-up
# Or: docker compose up -d

# 2. Access Remotion studio
# Open http://localhost:3000

# 3. View logs
docker compose logs -f frontend
docker compose logs -f backend

# 4. Stop services
make docker-down
# Or: docker compose down

⚙️ Makefile Commands

Command	Description
`make help`	Show all available commands
`make install`	Install dependencies for both services
`make start`	Start frontend (3000) + backend (3001)
`make start-frontend`	Start only Remotion studio
`make start-backend`	Start only WebSocket server
`make docker-up`	Start with Docker Compose
`make docker-down`	Stop Docker containers
`make docker-build`	Build Docker images
`make clean`	Remove node_modules and builds

🎨 Customization

Edit Presentation Content

Content lives in _bmad-output/presentations/showcase/data/release-notes.json:

{
  "title": "Your Title",
  "highlights": ["Point 1", "Point 2"],
  "features": [...],
  "metrics": {}
}

Modify Slides

Edit slide components in:

_bmad-output/presentations/showcase/remotion/src/slides/

TitleSlide.tsx
HighlightsSlide.tsx
FeaturesSlide.tsx
FixesSlide.tsx
ChartSlide.tsx
ThankYouSlide.tsx

Changes hot-reload in the studio.

Change Theme

Edit remotion/src/theme.ts:

export const theme = {
  colors: {
    background: '#0f0f23',  // Your background
    primary: '#64ffda',     // Your accent color
    // ...
  }
};

📹 Rendering Video

Once you're happy with the preview:

cd _bmad-output/presentations/showcase/remotion
npm run build
# Output: remotion/out/video.mp4

You can upload this video to YouTube, Vimeo, or use it in presentations.

🔄 Regeneration from Script

The showcase presentation is auto-generated from a script file via the BMAD Showcase agent.

To regenerate:

# From BMAD root (adjust paths as needed)
npx ts-node _bmad/bmb/skills/bmad-agent-presentation/scripts/showcase.ts \
  --input _bmad/bmb/skills/bmad-agent-presentation/showcase.md \
  --output _bmad-output/presentations/showcase/

This re-creates the slide components, data file, and Root composition from the script.

🐳 Docker Details

Images

frontend: Based on Node.js, runs Remotion studio on port 3000
backend: Based on Node.js, runs WebSocket server on port 3001

Networks

Containers connect via presentations-network bridge network. Frontend can reach backend at ws://backend:3001.

Volumes

./_bmad-output/presentations/showcase/remotion:/app (frontend)
./_bmad-output/presentations/showcase/remotion/server:/app (backend)

Mounted for hot-reload in development. Production should copy files and remove volume mounts.

🤝 BMAD Integration

This project is part of the BMAD agent framework (_bmad/). The BMAD framework provides:

Multiple AI agents (PM, Architect, Dev, QA, UX, etc.)
Automated workflows for product development
Skill-based execution system
This showcases how BMAD can generate video presentations automatically.

BMAD Modules:

Module	Purpose
`_bmad/core/`	Core framework
`_bmad/bmm/`	Build & Manage module
`_bmad/bmb/`	Builder module (includes Showcase agent)
`_bmad/cis/`	Creative Intelligence Suite
`_bmad/tea/`	Test Engineering Architecture

📚 Documentation

Project README: You are here.
Detailed Docs: docs/SHOWCASE_PROJECT_DOCUMENTATION.md
Showcase Guide: _bmad-output/presentations/showcase/README.md
BMAD Index: index.md

🛠️ Development

Add a New Slide

Create component: remotion/src/slides/MyNewSlide.tsx

Import in remotion/src/Root.tsx:

import { MyNewSlide } from './slides/MyNewSlide';

Add to composition sequence:

<Sequence from={myStartFrame} durationInFrames={myDuration}>
  <MyNewSlide data={myData} />
</Sequence>

Update WebSocket Backend

Edit remotion/server/ws-server.js. Example to broadcast slide changes:

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    const data = JSON.parse(message);
    if (data.type === 'SLIDE_CHANGE') {
      // Update frontend clients
      wss.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify({ slide: data.slide }));
        }
      });
    }
  });
});

Frontend connects from Remotion code if needed:

const ws = new WebSocket('ws://localhost:3001');
ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  // React to backend events
};

🐛 Troubleshooting

Port already in use

# Find and kill
lsof -ti:3000 | xargs kill -9
lsof -ti:3001 | xargs kill -9

Docker permission denied

Add user to docker group:

sudo usermod -aG docker $USER
# Log out and back in

npm install fails

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

Remotion studio blank

Check browser console for errors
Ensure src/index.tsx renders <RemotionRoot />
Verify Root.tsx exports composition with Composition component

WebSocket not connecting

Confirm backend running (make start-backend or docker compose up backend)
Check ws://localhost:3001 is accessible
Verify frontend connection code (if custom)

📦 Dependencies

Frontend (remotion/package.json)

@remotion/remotion - Core Remotion library
react, react-dom - React 18
typescript - TypeScript
(Optional) tailwindcss, @remotion/tailwind - Styling

Backend (server/package.json)

ws - WebSocket library

See individual package.json files for exact versions.

🤔 License

MIT - see LICENSE file for details.

🙏 Acknowledgments

Remotion - Fantastic video creation platform
BMAD Framework - AI agent orchestration
Docker - Containerization made easy

📞 Support

Issues: GitHub Issues
Documentation: See docs/
BMAD Help: Run make help or see index.md

Made with ❤️ and Remotion

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.github/workflows		.github/workflows
.opencode		.opencode
_bmad-output/presentations/showcase		_bmad-output/presentations/showcase
_bmad		_bmad
docs		docs
.agents		.agents
.crush		.crush
.cursor		.cursor
.gemini		.gemini
.gitattributes		.gitattributes
.gitignore		.gitignore
Makefile		Makefile
README.md		README.md
docker-compose.yml		docker-compose.yml
index.md		index.md

Folders and files

Latest commit

History

Repository files navigation