Remotion Video Creation Skill

This skill provides expertise in creating videos programmatically using Remotion (React-based video framework).

Capabilities

• •Video Composition: Setting up compositions with fps, durationInFrames, width, and height in Root.tsx.
• •Animation: Using useCurrentFrame, interpolate, and spring for smooth animations.
• •Sequencing: Using <Sequence>, <Series>, and <AbsoluteFill> to structure the timeline.
• •Audio Integration: Adding background music and sound effects with <Audio />.
• •Dynamic Content: Fetching data (APIs, JSON) to generate personalized videos.
• •Rendering: Configuring codecs, output formats, and parallel rendering.

Core Concepts

1. The Composition

The root of every video. Defined in Root.tsx.

<Composition
  id="MyVideo"
  component={MyVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
/>

2. Animation Hooks

• •useCurrentFrame(): Get the current frame number (0 to duration).
• •useVideoConfig(): Get video metadata (width, height, fps, duration).
• •interpolate(frame, [0, 100], [0, 1]): Map frame numbers to values (opacity, scale, etc.).
• •spring({ frame, fps }): Create physics-based animations.

3. Layout & Sequencing

• •<AbsoluteFill>: A helper component that fills the parent container (absolute positioning).
• •<Sequence>: Place a component at a specific time on the timeline.
  tsx

  <Sequence from={0} durationInFrames={30}>
    <Intro />
  </Sequence>
  

• •<Series>: Sequence components one after another automatically.

Best Practices

• •Performance: Use React.memo for heavy components. Avoid heavy computations in the render loop.
• •Assets: Store images/video in public/ or import them. Use staticFile() for public assets.
• •Testing: Use the Remotion Player for fast feedback during development.
• •Folder Structure: Organize components logically (e.g., src/components, src/scenes).

Example Prompt

"Create a 15-second promo video for a coffee shop with a fading text intro and a sliding image gallery."