remotion-video

Remotion Video Production

Best practices for building programmatic videos with Remotion — animations, transitions, charts, and rendering.

Install

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/

Core Capabilities

• Spring animation presets (bouncy, smooth, crisp, staggered)
• Interpolation patterns (camera zoom, parallax, scroll simulation)
• SVG draw-on animations (path tracing, stroke reveal)
• Scene transitions via TransitionSeries
• AbsoluteFill layering for compositing
• Chart animations (bar grow, line draw-on, pie reveal, count-up numbers)
• Audio integration and sync
• Rendering configuration

Spring Presets

Use spring() from Remotion for physics-based animations:

Preset	Config	Use Case
Bouncy	mass: 0.5, damping: 8, stiffness: 120	Playful reveals, logo bounces
Smooth	mass: 1, damping: 15, stiffness: 80	UI transitions, slide-ins
Crisp	mass: 0.8, damping: 20, stiffness: 200	Snappy interactions, toggles
Staggered	Any preset with frame offset per item	List reveals, grid animations

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

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

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

Interpolation Patterns

Camera Zoom

import { interpolate } from "remotion";

const zoom = interpolate(frame, [0, 30], [1, 1.5], {
  extrapolateRight: "clamp",
});

Parallax Layers

const bgX = interpolate(frame, [0, 100], [0, -50]);
const fgX = interpolate(frame, [0, 100], [0, -150]);

Scroll Simulation

const scrollY = interpolate(frame, [0, 90], [0, -800], {
  extrapolateRight: "clamp",
});

SVG Draw-On

Animate strokeDashoffset to reveal SVG paths:

const pathLength = 500;
const draw = interpolate(frame, [0, 60], [pathLength, 0], {
  extrapolateRight: "clamp",
});

<path
  d="..."
  strokeDasharray={pathLength}
  strokeDashoffset={draw}
/>

Chart Animation Patterns

Pattern	Technique
Bar grow	Animate height from 0 to target, stagger each bar by 3-5 frames
Line draw-on	SVG path with strokeDashoffset animation
Pie/donut reveal	Animate conic-gradient stop or SVG arc path
Count-up numbers	Interpolate from 0 to target, Math.round() for display

Scene Transitions

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

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

Performance Rules

1. No useEffect for animations. Use useCurrentFrame() + interpolate().
2. Memoize static components. React.memo for anything that does not depend on frame.
3. Preload assets. staticFile() for local, prefetch() for remote URLs.
4. Keep compositions under 30s for fast render iteration during development.
5. Test at target resolution (1920x1080 or 1080x1080) before final render.

Anti-Patterns

• No CSS transition or animation — use Remotion interpolate() and spring()
• No setTimeout or setInterval — frame-based timing only
• No absolute pixel positioning for responsive layouts — use AbsoluteFill + flex
• No inline style objects recreated every frame — extract to constants or useMemo
• No uncontrolled audio — always set explicit volume and startFrom

For complete code examples and composition templates, see REFERENCE.md.