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

• Select narrative template based on video type → see rules/narrative-templates.md

• Select visual style → see rules/style-presets.md

• Map user's messages to scene slots in the selected template

• Select animation pattern for each scene → see rules/scene-patterns.md

• 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 :

• src/config.ts — all parameters (colors, typography, scene frames)

• src/Root.tsx — composition registration

• src/Composition.tsx — TransitionSeries with all scenes

• src/components/ — shared components (background, etc.)

• 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

• Create src/scenes/SceneN_Name.tsx

• 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

• Apply the selected animation pattern from the plan

• 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, composition, narrative coherence, technical correctness).

• Score >= 7.0 and no instant-fails → PASS, proceed to next scene

• Score < 7.0 or instant-fail triggered → proceed to Step 4d

Step 4d: Auto-fix (max 2 iterations)

Apply targeted fixes from the deduction → fix mapping table in rules/scene-evaluator.md . Each deduction maps to a concrete code change — not a vague suggestion. After fixing:

• Return to Step 4b (re-render stills, re-score)

• After iteration 2, if still below threshold: emit WARNING and proceed to next scene

Cross-scene tracking: Maintain a running context of accent colors, spring presets, entrance directions, and techniques used per scene. At scene 3+, check for variety issues (same preset 3x in a row, same entrance direction, etc.).

After all scenes complete: Output a full Evaluation Summary Table showing per-scene scores, iteration counts, and cross-scene notes before proceeding to Phase 5.

Pattern selection principle: Use spring() for physics-driven motion with bounce/overshoot. Use GSAP for SplitText, DrawSVG, MorphSVG, and complex timeline orchestration. Use interpolate() for simple linear/eased motion.

Phase 5: Rendering

Standard MP4

npx remotion render src/index.ts MainVideo --output out/video.mp4

High quality

npx remotion render src/index.ts MainVideo --codec h264 --crf 15

Transparent background (social overlays)

npx remotion render src/index.ts MainVideo --codec prores --prores-profile 4444 npx remotion render src/index.ts MainVideo --codec vp9 --output out/overlay.webm

Format Alpha Use Case

MP4 H.264 No Universal playback

ProRes 4444 Yes Professional compositing

WebM VP9 Yes Web overlays

Complexity Calibration

Match implementation complexity to the emotional tone and visual style. The effort invested in animation must serve the creative vision — not exceed or undercut it.

Tone × Style Pacing Spring Preset GSAP Usage Hold Duration

Urgent + Bold Typography Fast (1.5-2.5s scenes) stiff (stagger: 2f) charCascade, hard cut transitions Short (0.5s)

Exciting + Dark Tech Medium-fast (2-3s) bouncy / pop (stagger: 3f) circleReveal transitions, DrawSVG Medium (0.8s)

Professional + Apple Minimal Measured (3-4s) smooth / snappy (stagger: 5f) textReveal, SplitScreenComparison Long (1.2s)

Warm + Warm Organic Slow (3-5s) gentle / molasses (stagger: 8f) Minimal GSAP, prefer spring-only Long (1.5s)

Rebellious + Retro Pop Irregular stiff

• rubber alternating ScrambleText, glitch effects Variable

Playful + any Bouncy (2-3s) wobbly / pop (stagger: 3f) Minimal GSAP, SpringTrail + GridStagger Medium (0.8s)

Principle: One signature transition executed perfectly creates more impact than six mediocre effects. Invest animation budget in the memory anchor moment.

Anti-bloat rule: Each scene should use ONE dominant animation technique:

• Spring-dominant: spring()

• interpolate() for all motion (bouncy entrances, trails, counters)

• GSAP-dominant: useGSAPTimeline for text splits, SVG operations, complex orchestration

• Mixed: Spring for element entrances, GSAP for text splitting within that element (acceptable)

• NEVER: GSAP timeline + spring physics + react-animation background + complex interpolations in one scene

Spring-first principle: Default to spring() for all entrances, exits, and stagger animations. Only add GSAP when you specifically need SplitText, DrawSVG, MorphSVG, ScrambleText, or complex timeline labels. Spring is lighter, requires no additional dependency, and produces naturally organic motion.

Creative Direction Principles

Every video must have a point of view. A "clean, professional" video without a strong aesthetic commitment is just a generic video. Commit to specific, bold choices:

• A color that dominates (not 5 equally-weighted pastels)

• A font that has character (not the first Google Font result)

• A motion signature that repeats across scenes (the same easing curve, the same entrance direction, the same hold rhythm)

• A spatial rule that breaks expectations (all text left-aligned at 20%, asymmetric panels, diagonal grid)

The Memorability Test: Before finalizing the plan, ask: "If I showed this next to 10 other AI-generated promo videos, would mine look distinctly different?" If no, push the aesthetic further.

Quick Decision Reference

"I need..." Use

Bold text entrance (split chars) gsap: charCascade / textReveal effect

Bold text entrance (bouncy words) spring: WordTrail / CharacterTrail

Side-by-side comparison gsap: SplitScreenComparison template

Card flip reveal (smooth) gsap: CardFlip3D template

Card flip reveal (spring physics) spring: SpringCardFlip

Elements from both sides gsap: PerspectiveEntrance template

Word highlighting gsap: TextHighlightBox pattern

UI click simulation gsap: CursorClick pattern

Text swap animation gsap: RotateXTextSwap pattern

Flowing background react-animation: Aurora / Silk

Film grain overlay react-animation: NoiseOverlay

Simple fade / slide Remotion: interpolate()

Number counter (linear) Remotion: interpolate()

Number counter (overshoot) spring: SpringCounter

Bouncy scale entrance spring: ScalePop

Staggered list/grid reveal spring: SpringTrail / GridStagger

Enter + exit animation spring: useSpringEnterExit

Sequential orchestration spring: useSpringChain

Typing effect Remotion: .slice() + interpolate()

Scene transition (wipe/iris) gsap: circleReveal / wipeIn effect

Scene transition (spring slide) spring: SpringSlide / SpringCrossfade

Logo stroke draw gsap: DrawSVG + drawIn effect

Feature grid pop-in spring: SpringFeatureGrid

Variability Enforcement

NEVER produce the same aesthetic twice across different videos. Each production must feel like a unique creative work, not a template fill-in.

• Rotate fonts: Never use the same display font in consecutive videos. If you used Space Grotesk last time, pick Clash Display or Cabinet Grotesk this time.

• Rotate color temperature: Alternate between warm (orange/coral/gold) and cool (blue/violet/emerald) dominant palettes.

• Rotate spatial composition: If the last video was center-aligned symmetrical, make this one left-anchored asymmetrical.

• Rotate motion signatures: Vary between spring-heavy, linear-mechanical, and organic-fluid animation philosophies.

• Rotate background treatments: Cycle through solid, gradient blob, aurora, grain texture, geometric pattern.

The Divergence Rule: Before starting Phase 3, mentally compare the planned aesthetic to a "default AI video" — white background, centered Inter text, fade-in transitions, blue accent. If your plan shares more than ONE of these traits, push further from the default.

Creative Ambition

Every video should make viewers want to screenshot a frame and share it. This is motion graphics as a craft — not template assembly.

Push beyond "functional" toward "remarkable." Use unexpected font pairings. Try color combinations that feel risky. Let one scene break the grid. Give the memory anchor moment 2x the animation investment of other scenes.

The gap between a forgettable promo and a memorable one is not technical complexity — it's creative courage. Make bold choices and execute them with precision.