Do I need to know React to make videos this way?

It helps but is not required to start. Remotion compositions are React components, and Claude Code writes them for you. You should be able to read JSX to review the output and describe timing changes. Understanding components and props makes the feedback loop faster, but you can learn as you render and correct.

Why not just use a generative text-to-video model?

Generative video is nondeterministic and hard to edit precisely. Remotion is code, so a title lands on the exact frame every time, charts read from real data, and you diff and re-render changes. For information-dense Vox-style graphics with charts and callouts, deterministic code beats a model guessing pixels.

How does indexing Remotion docs actually reduce errors?

The agent retrieves the exact API signature for your installed version instead of recalling a plausible one from training. That means correct prop names, valid easing and extrapolation options, and current spring config fields. The composition compiles on the first render rather than failing on a renamed or nonexistent function.

Can I reuse animation components across different videos?

Yes, and that is the point of indexing them. Store your lower-thirds, chart reveals, and captions as chunks, and the agent composes with your real components on future requests. Your motion language stays consistent, and you can publish reusable components publicly to earn USDC per retrieval.

How to make motion graphics with Claude Code and Remotion

Build motion graphics by having Claude Code write Remotion compositions, React components that render to video frame by frame. Describe the animation, and the agent generates interpolate and spring timelines, then renders with the Remotion CLI. Index the Remotion API and your reusable components so the agent retrieves exact signatures instead of guessing.

What Remotion is and why Claude Code fits it

Remotion renders video from React. Every composition is a component that receives the current frame number, and you compute positions, opacity, scale, and text from that number. Because a Remotion project is ordinary TypeScript and JSX, it is a natural target for Claude Code. The agent reads your files, writes a new composition, and you render it to MP4 with the CLI.

The Vox house style is a good test case. It leans on staggered text reveals, clean bar and line charts that draw in, map callouts, and tight easing that snaps rather than drifts. All of that is math over the frame counter, which is exactly what an agent can produce and you can verify by watching the render. Nothing here is generative video. It is deterministic code, so the same input frames always produce the same output.

The project loop

Scaffold with npm create video, then start the Remotion Studio preview. Ask Claude Code for a composition by name and behavior, for example a 90-frame title card where the headline wipes up and a rule draws left to right. Watch it in Studio, correct the timing in plain language, and render with npx remotion render. The whole loop stays inside your editor and terminal.

The two APIs that carry Vox-style motion

Most of this look comes from two functions. interpolate maps the frame number from an input range to an output range, so you turn frames 0 to 30 into opacity 0 to 1, or into a Y offset that slides text into place. spring produces physically eased values with configurable damping and stiffness, which gives the confident snap that separates broadcast motion from a linear fade.

Tell Claude Code the intent, not the numbers. "Stagger five stat cards in, 4 frames apart, with a slight overshoot" maps cleanly to a spring per card offset by index. "Draw the bar chart bars from zero to their value over 20 frames with ease-out" maps to interpolate with an easing option. The agent writes the timeline; you tune the feel.

Why the agent gets Remotion wrong without retrieval

Remotion has a wide API surface and it changes across versions. Prop names, the easing helpers, the <Sequence> and <Series> layout components, audio and offthread-video handling, and render flags all have exact spellings. A model working from memory guesses plausible but wrong names, passes options that were renamed, or calls easing functions that do not exist in your installed version. You then burn a render cycle discovering the error.

The fix is retrieval. Index the Remotion documentation for the version you actually run, so the agent pulls the real signature for interpolate, the valid extrapolateLeft and extrapolateRight values, and the current spring config fields. When the exact API text is in context, the generated composition compiles the first time and matches the version on your machine.

Index your own animation components as chunks

The bigger win is your own library. After a few projects you accumulate a proven lower-third, a chart-reveal wrapper, a map-pin drop, a kinetic-caption component. These are the reusable parts of the Vox look, and rebuilding them each session wastes tokens and reintroduces bugs.

With RDK you index those components as encrypted private chunks in your vault. When you ask for a new segment, the agent retrieves your existing <LowerThird> with its real props and composes with it instead of authoring a fresh, slightly different version. Your motion language stays consistent across videos because the agent is building from your actual code, not a reinterpretation of it.

Publish and earn on reuse

If a component is genuinely reusable, publish the chunk as public. Other builders' agents retrieve it, and you earn USDC per retrieval on the Base rail. A well-documented Remotion transition you wrote once can serve many agents instead of being rewritten a thousand times, which is the environmental argument for retrieval as much as the economic one.

How stacked retrieval changes the token math

Motion work is repetitive at the API level. You reach for the same interpolate and spring patterns and the same layout components across every project. That repetition is exactly what retrieval eliminates. Your private vault RAG answers 40 to 65 percent of the API and component questions, the public RDK network adds another 15 to 20 percent, and the LLM only handles the 5 to 10 percent that is genuinely new authoring.

The practical effect is that the agent stops paying to regenerate facts it should already know. Token spend drops 80 to 90 percent on repeat motion work, renders compile more often on the first try, and the parts of a video that are your creative decision get the model's full attention.

Frequently asked questions

Do I need to know React to make videos this way?: It helps but is not required to start. Remotion compositions are React components, and Claude Code writes them for you. You should be able to read JSX to review the output and describe timing changes. Understanding components and props makes the feedback loop faster, but you can learn as you render and correct.
Why not just use a generative text-to-video model?: Generative video is nondeterministic and hard to edit precisely. Remotion is code, so a title lands on the exact frame every time, charts read from real data, and you diff and re-render changes. For information-dense Vox-style graphics with charts and callouts, deterministic code beats a model guessing pixels.
How does indexing Remotion docs actually reduce errors?: The agent retrieves the exact API signature for your installed version instead of recalling a plausible one from training. That means correct prop names, valid easing and extrapolation options, and current spring config fields. The composition compiles on the first render rather than failing on a renamed or nonexistent function.
Can I reuse animation components across different videos?: Yes, and that is the point of indexing them. Store your lower-thirds, chart reveals, and captions as chunks, and the agent composes with your real components on future requests. Your motion language stays consistent, and you can publish reusable components publicly to earn USDC per retrieval.

Key takeaways

Remotion turns React components into video, so Claude Code can author motion graphics as code you review, diff, and re-render deterministically.
The two primitives that carry most Vox-style work are interpolate for driving values off the frame counter and spring for physical easing.
Agents hallucinate Remotion APIs because the surface is large and version-sensitive. Retrieval of the real signatures fixes wrong prop names and dead easing functions.
Indexing your own reusable animation components as chunks lets the agent reuse a proven lower-third or bar-chart transition instead of rebuilding it every session.
Stacked retrieval answers most API and component questions before the LLM runs, cutting token spend 80 to 90 percent on repeat motion work.