shellbot-video-generator

# Video Generator (Remotion)

Create professional motion graphics videos programmatically with React and Remotion.

## Non-Negotiable Story Structure (AIDA)

Every video MUST follow the AIDA arc in order:

1. **Attention** — Establish the problem being solved. High-impact hook in the first 3 seconds.
2. **Interest** — Introduce the solution. Show what it is and why it matters.
3. **Desire** — Show use cases, not feature lists. Demonstrate real scenarios the viewer relates to.
4. **Action** — End with a CTA that includes an incentive (discount, free trial, limited offer).

## Default Workflow (ALWAYS follow this)

1. **Scrape brand data** (if featuring a product) using Firecrawl
2. **Create the project** from the local template:
   ```bash
   cd output && bash ../scripts/remotion.sh init <project-name>
   ```
3. **Install dependencies** with `npm install`
4. **Build all scenes** with proper motion graphics
5. **Start Remotion Studio** as a background process:
   ```bash
   cd output/<project-name> && npm run dev
   ```
   Wait for "Server ready" on port 3000.
6. **Expose via Cloudflare tunnel** so user can access it:
   ```bash
   bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
   ```
7. **Send the user the public URL** (e.g. `https://xxx.trycloudflare.com`)

The user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically.

### Rendering (only when user explicitly asks to export):
```bash
cd output/<project-name>
npx remotion render CompositionName out/video.mp4
```

## Quick Start

```bash
# Scaffold project from local template (no network needed)
cd output && bash ../scripts/remotion.sh init my-video
cd my-video && npm install

# Add motion libraries
npm install lucide-react

# Start dev server
npm run dev

# Expose publicly
bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
```

## Collecting Visual Assets

**MANDATORY:** Every video needs visual assets — logos, screenshots, product imag...