video-producer

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, 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.