Carocut Builder Remotion Ref

Remotion Reference

Comprehensive Remotion API reference with best practices. This skill supplements carocut-builder-compositor with detailed API documentation.

Relationship to other skills:

• carocut-builder-compositor: Implementation patterns, visual standards, project structure
• carocut-reviewer: Debugging, preview, render commands
• This skill: Remotion API reference, component documentation

Critical Rules (MANDATORY)

Quick Reference

Core Hooks

Animation Functions

Components

Utility Functions

References Directory

Detailed documentation organized by category. Load specific files when needed.

Core Concepts

Media Components

Assets and Resources

Text and Typography

Captions and Subtitles

Visual Effects

Data Visualization

Advanced Features

Common Patterns

interpolate with Safety

// ALWAYS include clamp options
const opacity = interpolate(
  frame,
  [startFrame, endFrame],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// ALWAYS ensure minimum 1-frame duration
const duration = Math.max(secToFrames(text.length * 0.02), 1);

Staggered Entry Animation

{items.map((item, index) => {
  const delay = 0.5 + index * 0.12;
  const startFrame = Math.round(delay * fps);
  const endFrame = Math.round((delay + 0.3) * fps);

  const opacity = interpolate(
    frame,
    [startFrame, endFrame],
    [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );
  const translateY = interpolate(
    frame,
    [startFrame, endFrame],
    [20, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <div key={index} style={{ opacity, transform: `translateY(${translateY}px)` }}>
      {item}
    </div>
  );
})}

Spring Animation

const { fps } = useVideoConfig();
const scale = spring({
  frame,
  fps,
  config: {
    damping: 12,
    stiffness: 100,
    mass: 0.5,
  },
});

BGM with Fade In/Out

const { durationInFrames } = useVideoConfig();
const fadeInFrames = 60;  // 2 seconds at 30fps
const fadeOutFrames = 90; // 3 seconds

<Audio
  src={staticFile('audio/bgm/ambient.mp3')}
  volume={(f) => interpolate(
    f,
    [0, fadeInFrames, durationInFrames - fadeOutFrames, durationInFrames],
    [0, 0.15, 0.15, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  )}
  loop
/>

Voiceover Positioning

// Absolute positioning - NOT nested Sequences
const voStartFrame = computeShotStartFrame('shot_005') + msToFrames(200);

<Sequence from={voStartFrame} durationInFrames={msToFrames(voDuration)} name="Shot-005">
  <Audio src={staticFile('audio/vo/VO_005.wav')} />
</Sequence>

TransitionSeries Usage

import { TransitionSeries, linearTiming } from '@remotion/transitions';
import { fade } from '@remotion/transitions/fade';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={CHAPTER1_DURATION}>
    <Chapter1 />
  </TransitionSeries.Sequence>

  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />

  <TransitionSeries.Sequence durationInFrames={CHAPTER2_DURATION}>
    <Chapter2 />
  </TransitionSeries.Sequence>
</TransitionSeries>

Frame Calculation Utilities

import { FPS } from './constants';

// Seconds to frames (always integer)
export function secToFrames(sec: number): number {
  return Math.round(sec * FPS);
}

// Milliseconds to frames (always integer)
export function msToFrames(ms: number): number {
  return Math.round((ms / 1000) * FPS);
}

// Safe duration (minimum 1 frame)
export function safeDuration(frames: number): number {
  return Math.max(frames, 1);
}

Error Quick Reference

Render Commands

All render output MUST go to the out/ directory so it appears in the resource panel.

# Test render (first 10 seconds)
npx remotion render MyComposition --frames=0-300 out/test.mp4

# Full render
npx remotion render MyComposition out/output.mp4

# High quality render
npx remotion render MyComposition --crf=15 out/output_hq.mp4

# Low memory render
npx remotion render MyComposition --concurrency=2 --gl=angle out/output.mp4

Notes

• This reference supplements carocut-builder-compositor, not replaces it
• For visual standards (fonts, colors, layout), see carocut-builder-compositor
• For debugging workflow, see carocut-reviewer
• Load specific rule files only when implementing that feature