Learning path map
Detailed content
🕐 The Time Engine
Everything starts here: the current frame. In Remotion, the video is a pure function of the frame number — there is no "play," only "which image to draw at frame N."
Hook that returns the number of the current frame being rendered (0, 1, 2, …). It’s the only time input you need.
Every animation in Remotion derives from this number. Without it, nothing moves.
Frame-reactive · re-renders every frame · the basis for interpolate and spring.
fps = frames per second; durationInFrames = video length in frames. 90 frames at 30fps = 3 seconds.
Defines the time window you have to animate and how seconds translate into frames.
seconds × fps = frames · defined in Composition · constant during rendering.
Hook that returns the width, height, fps, and durationInFrames of the current composition.
Makes the component responsive to the video size (16:9, 9:16) without hardcoding.
center with width/2 · convert seconds with fps · reuse across formats.
The image for each frame depends ONLY on the frame number—not on clicks, timers, or accumulated state.
It’s what makes rendering parallelizable and predictable. No setInterval or requestAnimationFrame.
pure frame→pixels function · no useState for animation · no real-time effects.
Rendering frame 42 today or tomorrow produces exactly the same image.
Lets Remotion render frames in parallel on multiple machines without inconsistencies.
avoid Math.random without a seed · avoid Date.now() · use Remotion’s random().
The unit of work is the frame. "Appears in 0.5s" becomes "appears in 15 frames" (at 30fps).
The entire API (interpolate, spring, Sequence) uses frames. Thinking in frames eliminates confusing conversions.
frame = unit · seconds only at the edge (user input) · fps converts.
📈 interpolate() — frame becomes a value
Remotion's most-used function. It maps the frame (or any number) from an input range to an output range: opacity, position, scale, rotation.
interpolate(frame, [in0,in1], [out0,out1], options) — a frame goes in, a value comes out.
It’s the universal tool for linear animation. 90% of templates start with it.
1st arg = value to map · arrays must be the same size · returns a number.
inputRange is the domain (e.g., frames 0→30); outputRange is the codomain (e.g., opacity 0→1).
Controlling these two pairs means controlling when and how much something changes.
increasing input · output in any order · free units (px, %, deg).
extrapolateLeft/Right: 'clamp' keeps the value within bounds; 'extend' lets it go beyond them.
Without clamp, opacity goes above 1 and the element "blows out." It's the most common beginner bug.
clamp = safe default · extend for continuous motion · identity rarely.
Arrays with 3+ points: [0,15,75,90] → [0,1,1,0] fades in, holds, fades out.
A single call describes a complete entrance and exit cycle.
always increasing input · plateaus = repeated values · saves code.
The option easing replace linear interpolation with curves (Easing.out, cubic, bezier).
Linear movement looks robotic. Easing adds naturalness without changing the function.
ease-out for entrances · ease-in for exits · bezier for fine control.
Three recipes: opacity (fade), translateX/Y (slide), and scale (zoom) — all with interpolate.
Together, these three cover most element entrances in video.
apply to style/transform · combine 2–3 at the same time · foundation of all of T2.
🌊 spring & composition
Physics-based motion (spring) and how to organize multiple scenes in time and space (Sequence, AbsoluteFill, Series). This is what separates “okay animation” from “animation that feels alive.”
Function that simulates a spring: goes from 0 to 1 with acceleration and a slight natural overshoot.
Adds that organic "pop" to title and logo entrances that linear interpolate can't achieve.
receives frame and fps · returns 0→1 · multiply by scale/position.
Spring parameters: damping (friction), stiffness (rigidity), mass (weight).
Adjust from “bouncy elastic” to “smooth and firm” without changing the rest of the code.
high damping = no overshoot · high stiffness = faster · high mass = slower.
interpolate = exact control of time/value; spring = automatic physical naturalness.
Choosing the wrong one makes the animation either robotic or unpredictable in duration.
spring for entrances/pop · interpolate for fades/precise timing · you can combine them.
Component that shifts the timing of its children: from delays the start, durationInFrames limits.
Inside a Sequence, the frame “resets” to zero — making independent scenes easier.
from = offset · local frame · basis for stagger and T3.
Div that fills 100% of the composition with position absolute — stacks background, content, and overlay.
It’s how you overlay a title on an animated background without calculating the layout.
order = layers (z) · center with flex · foundation of every visual composition.
Series.Sequence automatically places scenes one after another, without calculating offsets by hand.
Assembles a multi-scene video (intro → content → outro) in a readable way.
duration per scene · order = time · ideal for Track 4 projects.