NeverSight/learn-skills.dev

When this skill is activated, always start your first response with the :clapper: emoji.

Remotion Video

Remotion is a framework for creating videos programmatically using React. Instead of timeline-based editors, you write compositions as React components where every frame is a function of the current frame number. This gives you the full power of TypeScript, npm packages, and component-based architecture for building videos - from animated explainers and social media clips to data-driven visualizations and personalized video at scale.

This skill covers project setup, composition structure, frame-based animations with interpolate and spring, scene sequencing, asset management, audio integration, parametrized videos with Zod schemas, and rendering to MP4/WebM via CLI or programmatic APIs.

---

When to use this skill

Trigger this skill when the user:

• Wants to create a video programmatically using React/TypeScript
• Asks about Remotion compositions, useCurrentFrame, or useVideoConfig
• Needs to animate text, elements, or transitions between scenes
• Wants to render a video to MP4, WebM, or GIF from code
• Asks about spring animations, interpolate, or frame-based timing
• Needs to set up a new Remotion project from scratch
• Wants to add audio, images, or fonts to a Remotion video
• Asks about parametrized/data-driven video generation
• Needs to configure Remotion Studio for previewing compositions

Do NOT trigger this skill for:

• General React questions unrelated to video creation - use React skills
• Video editing with traditional timeline tools (Premiere, DaVinci, FFmpeg CLI)
• CSS animations for web pages - use animation/motion-design skills
• Video playback or streaming in web apps - use media player skills

---

Key principles

1. Every frame is a pure function - A Remotion component receives the current frame via useCurrentFrame() and must render deterministically for that frame. No side effects, no randomness without seeds, no reliance on wall-clock time. The same frame number must always produce the same visual output.

2. Compositions are the unit of video - Each <Composition> defines a video with explicit dimensions (width, height), frame rate (fps), and duration (durationInFrames). Think of compositions as "pages" in your project - one per video variant or scene that can be rendered independently.

3. Interpolate for everything - The interpolate() function maps frame numbers to any numeric value (opacity, position, scale, color channels). Combined with extrapolateRight: 'clamp', it is the workhorse for all animations. Use spring() when you need physics-based easing.

4. Sequence for time offsets - Use <Sequence from={frame}> to delay when children start appearing, and <Series> to play children one after another. Never use setTimeout or manual frame math for sequencing - the declarative primitives handle it correctly across preview and render.

5. Assets are static, data is dynamic - Put images, fonts, and audio files in the public/ folder and reference them with staticFile(). For dynamic data (API responses, database records), use delayRender() / continueRender() to pause rendering until the data is loaded.

---

Core concepts

Composition structure

Every Remotion project has a root file that registers compositions:

import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Frame-based timing

All timing in Remotion is expressed in frames, not seconds. To convert:

• Seconds to frames: seconds * fps
• Frames to seconds: frame / fps

At 30 fps, a 5-second video is 150 frames. Frame 0 is the first frame.

Animation model

Remotion provides two core animation primitives:

Primitive	Use case	Example
interpolate()	Linear/clamped mapping from frame to value	Fade, slide, scale
spring()	Physics-based animation with damping/mass	Bouncy entrances, natural motion

Both return a number you apply to styles (opacity, transform, etc.).

---

Common tasks

1. Set up a new Remotion project

npx create-video@latest

This scaffolds a project with TypeScript, a sample composition, and Remotion Studio configured. The project structure will be:

my-video/
  src/
    Root.tsx          # Registers all compositions
    MyComp.tsx        # Your first composition component
  public/             # Static assets (images, fonts, audio)
  remotion.config.ts  # Remotion configuration
  package.json

Start the preview studio with:

npx remotion studio

2. Create a basic composition with useCurrentFrame

import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';

export const FadeInText: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  const translateY = interpolate(frame, [0, 30], [20, 0], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#0f0f0f',
      }}
    >
      <h1
        style={{
          fontSize: 80,
          color: 'white',
          opacity,
          transform: `translateY(${translateY}px)`,
        }}
      >
        Hello Remotion
      </h1>
    </AbsoluteFill>
  );
};

3. Animate text word by word

Split text into words and stagger each word's appearance using <Sequence>:

import { AbsoluteFill, Sequence, useCurrentFrame, interpolate } from 'remotion';

const AnimatedWord: React.FC<{ children: string }> = ({ children }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: 'clamp',
  });
  const translateY = interpolate(frame, [0, 15], [10, 0], {
    extrapolateRight: 'clamp',
  });

  return (
    <span
      style={{
        display: 'inline-block',
        opacity,
        transform: `translateY(${translateY}px)`,
        marginRight: 12,
      }}
    >
      {children}
    </span>
  );
};

export const WordByWord: React.FC<{ text: string }> = ({ text }) => {
  const words = text.split(' ');

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#1a1a2e',
        flexWrap: 'wrap',
        padding: 100,
      }}
    >
      {words.map((word, i) => (
        <Sequence key={i} from={i * 8}>
          <AnimatedWord>{word}</AnimatedWord>
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

4. Element animations with spring

Use spring() for physics-based animations that feel natural:

import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from 'remotion';

export const SpringCard: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

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

  const slideUp = spring({
    frame: frame - 10,
    fps,
    config: { damping: 12, stiffness: 100 },
  });

  return (
    <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#0d1117' }}>
      <div
        style={{
          width: 400,
          height: 250,
          backgroundColor: '#161b22',
          borderRadius: 16,
          transform: `scale(${scale}) translateY(${(1 - slideUp) * 50}px)`,
        }}
      >
        <p style={{ color: 'white', fontSize: 32 }}>Spring Animation</p>
      </div>
    </AbsoluteFill>
  );
};

5. Scene transitions with Sequence and Series

Use <Sequence> for overlapping scenes and <Series> for sequential playback:

import { AbsoluteFill, Sequence, Series, useCurrentFrame, interpolate } from 'remotion';

const Scene: React.FC<{ color: string; title: string }> = ({ color, title }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ backgroundColor: color, justifyContent: 'center', alignItems: 'center' }}>
      <h1 style={{ color: 'white', fontSize: 72, opacity }}>{title}</h1>
    </AbsoluteFill>
  );
};

export const MultiScene: React.FC = () => {
  return (
    <AbsoluteFill>
      <Series>
        <Series.Sequence durationInFrames={60}>
          <Scene color="#e63946" title="Scene One" />
        </Series.Sequence>
        <Series.Sequence durationInFrames={60}>
          <Scene color="#457b9d" title="Scene Two" />
        </Series.Sequence>
        <Series.Sequence durationInFrames={60}>
          <Scene color="#2a9d8f" title="Scene Three" />
        </Series.Sequence>
      </Series>
    </AbsoluteFill>
  );
};

6. Asset handling (images, fonts, staticFile)

Reference static assets from the public/ folder using staticFile():

import { AbsoluteFill, Img, staticFile } from 'remotion';

export const AssetDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
      <Img
        src={staticFile('logo.png')}
        style={{ width: 300, height: 300 }}
      />
    </AbsoluteFill>
  );
};

Load custom fonts with @remotion/google-fonts or CSS @font-face:

import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

export const FontDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
      <h1 style={{ fontFamily, fontSize: 64, color: 'white' }}>
        Custom Font
      </h1>
    </AbsoluteFill>
  );
};

7. Audio integration

Add audio with volume control and timing:

import { AbsoluteFill, Audio, Sequence, staticFile, interpolate } from 'remotion';

export const WithAudio: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#000' }}>
      <Audio
        src={staticFile('background-music.mp3')}
        volume={(f) =>
          interpolate(f, [0, 30, 120, 150], [0, 0.8, 0.8, 0], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          })
        }
      />
      <Sequence from={15}>
        <Audio src={staticFile('whoosh.mp3')} volume={0.5} />
      </Sequence>
    </AbsoluteFill>
  );
};

8. Rendering videos

Render to MP4 from the command line:

# Render default composition
npx remotion render src/index.ts MyVideo out/video.mp4

# Render at 4K resolution
npx remotion render src/index.ts MyVideo out/video.mp4 --width 3840 --height 2160

# Render to WebM
npx remotion render src/index.ts MyVideo out/video.webm --codec vp8

# Render a specific frame range
npx remotion render src/index.ts MyVideo out/video.mp4 --frames 0-90

# Render with custom props
npx remotion render src/index.ts MyVideo out/video.mp4 --props '{"title": "Hello"}'

For programmatic rendering, see references/rendering-guide.md.

---

Anti-patterns / common mistakes

Mistake	Why it is wrong	What to do instead
Using Math.random() without a seed	Produces different output per frame during render	Use a deterministic seed or random() from Remotion
Using setTimeout / setInterval	Breaks frame-based rendering - timers do not advance per frame	Use useCurrentFrame() and frame math for all timing
Missing extrapolateRight: 'clamp'	Values overshoot beyond the target range on later frames	Always add { extrapolateRight: 'clamp' } to interpolate()
Hardcoding fps in frame calculations	Breaks when composition fps changes	Use useVideoConfig().fps to derive timing
Using <Video> for rendered output	Slower rendering performance due to seeking overhead	Use <OffthreadVideo> for better render performance
Forgetting delayRender() for async data	Renders before data loads, showing empty/broken frames	Call delayRender() immediately, continueRender() when ready
Inline styles with non-deterministic values	Flickers or inconsistency between preview and render	Derive all style values from the frame number only
Giant single composition	Hard to maintain and impossible to render scenes independently	Split into multiple compositions or use Series for scenes

---

Gotchas

1. extrapolateRight default is 'extend' - If you write interpolate(frame, [0, 30], [0, 1]) without clamping, the value will keep increasing beyond 1 after frame 30 (e.g., frame 60 gives opacity 2). Always pass { extrapolateRight: 'clamp' } unless you intentionally want extrapolation.

2. spring() starts from frame 0 of its context - When using spring() inside a <Sequence from={60}>, the frame passed to spring resets to 0 at frame 60 of the parent. If you pass the parent's raw frame, the animation will already be complete. Use useCurrentFrame() inside the Sequence child, not a frame from the parent.

3. staticFile() paths are relative to public/ - Calling staticFile('images/logo.png') looks for public/images/logo.png. Using absolute paths or paths outside public/ will fail silently in preview and error during render. Ensure all assets are in the public/ directory.

4. delayRender has a 30-second timeout - If your async operation (API call, font load) takes longer than 30 seconds, the render will abort. Increase the timeout with delayRender('Loading data', { timeoutInMilliseconds: 60000 }) for slow operations.

5. Composition dimensions must be even numbers - Video codecs (H.264, VP8) require even width and height. Remotion will throw an error if you use odd dimensions like 1921x1081. Always use even pixel values (1920x1080, 1280x720, etc.).

---

References

For detailed patterns on specific Remotion sub-domains, read the relevant file from the references/ folder:

• references/animation-patterns.md - advanced animation techniques including staggered cascades, parallax effects, morph transitions, easing curves, and complex multi-property animations
• references/rendering-guide.md - rendering configuration, codec options, Lambda/cloud rendering, programmatic rendering API, GIF output, and performance optimization
• references/project-structure.md - project organization, parametrized videos with Zod schemas, reusable component patterns, shared styles, and multi- composition architecture

Only load a references file if the current task requires it - they are long and will consume context.

---

Companion check

On first activation of this skill in a conversation: check which companion skills are installed by running ls ~/.claude/skills/ ~/.agent/skills/ ~/.agents/skills/ .claude/skills/ .agent/skills/ .agents/skills/ 2>/dev/null. Compare the results against the recommended_skills field in this file's frontmatter. For any that are missing, mention them once and offer to install:

npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name>

Skip entirely if recommended_skills is empty or all companions are already installed.