/video-producer

name: video-producer
description: >
  End-to-end Remotion video production from natural language briefs.
  Orchestrates narrative structure, scene animation, visual style, and rendering
  to produce complete promotional videos. Use when a user wants to create a
  complete video (product promo, typographic piece, social media animation) —
  not just individual animation effects. Coordinates gsap-animation,
  spring-animation, and react-animation skills as building blocks.

When to use

Use this skill when the user provides a **video brief** — a description of a complete video with multiple scenes or a narrative arc.

**Triggers:** "create a promo video", "make a product demo", "I need a 30-second ad", "build a social media animation", or any prompt describing a multi-scene video.

**Do NOT use for:**

• Single animation effects → use `gsap-animation`
• Visual background components → use `react-animation`
• Non-video tasks

Skill Relationships

video-producer (this skill)       ← orchestration: what story, which scenes
├── gsap-animation                ← animation: text splits, SVG drawing, timeline orchestration
├── spring-animation              ← physics: bouncy entrances, elastic trails, organic motion
├── react-animation               ← visuals: Aurora, Silk, particles, grain
└── Remotion                      ← engine: rendering, composition, sequences

Workflow

Initial request: $ARGUMENTS

Phase 1: Brief Intake

Extract from the user's request. Use AskUserQuestion for any missing **required** fields.

| Field | Required | Default | Example | |-------|:--------:|---------|---------| | Product / brand name | Yes | — | "Topview" | | Video type | Yes | SaaS Promo | SaaS Promo / Typographic / Social Overlay | | Core messages (2-4) | Yes | — | "AI-powered editing", "No coding required" | | Emotional tone | Yes | — | Urgent / Reassuring / Exciting / Professional / Rebellious / Warm / Playful | | Memory anchor | Yes | — | "The single image viewers will remember 30s later" | | Target audience | No | General | "Developers", "Marketers" | | Duration | No | Template default | "25 seconds" | | Resolution | No | 1920x1080 | 1080x1080 for square | | FPS | No | 30 | 60 for social media | | Visual style | No | Apple Minimal | Apple Minimal / Bold Typography / Dark Tech / Warm Organic / Retro Pop / Editorial Mono | | CTA text | No | None | "Start Creating →" | | Color accent | No | From style preset | "#FF7D00" |

**Emotional tone** drives animation technique selection, spring config, and pacing:

• **Urgent** → `SPRING.stiff` + GSAP hard cuts, fast stagger (2-3 frames), `power3.out` for GSAP scenes
• **Reassuring** → `SPRING.smooth` / `SPRING.gentle`, high damping, slow reveals, warm palette
• **Exciting** → `SPRING.bouncy` / `SPRING.pop`, low damping, saturated colors, SpringTrail pop-ins
• **Professional** → `SPRING.snappy` / `SPRING.smooth`, measured timing, clean motion, generous holds
• **Rebellious** → `SPRING.stiff` + `SPRING.rubber` mix, GSAP glitch effects, irregular stagger
• **Warm** → `SPRING.gentle` / `SPRING.molasses`, warm gradients, rounded shapes, slow stagger (6-8 frames)
• **Playful** → `SPRING.wobbly` / `SPRING.rubber`, extreme overshoot, GridStagger center-out, bright accents

**Memory anchor** — the ONE visual moment viewers will screenshot or recall. Every production decision should reinforce this anchor. Ask: "If someone describes this video to a friend, what image do they describe?"

Phase 2: Planning

1. **Select narrative template** based on video type → see `rules/narrative-templates.md` 2. **Select visual style** → see `rules/style-presets.md` 3. **Map user's messages to scene slots** in the selected template 4. **Select animation pattern** for each scene → see `rules/scene-patterns.md` 5. Present the plan as a table to the user:

Scene | Duration | Pattern        | Content
1     | 3s       | TitleCard      | "Topview is powerful"
2     | 3s       | CardFlip3D     | CLI pain → AI solution
...

Wait for user confirmation before proceeding.

Phase 3: Project Scaffold

Generate the standard Remotion project structure → see `rules/project-scaffold.md`:

1. `src/config.ts` — all parameters (colors, typography, scene frames) 2. `src/Root.tsx` — composition registration 3. `src/Composition.tsx` — TransitionSeries with all scenes 4. `src/components/` — shared components (background, etc.) 5. `src/scenes/` — one file per scene

**Frame calculation:** `sceneFrames = Math.ceil(sceneDurationSeconds * fps)`

Phase 4: Scene Implementation + Evaluation

Implement scenes in order. Each scene goes through a **build → verify → fix** loop before moving to the next. → see `rules/scene-evaluator.md` for the full scoring rubric and auto-fix rules.

For each scene:

**Step 4a: Implement scene**

1. Create `src/scenes/SceneN_Name.tsx` 2. Select the right technique:

• Text splitting / SVG drawing / complex timelines → `useGSAPTimeline` or `useGSAPWithFonts` (from gsap-animation skill)
• Bouncy/elastic entrances / spring trails / overshoot effects → `spring()` + presets (from spring-animation skill)
• Simple fades / slides / linear counters → Remotion native `interpolate()`
• Visual backgrounds → react-animation components

3. Apply the selected animation pattern from the plan 4. Wire into `Composition.tsx` and register preview in `Root.tsx`

**Step 4b: Render stills**

Capture two key frames for visual inspection:

# Entry frame — catches early layout, initial positions
npx remotion still src/index.ts SceneN-Preview /tmp/sceneN_entry.png --frame={floor(SCENE_FRAMES.sceneN * 0.15)}

# Peak frame — hero moment, all entrances settled
npx remotion still src/index.ts SceneN-Preview /tmp/sceneN_peak.png --frame={floor(SCENE_FRAMES.sceneN * 0.60)}

**Step 4c: Evaluate**

Read the scene code + `config.ts` + rendered screenshots. Score across 7 weighted dimensions (anti-pattern compliance, typography, color & contrast, motion design, co