remotion-animation

Remotion Animation

All motion knowledge in one skill: rules (atomic recipes), blueprints (multi-phase scene templates), transitions (scene-to-scene), and techniques (broader motion-design patterns).

For the composition contract (useCurrentFrame, Sequence, determinism) see remotion-core.

Default: compose atomic rules

Pick 2–4 rules from rules-index.md, express them with interpolate() and spring() from a single useCurrentFrame() call, done. This is faster and produces less code than starting from a blueprint.

Load a blueprint when

The scene matches an existing pre-designed multi-phase template (brand-reveal, data-story, social-proof, etc.) and reusing its phase pipeline saves real authoring time
You want runnable ground-truth code for a complex 4–5 phase choreography

Blueprints live in blueprints-index.md. Each entry points to blueprints/<id>.md (recipe). Load it only when you've decided you need scene-level orchestration.

Routing

Want to…	Read
Pick an atomic motion pattern by trigger / tag	`rules-index.md`
Read one rule's full TSX recipe	`rules/<name>.md`
Pick a multi-phase scene template	`blueprints-index.md`
Read one blueprint's full recipe	`blueprints/<id>.md`
Author a scene transition (interpolate-driven, between two Sequences)	`transitions/overview.md`, `transitions/catalog.md`
Look up a broader motion-design technique	`techniques.md`
`spring()` — physics config, damping, stiffness, mass	`adapters/spring.md`
`interpolate()` — extrapolation, input/output ranges, clamp	`adapters/interpolate.md`
Stagger — indexed delay patterns, spring stagger	`adapters/stagger.md`
Text animations — word-by-word, char-by-char, line reveals	`adapters/text-animation.md`
SVG path animations, stroke draw, shape morph via CSS	`adapters/svg.md`
Three.js / R3F — 3D scenes in React, AnimationMixer seek	`adapters/three.md`
Lottie — After Effects exports via @remotion/lottie	`adapters/lottie.md`

Picking an animation primitive

spring() is the default for entrance motions — provides natural deceleration, no easing curve math
interpolate() is the default for timed value mapping — opacity fade, position lerp, color transitions
Stagger — map an array index to a delayed spring() or delayed interpolate() frame offset
CSS keyframes — only for infinite decorative loops (spinners, shimmer) where seek doesn't matter
Three.js / R3F — for 3D scenes; use useCurrentFrame to drive AnimationMixer.setTime(frame / fps)
Lottie via @remotion/lottie — for After Effects exports; LottieAnimationData + Lottie component

Multiple primitives can coexist in one composition. Each derives from the same useCurrentFrame().

Critical Constraints

Prerequisite: remotion-core → Non-Negotiable Rules (frame-deterministic, no Math.random, no Date.now, no CSS transitions for timeline-synchronized motion, no useState/useEffect for visual properties, all values derived from useCurrentFrame()).

Animation-craft additions on top of core's contract:

Pre-calculated layout constants — never call getBoundingClientRect() at render time. DOM measurements are unreliable during parallel frame rendering; compute coordinates from composition width/height via useVideoConfig() instead
Spatial motion uses React inline styles — transform: translateX(${x}px) not left/top (avoid layout recalc)
spring() never re-evaluates at different times — the same frame always returns the same value for the same config
interpolate() with clamp extrapolation for entrance/exit to prevent values leaking beyond scene boundaries

Core Animation Patterns

Entrance with spring

const frame = useCurrentFrame();
const {fps} = useVideoConfig();

const scale = spring({frame, fps, config: {damping: 12, stiffness: 200}});
const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});

Timed interpolation

const x = interpolate(frame, [30, 60], [-200, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

Stagger pattern

const items = ['A', 'B', 'C', 'D'];
// Each item enters 8 frames after the previous
const getItemSpring = (index: number) =>
  spring({frame: frame - index * 8, fps, config: {damping: 200}});

Scene exit

const {durationInFrames} = useVideoConfig();
const exitStart = durationInFrames - 20;
const opacity = interpolate(frame, [exitStart, durationInFrames], [1, 0], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

About this skill