Video Creator - Project Templates

Starter Remotion project structures for each video type. Use these as scaffolding when building the Remotion project in Steps 3-4.

---

Shared Setup (All Video Types)

package.json dependencies

{
  "dependencies": {
    "@remotion/cli": "^4.0.0",
    "@remotion/player": "^4.0.0",
    "@remotion/zod-types": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "remotion": "^4.0.0",
    "zod": "^3.22.0"
  },
  "devDependencies": {
    "@remotion/eslint-config": "^4.0.0",
    "typescript": "^5.0.0"
  }
}

remotion.config.ts

import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("jpeg");
Config.setOverwriteOutput(true);

Base schema pattern

import { z } from "zod";

export const baseSchema = z.object({
  title: z.string(),
  primaryColor: z.string().default("#3B82F6"),
  secondaryColor: z.string().default("#1E293B"),
  backgroundColor: z.string().default("#0F172A"),
  fontFamily: z.string().default("Inter"),
  fps: z.number().default(30),
});

---

Product Demo (30-120s, 6-15 scenes)

File tree

product-demo/
  src/
    compositions/
      Scene01Hook.tsx
      Scene02Problem.tsx
      Scene03Solution.tsx
      Scene04Feature1.tsx
      Scene05Feature2.tsx
      Scene06Feature3.tsx
      Scene07SocialProof.tsx
      Scene08CTA.tsx
    components/
      AnimatedLogo.tsx
      ScreenRecording.tsx
      FeatureCard.tsx
      TransitionWipe.tsx
      CallToAction.tsx
      PriceTag.tsx
    lib/
      schema.ts
      colors.ts
      animations.ts
    Root.tsx
    index.ts
  public/
    logo.svg
    screenshots/
    recordings/
  video-script.yaml
  package.json
  remotion.config.ts
  tsconfig.json

Scene scaffold - Hook

import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";

export const Scene01Hook: React.FC<{ title: string; primaryColor: string }> = ({
  title,
  primaryColor,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const logoScale = spring({ frame, fps, config: { damping: 12 } });
  const titleOpacity = interpolate(frame, [20, 40], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ backgroundColor: "#0F172A", justifyContent: "center", alignItems: "center" }}>
      <div style={{ transform: `scale(${logoScale})` }}>
        {/* Logo component */}
      </div>
      <h1 style={{ opacity: titleOpacity, color: primaryColor, fontSize: 80 }}>
        {title}
      </h1>
    </AbsoluteFill>
  );
};

Typical scene flow

1. Hook - grab attention with bold statement or question (5s)
2. Problem - show the pain point (8s)
3. Solution intro - reveal the product (5s)
4. Feature 1-3 - demonstrate key features with screen recordings (8s each)
5. Social proof - testimonials, stats, logos (5s)
6. CTA - clear next step with URL/button (5s)

---

Explainer (60-180s, 8-20 scenes)

File tree

explainer/
  src/
    compositions/
      Scene01Intro.tsx
      Scene02Context.tsx
      Scene03Problem.tsx
      Scene04HowItWorks1.tsx
      Scene05HowItWorks2.tsx
      Scene06HowItWorks3.tsx
      Scene07Benefits.tsx
      Scene08Comparison.tsx
      Scene09UseCases.tsx
      Scene10CTA.tsx
    components/
      AnimatedDiagram.tsx
      StepIndicator.tsx
      ComparisonTable.tsx
      IconGrid.tsx
      ProgressBar.tsx
      AnimatedArrow.tsx
    lib/
      schema.ts
      colors.ts
      animations.ts
    Root.tsx
    index.ts
  public/
    icons/
    diagrams/
  video-script.yaml
  package.json
  remotion.config.ts
  tsconfig.json

Typical scene flow

1. Intro - topic and why it matters (8s)
2. Context - background information (10s)
3. Problem - what goes wrong without this (8s)
4. How it works 1-3 - step-by-step walkthrough (10s each)
5. Benefits - key advantages (8s)
6. Comparison - before/after or vs competitors (10s)
7. Use cases - real-world applications (8s)
8. CTA - next steps (5s)

---

Social Clip (15-60s, 3-8 scenes)

File tree

social-clip/
  src/
    compositions/
      Scene01Hook.tsx
      Scene02Key Message.tsx
      Scene03CTA.tsx
    components/
      BoldText.tsx
      AnimatedEmoji.tsx
      GradientBackground.tsx
      SwipeTransition.tsx
    lib/
      schema.ts
      colors.ts
    Root.tsx
    index.ts
  public/
    brand/
  video-script.yaml
  package.json
  remotion.config.ts
  tsconfig.json

Key differences from other types

• Much faster pacing (3-8 seconds per scene)
• Bolder typography (120px+ headlines)
• High contrast colors for mobile viewing
• Vertical format option (1080x1920 for Stories/Reels)
• No complex diagrams - text and motion graphics only
• Hook must grab attention in first 2 seconds

Vertical format schema override

export const socialClipSchema = baseSchema.extend({
  orientation: z.enum(["landscape", "portrait"]).default("landscape"),
  width: z.number().default(3840),  // landscape
  height: z.number().default(2160), // landscape
  // For portrait: width=2160, height=3840
});

---

Announcement (15-45s, 3-6 scenes)

File tree

announcement/
  src/
    compositions/
      Scene01Reveal.tsx
      Scene02Details.tsx
      Scene03Availability.tsx
      Scene04CTA.tsx
    components/
      CountdownReveal.tsx
      ConfettiExplosion.tsx
      DateBadge.tsx
      PricingCard.tsx
    lib/
      schema.ts
      colors.ts
    Root.tsx
    index.ts
  public/
    brand/
    product-images/
  video-script.yaml
  package.json
  remotion.config.ts
  tsconfig.json

Typical scene flow

1. Reveal - dramatic product/feature reveal with animation (6s)
2. Details - what's new, key highlights (8s)
3. Availability - when, where, pricing (6s)
4. CTA - how to get it (4s)

---

Root.tsx Pattern (All Types)

import { Composition } from "remotion";
import { z } from "zod";
import { baseSchema } from "./lib/schema";
import { Scene01Hook } from "./compositions/Scene01Hook";
// ... import all scenes

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Individual scene compositions for preview */}
      <Composition
        id="Scene01"
        component={Scene01Hook}
        durationInFrames={150} // 5s * 30fps
        fps={30}
        width={3840}
        height={2160}
        schema={baseSchema}
        defaultProps={{
          title: "Your Product",
          primaryColor: "#3B82F6",
          secondaryColor: "#1E293B",
          backgroundColor: "#0F172A",
          fontFamily: "Inter",
          fps: 30,
        }}
      />
      {/* Main composition: all scenes stitched together */}
      <Composition
        id="Main"
        component={MainVideo}
        durationInFrames={1800} // total frames from script
        fps={30}
        width={3840}
        height={2160}
        schema={baseSchema}
        defaultProps={{
          title: "Your Product",
          primaryColor: "#3B82F6",
          secondaryColor: "#1E293B",
          backgroundColor: "#0F172A",
          fontFamily: "Inter",
          fps: 30,
        }}
      />
    </>
  );
};

---

Transition Patterns

Crossfade

<Sequence from={0} durationInFrames={150}>
  <Scene01 />
</Sequence>
<Sequence from={135} durationInFrames={165}>
  {/* 15 frame overlap = 0.5s crossfade */}
  <Scene02 />
</Sequence>

Hard cut

<Sequence from={0} durationInFrames={150}>
  <Scene01 />
</Sequence>
<Sequence from={150} durationInFrames={150}>
  <Scene02 />
</Sequence>

Slide transition component

const SlideTransition: React.FC<{ direction: "left" | "right"; children: React.ReactNode }> = ({
  direction,
  children,
}) => {
  const frame = useCurrentFrame();
  const x = interpolate(frame, [0, 15], [direction === "left" ? 3840 : -3840, 0], {
    extrapolateRight: "clamp",
  });
  return <div style={{ transform: `translateX(${x}px)` }}>{children}</div>;
};

Video Creator - Troubleshooting

Common issues and fixes for Remotion rendering, audio sync, FFmpeg, ElevenLabs API, and performance problems.

---

Remotion Rendering Errors

"Cannot find module" when running npx remotion render

Cause: Missing dependencies or incorrect import paths.

Fix:

# Install all dependencies
npm install

# Verify the entry point exists
ls src/index.ts

# Check for typos in imports
npx tsc --noEmit

"Composition not found: Main"

Cause: The Main composition is not registered in Root.tsx or the id does not match.

Fix:

• Verify Root.tsx exports a <Composition id="Main" ... /> element
• Ensure RemotionRoot is registered in src/index.ts:

import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
registerRoot(RemotionRoot);

"durationInFrames must be a positive integer"

Cause: Frame count is zero, negative, or a float.

Fix:

• Check video-script.yaml - every scene must have frames as a positive integer
• Verify: Math.round(duration_seconds * 30) for each scene
• Total frames must equal sum of all scene frames

White/blank frames at the end of the video

Cause: Total durationInFrames on the Main composition is larger than the sum of all scene Sequences.

Fix:

• Calculate: sum(scene.frames) and set Main durationInFrames to that value
• Account for transition overlaps (crossfades reduce total frames)

Render crashes with "JavaScript heap out of memory"

Cause: Large assets or complex compositions exceeding Node.js memory limit.

Fix:

# Increase memory limit
NODE_OPTIONS=--max-old-space-size=8192 npx remotion render \
  src/index.ts Main out/video.mp4 --width 3840 --height 2160

# Or reduce concurrency
npx remotion render src/index.ts Main out/video.mp4 \
  --width 3840 --height 2160 --concurrency 2

"Could not find a browser" error

Cause: Remotion needs Chromium for rendering.

Fix:

npx remotion browser ensure

---

Audio Sync Problems

Music starts at wrong time

Cause: Audio <Sequence> from value does not match the intended start frame.

Fix:

// Music should start at frame 0 and span the entire video
<Sequence from={0} durationInFrames={totalFrames}>
  <Audio src={backgroundMusic} volume={0.3} />
</Sequence>

SFX plays out of sync with visual event

Cause: The SFX from frame does not match the visual trigger frame.

Fix:

1. Identify the exact frame where the visual event occurs
2. Set the SFX Sequence from to that frame number
3. Preview in Remotion Studio to verify sync

// Button click happens at frame 45 of Scene03 (frame 420 globally)
<Sequence from={420} durationInFrames={30}>
  <Audio src={clickSFX} volume={0.7} />
</Sequence>

Audio continues after video ends

Cause: Audio file is longer than the remaining frames.

Fix:

• Set durationInFrames on the Audio Sequence to clip it
• Or use endAt prop on the <Audio> component

Volume ducking is too aggressive / not enough

Cause: Ducking volume levels are wrong.

Fix - recommended volume levels:

const musicVolume = (frame: number) => {
  // Check if narration is active at this frame
  const isNarrationActive = narrationSegments.some(
    (seg) => frame >= seg.startFrame && frame <= seg.endFrame
  );

  if (isNarrationActive) {
    return 0.12; // Duck to 12% during narration
  }
  return 0.4; // Normal level 40%
};

<Audio src={backgroundMusic} volume={musicVolume} />

Audio pops/clicks at segment boundaries

Cause: Abrupt volume changes create audio artifacts.

Fix: Add a short fade (5-10 frames) at volume transition points:

const musicVolume = (frame: number) => {
  const fadeFrames = 8; // ~0.27s fade
  // Use interpolate for smooth transitions instead of hard cuts
  // ...calculate smooth volume curve with ramps
};

---

FFmpeg Issues

"FFmpeg not found" on render

Cause: FFmpeg is not installed or not in PATH.

Fix:

# macOS
brew install ffmpeg

# Ubuntu/Debian
sudo apt install ffmpeg

# Verify
ffmpeg -version

Render produces corrupt MP4

Cause: Interrupted render or incompatible codec settings.

Fix:

# Re-render with explicit codec
npx remotion render src/index.ts Main out/video.mp4 \
  --width 3840 --height 2160 --codec h264

# For ProRes output
npx remotion render src/index.ts Main out/video.mov \
  --width 3840 --height 2160 --codec prores --prores-profile 4444

Output file is very large

Cause: No CRF (quality) setting or using ProRes unintentionally.

Fix:

# Set CRF for H.264 (lower = better quality, larger file)
# 18 = visually lossless, 23 = default, 28 = smaller file
npx remotion render src/index.ts Main out/video.mp4 \
  --width 3840 --height 2160 --crf 23

---

ElevenLabs API Errors

401 Unauthorized

Cause: Invalid or missing API key.

Fix:

1. Verify key at https://elevenlabs.io/app/settings/api-keys
2. Set environment variable: export ELEVEN_API_KEY=sk_...
3. Check key has not expired or been revoked

429 Too Many Requests

Cause: Rate limit exceeded.

Fix:

• Wait 60 seconds and retry
• Process scenes sequentially, not in parallel
• Check your plan's rate limits at https://elevenlabs.io/app/subscription

400 Bad Request on text-to-speech

Cause: Text contains unsupported characters or exceeds length limit.

Fix:

• Remove special characters (emojis, unusual Unicode)
• Keep narration text under 5000 characters per request
• Split long narration into multiple API calls

Generated audio has wrong voice

Cause: Using wrong voice_id.

Fix:

# List available voices
curl -H "xi-api-key: $ELEVEN_API_KEY" \
  https://api.elevenlabs.io/v1/voices

# Use the correct voice_id from the response

Audio quality is poor / robotic

Cause: Using the wrong model or stability settings.

Fix:

• Use eleven_multilingual_v2 model for best quality
• Adjust stability (0.3-0.5 for natural, 0.7-0.9 for consistent)
• Adjust similarity_boost (0.5-0.75 recommended)

{
  "model_id": "eleven_multilingual_v2",
  "voice_settings": {
    "stability": 0.4,
    "similarity_boost": 0.65
  }
}

---

Performance Problems

Remotion Studio is very slow / laggy

Cause: 4K preview is too demanding for the machine.

Fix:

• Use the scale slider in Remotion Studio to preview at 50% or 25%
• Close other resource-heavy applications
• Preview individual scenes instead of the full Main composition

Render takes extremely long (>30 min for 60s)

Cause: Complex compositions, large images, or low concurrency.

Fix:

# Increase concurrency (default is half your CPU cores)
npx remotion render src/index.ts Main out/video.mp4 \
  --width 3840 --height 2160 --concurrency 8

# Do a quick 1080p test render first
npx remotion render src/index.ts Main out/test.mp4 \
  --width 1920 --height 1080

Images/screenshots appear blurry at 4K

Cause: Source images are too small for 4K resolution.

Fix:

• Use images at least 3840px wide for full-width backgrounds
• Screenshots should be taken at 2x or 3x Retina resolution
• Use SVG for logos and icons (scales infinitely)

Spring animations look janky

Cause: Wrong spring config or fps mismatch.

Fix:

// Use appropriate damping for smooth animation
const scale = spring({
  frame,
  fps: 30, // Must match composition fps
  config: {
    damping: 12,    // Higher = less bouncy
    stiffness: 100, // Higher = faster
    mass: 0.5,      // Lower = more responsive
  },
});

---

Project Structure Issues

Compositions don't appear in Remotion Studio

Cause: Root.tsx is not properly exporting compositions or not registered.

Fix checklist:

1. src/index.ts calls registerRoot(RemotionRoot)
2. Root.tsx exports a component that returns <Composition> elements
3. Each <Composition> has a unique id
4. No runtime errors in any imported component

TypeScript errors block the build

Cause: Type mismatches in Remotion components.

Fix:

# Check for type errors
npx tsc --noEmit

# Common fix: ensure props match the Zod schema
# The schema type and component props must align
type Props = z.infer<typeof mySchema>;
const MyScene: React.FC<Props> = (props) => { ... };

Hot reload not working in Remotion Studio

Cause: File watcher limit reached or wrong file being edited.

Fix:

# macOS: increase file watcher limit
echo kern.maxfiles=524288 | sudo tee -a /etc/sysctl.conf
echo kern.maxfilesperproc=524288 | sudo tee -a /etc/sysctl.conf

# Restart Remotion Studio after changes
# Ctrl+C then npx remotion studio

Video Creator - Workflow Checklist

Detailed checklist for each of the 7 steps with sub-tasks, expected outputs, and approval criteria.

---

Step 1: Deep Interview

Sub-tasks

• Check if user provided a reference video
• If reference video exists, run video-analyzer skill first
• Ask about the product/subject (what it does, core value prop, key features)
• Ask about the target audience (who, technical level, pain points)
• Ask about video goals (CTA, where it will be published, success metrics)
• Ask about tone and style (playful vs professional, pace, energy)
• Ask about existing assets (logos, screenshots, brand colors, fonts)
• Ask about content priorities (must-include features, messaging hierarchy)
• Ask about visual preferences (animation style, reference videos, layout)
• Ask about duration and format (target length, platform constraints)
• Summarize context after every 5-8 questions
• Confirm with user that you have enough context

Expected output

• Complete understanding of product, audience, goals, tone, assets, and visual direction documented in conversation history

Approval criteria

• User explicitly confirms: "You have enough context" or equivalent

Common mistakes at this step

• Dumping all questions at once instead of asking one at a time
• Not analyzing a reference video when the user provides one
• Proceeding with only 3-4 questions and guessing the rest
• Not summarizing periodically to confirm understanding

---

Step 2: Generate Script (YAML)

Sub-tasks

• Determine video type (product demo, explainer, social clip, announcement)
• Calculate total duration and scene count based on type
• Write scene-by-scene breakdown with narration text
• Calculate frame counts: duration_seconds * 30 = frames
• Verify total duration: sum(scene.duration_seconds) == total_duration_seconds
• Add visual descriptions for every scene
• Add animation notes for every scene
• Add music cues and SFX markers
• Add transition types between scenes
• Write video-script.yaml file
• Present full script to user for review
• Iterate on feedback until approved

Expected output

• video-script.yaml file with complete scene breakdown

Required YAML fields per scene

- id: scene-XX
  title: string
  duration_seconds: number
  frames: number  # duration_seconds * 30
  narration: string
  visuals: string
  animation_notes: string
  music_cue: string
  sfx: string
  transition_out: string

Approval criteria

• User explicitly approves the script
• All frame counts are mathematically correct
• Scene durations sum to total duration

---

Step 3: Visual Verification

Sub-tasks

• Initialize Remotion project if not already created
• Create composition files for each scene (visuals only)
• Implement animations described in script
• Set correct frame counts per composition
• Implement scene transitions
• Set resolution to 3840x2160
• Run npx remotion studio
• Tell user to preview at http://localhost:3000
• Collect visual feedback
• Iterate on feedback (colors, timing, animations, transitions)
• Get explicit visual approval

Expected output

• Working Remotion project with visual-only compositions
• All scenes previewable in Remotion Studio

Approval criteria

• User explicitly approves visuals: "Looks good" or equivalent
• No audio layer present yet (visual-only verification)

What NOT to do at this step

• Do not add audio files or audio components
• Do not implement volume ducking
• Do not generate narration
• Do not render the final video

---

Step 4: Build Full Remotion Project

Sub-tasks

• Finalize all compositions with polished animations
• Extract shared components to components/ directory
• Wire up scene-to-scene transitions in Root.tsx
• Add Zod schemas for parametrization
• Replace all magic numbers with schema props
• Verify frame counts match video-script.yaml
• Ensure project builds without errors: npx remotion studio
• Organize file structure cleanly

Expected output

• Complete, well-organized Remotion project
• Clean component hierarchy
• Zod schemas for all configurable values

File structure check

src/
  compositions/     # One file per scene
  components/       # Shared UI components
  Root.tsx          # Main composition wiring
  index.ts          # Entry point
video-script.yaml   # Source of truth

Approval criteria

• Project builds without errors
• Visual output matches Step 3 approved visuals
• Code is clean and well-organized

---

Step 5: Add Background Audio + SFX

Sub-tasks

• Source background music (user-provided or from documented sources)
• Import music into Remotion project
• Set base music volume (0.3-0.5)
• Place SFX at trigger points from the script
• Set SFX volumes (0.5-0.8)
• Implement ducking infrastructure (volume curves)
• Configure ducking to lower music to 0.1-0.15 during narration segments
• Preview audio-visual sync in Remotion Studio
• Collect feedback on audio mix
• Iterate until approved

Expected output

• Background music integrated with correct volume levels
• SFX placed at correct timestamps
• Ducking infrastructure ready for narration layer

Approval criteria

• User approves audio-visual sync
• Music and SFX enhance rather than distract from visuals

---

Step 6: Add Narration (Optional - costs money)

Sub-tasks

• Confirm user wants narration (this step is skippable)
• Check for ElevenLabs API key
• If no key, guide through setup at https://elevenlabs.io
• Ask voice preference questions (gender, age, accent, energy, warmth)
• Confirm costs before making API calls
• Generate narration audio for each scene
• Measure actual audio durations
• Compare actual durations to script estimates
• Adjust frame counts if durations differ
• Update video-script.yaml with actual durations
• Sync narration with visual timing
• Activate volume ducking during narration segments
• Preview complete audio mix

Expected output

• Narration audio files for each scene
• Updated video-script.yaml with actual durations
• Complete audio mix (music + SFX + narration with ducking)

Approval criteria

• User approves narration quality and sync
• OR user explicitly skips this step

---

Step 7: Final Preview + 4K Render

Sub-tasks

• Launch full preview in Remotion Studio
• Tell user to review complete video
• Get final approval
• Ask about output format preference (MP4/H.264, ProRes, WebM)
• Run 4K render command
• Verify output file exists and has expected duration
• Report file size and location to user

Render command

npx remotion render src/index.ts Main out/video.mp4 \
  --width 3840 --height 2160

Expected output

• Rendered video file at 3840x2160

Approval criteria

• User confirms final video is acceptable
• Output file plays correctly

---

Quick Reference: Step Dependencies

Step 1 (Interview)
  |
  v
Step 2 (Script YAML)
  |
  v
Step 3 (Visual Verification)  <-- APPROVAL GATE: visuals locked
  |
  v
Step 4 (Full Remotion Build)
  |
  v
Step 5 (Audio + SFX)
  |
  v
Step 6 (Narration) [OPTIONAL]  <-- APPROVAL GATE: costs money
  |
  v
Step 7 (Final Render)