Motion design with Claude and Remotion

What it isCopy Anchor Link

Remotion is a React framework where each video frame is a component rendered at a point in time. Animation is a function of the current frame number. Because it is code, an agent can write a scene, render a still, look at it, fix the layout and re-render. Agent skills for Remotion teach the agent the framework's conventions such as how to time sequences, so you get fewer broken first drafts.

A workable loopCopy Anchor Link

Write a short brief with the story beats, the style and the length. Ask the agent to build one scene at a time. Render stills at key frames and check them, since the agent can view images. Keep assets and timing constants in one file so changes are cheap. The skill is directing: the agent handles syntax, you handle taste and pacing.

A worked example: a scene as codeCopy Anchor Link

A scene is a function of the frame number. Frames 0 to 30: a title fades in (opacity = frame / 30). Frames 30 to 90: a bar chart grows (height = value × progress). Because it is plain code, the agent can change a number, re-render and compare. Timing constants live in one file so you can retime the whole video in a minute.

Step by step: a 10-second videoCopy Anchor Link

Start with arithmetic, since everything in the code runs on frame numbers.

1. Choose a frame rate. At 30 frames per second, 10 seconds is 300 frames.
2. Split the story into three scenes: 90, 120 and 90 frames. That is 3, 4 and 3 seconds, and the total is 300.
3. Put these numbers in one constants file, so retiming means editing one place.
4. Ask the agent to build scene one only. Remotion's Sequence component places a scene at a start frame, and its interpolate helper turns a frame number into a value.
5. Render one frame as an image, near the middle of the scene. Check the layout, then ask for fixes.
6. Repeat for scenes two and three, then render the whole video.

How the timing math worksCopy Anchor Link

A progress value runs from 0 to 1 across a range of frames. A bar chart grows between frame 30 and frame 90, a span of 60 frames. At frame 60, progress is (60 - 30) / 60 = 0.5. If the final bar height is 80 pixels, the bar is 40 pixels tall at that moment. A title that fades in over frames 0 to 30 has opacity 0.5 at frame 15. Easing changes the curve, but the idea stays the same: the picture is a pure function of the frame number.

What goes wrong: a preview that flickersCopy Anchor Link

Preview looks fine, but the final render has parts that jump or flicker. A common cause is timing that does not come from the frame number, such as CSS transitions, a timer, or random values. Rendering draws frames in separate browser tabs, in parallel, and does not wait for real time to pass.

To confirm, render the same frame twice, then compare the two images. A correct scene produces identical stills. If they differ, find the code that reads the clock or a random number, and replace it with a value computed from the frame.

When code video is the wrong toolCopy Anchor Link

Cutting footage you filmed, or tuning a short logo animation by dragging keyframes, is faster in an editor with a timeline. Code video suits scenes made of text, charts and shapes, and videos you want to regenerate from changing data.

Giving feedback the agent can act onCopy Anchor Link

Vague notes get vague fixes. "Make it punchier" could mean ten things. Name the frame, the element and the change. Compare:

1. Weak: "The title feels slow."
2. Strong: "In scene one the title fades in over 30 frames. Make it 15, and hold it on screen for 45 frames before the chart starts."

The strong note maps to two constants, so the agent edits two numbers and you compare a new still. If a change makes things worse, undo it by restoring the old numbers. This is why keeping timing in one file matters.

Common mistakeCopy Anchor Link

Asking for a whole video in one prompt. Build and check scene by scene.