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}
/>