Remotion 4. React-based video renderer. Every frame is a deterministic function of time: no keyframe timeline, no scrubbing lag.

Claude Sonnet. Generates the composition code from a plain-English description. Knows the rules: no CSS transitions, no @keyframes.

Google Fonts. Any typeface loaded at module level. Type a font name, and Remotion fetches it and blocks rendering until it's ready.

Zod. Schema on every composition. Duration, font, color, fps, all editable in the Studio sidebar without touching code.

1. Describe the motion. Tell Claude what you want: the scene, timing, colors, font, exit behavior. Be specific about what enters and what leaves. Claude needs the full picture, since it can't scrub a timeline.

2. Claude writes the composition. A spring() or interpolate() call per property. Individual CSS transform properties. A Zod schema with every control you named. TypeScript, so no silent failures.

3. Preview in Remotion Studio. Hot-reload previews at full resolution. Scrub frame by frame. Tweak props live in the sidebar (change font, duration, fps) and the timeline resizes automatically via calculateMetadata.

4. Export. One command. MP4 for social, WebM VP8 or ProRes 4444 for transparency, PNG sequence for lossless. Props can be overridden with the --props flag for batch renders.

useCurrentFrame() is the only source of time. Every visual property is derived from this integer. No side effects, no timers.

interpolate() maps a frame range to a value range with easing. Used for translate, opacity, scale, color, anything linear or curved.

spring() is physics-based motion. Tune damping, stiffness and mass. It replaces bounce easing entirely.

No CSS animations. Transitions and @keyframes break the renderer. Every animated value lives in the inline style, derived from the current frame.

Individual transforms. Use translate, scale and rotate as separate style props, not a transform string.

delayRender() blocks frames until assets are ready (fonts, data, images). Every frame is guaranteed to render with the right content.

// Every frame is a pure function of time
const frame = useCurrentFrame();

const y = spring({ frame, fps, config: { damping: 9, stiffness: 120 }, from: -300, to: 0 });
const opacity = interpolate(frame, [0, 12], [0, 1], { extrapolateRight: "clamp" });

// Individual properties, never a transform string
<div style={{ translate: `0px ${y}px`, opacity }}>

Caption overlays. Transcript auto-split into word chunks, animated with per-word stagger. Exports transparent via VP8 WebM or ProRes 4444.

Kinetic text reels. Staggered words across scenes, each with its own entry animation (slide, pop, scale-in), solid colour backgrounds, flash transitions.

Logo animations. SVG stroke draw-on crawl, path fill reveal, morphing shapes. All driven by frame math on SVG strokeDashoffset.

UI mockup animations. Recreate an interface in React, then drop files into it, animate modals, type text in real time, all at exact pixel fidelity.

Transition plates. Iris wipes, circle reveals, morphs. Transparent background, ready to drop into any NLE as an overlay track.

MP4, for social and delivery. npx remotion render MyComp out.mp4. H.264, no alpha. The default for Instagram, YouTube and TikTok.

WebM VP8, transparent. npx remotion render MyComp out.webm --codec=vp8. Supports an alpha channel. Works in Premiere, DaVinci and CapCut.

ProRes 4444, transparent. npx remotion render MyComp out.mov --codec=prores --prores-profile=4444. Lossless alpha. Best quality for Final Cut and Premiere on Mac.

Override props at render. npx remotion render MyComp out.mp4 --props='{"font":"Bebas Neue","durationSec":15}'. Batch-render variants without changing source code.

Built with Remotion 4, React, TypeScript and Claude Sonnet.