Learn Remotion
by Building

The Two Essential Hooks

Remotion calls your React component once for every frame of the video. Your job is to return what that frame looks like.

// These two hooks are the foundation of everything
const frame = useCurrentFrame();   // 0, 1, 2, 3 ... 119
const { fps, width, height, durationInFrames } = useVideoConfig();
// fps=30, so 4 seconds = 120 frames
// width=1920, height=1080 (Full HD)hooks

useVideoConfig() — What It Returns

interpolate() — Mapping Frames to Values

This is the core animation primitive. It maps a frame range to a value range:

// Fade in the title over the first 1 second (0 → 30 frames)
const titleOpacity = interpolate(
  frame,           // input value
  [0, 1 * fps],    // input range  (frame 0 → frame 30)
  [0, 1],          // output range (opacity 0 → 1)
  { extrapolateRight: "clamp" }  // don't go above 1
);

// Slide subtitle in from 60px right → 0
const subtitleX = interpolate(
  frame,
  [0.5 * fps, 1.5 * fps],  // starts at 0.5s, ends at 1.5s
  [60, 0],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);interpolate

More interpolate() Examples

// Scale up from 0.5x to 1x (zoom in effect)
const scale = interpolate(frame, [0, 30], [0.5, 1], {
  extrapolateRight: "clamp",
});

// Rotate 360° over 2 seconds (continuous spin)
const rotation = interpolate(frame, [0, 2 * fps], [0, 360]);
// No clamp! Keeps rotating past 360 if video is longer

// Multi-step: fade in → hold → fade out
const visibility = interpolate(
  frame,
  [0,  20,  40,  60],   // 4 keyframes
  [0,  1,   1,   0],    // in → hold → out
);

// Time display: convert frame number to seconds
const timeInSeconds = (frame / fps).toFixed(1);
// frame=45, fps=30 → "1.5"more examples

Applying Values to JSX

return (
  <AbsoluteFill style={{ backgroundColor }}>
    <h1 style={{
      opacity: titleOpacity,
      transform: `translateY(${titleY}px) scale(${scale}) rotate(${rotation}deg)`,
    }}>
      {title}
    </h1>
  </AbsoluteFill>
);JSX

AbsoluteFill — The Layout Container

<AbsoluteFill> is the go-to container. It's a div that fills the entire composition:

// It's equivalent to:
<div style={{
  position: "absolute",
  top: 0, left: 0, right: 0, bottom: 0,
}}>

// Stack multiple layers:
<AbsoluteFill>                        {/* Background layer */}
  <div style={{ background: "#0f172a" }} />
</AbsoluteFill>
<AbsoluteFill>                        {/* Content layer */}
  <h1>On top!</h1>
</AbsoluteFill>AbsoluteFill

📂 File: src/lessons/1-fundamentals/HelloRemotion.tsx

Linear vs Easing

interpolate() is linear by default, but you can add easing curves:

// Linear — constant speed (robotic)
const linear = interpolate(frame, [0, 2 * fps], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

// Eased — smooth acceleration and deceleration
const eased = interpolate(frame, [0, 2 * fps], [0, 1], {
  easing: Easing.inOut(Easing.quad),
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});easing

spring() — Physics-Based Motion

Springs simulate real-world physics. They output 0→1 with natural acceleration, overshoot, and settle:

const bouncy = spring({
  frame,
  fps,
  config: {
    damping: 10,     // Lower = more bounce
    stiffness: 100,  // Higher = faster
    mass: 1,          // Higher = heavier/slower
  },
});spring

Spring Presets

📂 File: src/lessons/1-fundamentals/TimingPlayground.tsx

<Series> — One After Another

Series plays children sequentially, like slides in a presentation:

<Series>
  <Series.Sequence durationInFrames={30} premountFor={30}>
    <PanelA />   {/* Shows frames 0–29 */}
  </Series.Sequence>
  <Series.Sequence durationInFrames={30}>
    <PanelB />   {/* Shows frames 30–59 */}
  </Series.Sequence>
</Series>Series

Local Frames — The Key Insight

premountFor — Preloading

premountFor={1 * fps} mounts the component 1 second before it becomes visible. This gives it time to load fonts, images, or data without a visible delay.

Trimming with Negative from

// Trim the first 0.5 seconds off PanelA's animation
<Sequence from={-0.5 * fps} durationInFrames={1.5 * fps}>
  <PanelA />
</Sequence>trimming

📂 File: src/lessons/1-fundamentals/SequencingDemo.tsx

Character-by-Character Reveal

The trick: use string.slice(0, charCount) where charCount grows with the frame:

const CHAR_FRAMES = 2;  // 2 frames per character = 15 chars/sec
const charCount = Math.floor(frame / CHAR_FRAMES);
const displayedText = fullText.slice(0, charCount);

// Render it
<span>{displayedText}</span>typewriter

Blinking Cursor

Use modulo + interpolate for a repeating blink cycle:

const BLINK_FRAMES = 15;
const cursorOpacity = interpolate(
  frame % BLINK_FRAMES,
  [0, 7, 8, 15],     // On for 7 frames, off for 7
  [1, 1, 0, 0],
);cursor

Google Fonts

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

const { fontFamily } = loadFont("normal", {
  weights: ["400", "700"],
  subsets: ["latin"],
});

// Use it: style={{ fontFamily }}fonts

📂 File: src/lessons/2-text/TypewriterEffect.tsx

The Wipe Technique

Place a colored bar behind the word, then animate its scaleX from 0 to 1 with transformOrigin: left:

const highlightProgress = spring({
  frame, fps,
  config: { damping: 15, stiffness: 80 },
  delay: Math.round(0.5 * fps),  // Start after 0.5s
  durationInFrames: 18,
});

// The highlight bar
<span style={{
  position: "absolute",
  bottom: 2,
  left: -8, right: -8,
  height: "40%",
  backgroundColor: highlightColor,
  transform: `scaleX(${highlightProgress})`,
  transformOrigin: "left",  // ← Wipes from left to right
}} />highlight wipe

Spring delay and durationInFrames

📂 File: src/lessons/2-text/WordHighlight.tsx

staticFile() — Loading from /public

import { staticFile } from "remotion";

// Always use staticFile() for public/ folder assets
const imageSrc = staticFile("photo.png");
const videoSrc = staticFile("clip.mp4");
const audioSrc = staticFile("music.mp3");staticFile

The Three Media Components

import { Img } from "remotion";
import { Video, Audio } from "@remotion/media";

// Images — waits for full load before rendering
<Img src={staticFile("photo.png")} />

// Video — with trimming and volume control
<Video
  src={staticFile("clip.mp4")}
  trimBefore={2 * fps}       // Skip first 2 seconds
  trimAfter={10 * fps}      // End at 10 seconds
  volume={0.5}               // Half volume
  playbackRate={1.5}         // 1.5x speed
/>

// Audio — with dynamic volume curve
<Audio
  src={staticFile("music.mp3")}
  volume={(f) => interpolate(f, [0, 30], [0, 1], {
    extrapolateRight: "clamp"
  })}
/>media components

📂 File: src/lessons/3-media/MediaShowcase.tsx

Staggered Springs

The key trick: offset each bar's spring by a few frames to create a cascading effect:

const STAGGER_DELAY = 5;  // 5 frames between each bar

{values.map((value, i) => {
  const barSpring = spring({
    frame: frame - i * STAGGER_DELAY,  // ← The magic
    fps,
    config: { damping: 18, stiffness: 80 },
  });

  const barHeight = (value / maxValue) * plotHeight * barSpring;
  // barSpring goes 0→1, so barHeight grows from 0 to full
})}stagger

Zod Schema = Interactive Controls

export const AnimatedBarChartSchema = z.object({
  chartTitle: z.string().default("Monthly Revenue"),
  barColor: zColor().default("#d4af37"),  // Color picker!
  values: z.tuple([...]).default([45, 72, 58, 90, 65, 82]),
});schema

📂 File: src/lessons/4-dataviz/AnimatedBarChart.tsx

The SVG Circle Trick

A pie chart is really a thick-stroked circle with dashes. Each dash = one segment:

const RADIUS = 120;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

// Each segment's length is proportional to its value
const segmentLength = (value / total) * CIRCUMFERENCE;

<circle
  r={RADIUS}
  fill="none"
  stroke={color}
  strokeWidth={60}
  strokeDasharray={`${animatedLength} ${CIRCUMFERENCE - animatedLength}`}
  strokeDashoffset={-offset}  {/* Position on the circle */}
/>SVG circle

How It Works

1. strokeDasharray creates a visible dash of length N, then a gap
2. strokeDashoffset rotates the dash to the right starting position
3. Animate the dash length with spring() to make it "draw"
4. transform: rotate(-90deg) starts drawing from 12 o'clock

📂 File: src/lessons/4-dataviz/PieChartReveal.tsx

TransitionSeries

Like <Series>, but with cross-scene transitions between sequences:

import { TransitionSeries, linearTiming, springTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <Scene1 />
  </TransitionSeries.Sequence>

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

  <TransitionSeries.Sequence durationInFrames={90}>
    <Scene2 />
  </TransitionSeries.Sequence>
</TransitionSeries>transitions

Available Transitions

Duration Math

📂 File: src/lessons/5-advanced/SceneTransitions.tsx

Composition Architecture

A real-world Remotion video combines multiple techniques as scenes within a TransitionSeries:

Key Patterns Used

• Typewriter + highlight in the intro (Lessons 4-5)
• Staggered spring bar chart in the middle (Lesson 7)
• TransitionSeries with fade + slide between scenes (Lesson 9)
• Spring-animated particles in the celebratory outro
• Zod schema for customizable title, subtitle, and colors

Rendering Your Video

# Render to MP4
npx remotion render KitchenSink out/graduation.mp4

# Render a single frame as PNG
npx remotion still KitchenSink --frame=60 out/thumbnail.png

# With custom props
npx remotion render KitchenSink out/custom.mp4 \
  --props='{"title":"My Video","accentColor":"#ef4444"}'CLI

📂 File: src/lessons/5-advanced/KitchenSink.tsx