Each turn adds a layer. Turn 1 never needs to be perfect — it needs to work.
🦴 Skeleton first (turn 1, no perfection)
The goal for turn 1 is simple: make the component render. No precise timing, no spring, no perfect colors. You just want to see something on screen to confirm the structure makes sense.
Why ask for no animation first?
Separating structure from motion makes it possible to spot layout problems before any timing work. If the card is the wrong size, you'd rather find out in turn 1 than after spending half an hour adjusting the spring.
✗ Common Turn 1 mistake
- ✗Ask for layout + animation + colors + responsiveness all at once.
- ✗Describe the final animation before the structure is validated.
- ✗Demanding perfection in the first response and giving up if you don’t get it.
✓ Well-done Turn 1
- ✓Component renders without errors in the studio.
- ✓The element structure makes visual sense.
- ✓You can describe what you want to change in turn 2.
⏱️ Add timing (turn 2)
With the structure validated, turn 2 defines the duration and pacing. When each element enters, how long it stays visible, and when it exits. Still no spring—use interpolate() or a simple fade.
Define FPS and total duration
30fps is the safe default. Duration in frames: 3s = 90 frames, 5s = 150 frames. Make it explicit.
Use frame intervals, not seconds
Remotion works in frames. “Appears in 0.5s” becomes “frame 15 at 30fps.” Thinking in frames gives you fine-grained control.
interpolate() is your friend here
interpolate(frame, [0,20], [0,1]) is a simple, predictable linear mapping — perfect for validating timing before adding spring.
🎨 Refine the motion (turn 3, easing, and spring)
With the timing validated, turn 3 replaces the linear interpolate with spring physics. Now you have a foundation for asking for specific parameters — because you already know the structure and pacing are right.
Each turn incrementally raises quality — no rewrites, just refinement.
When should you add spring vs. keep interpolate?
Use spring() for elements that enter the scene or change state. Use interpolate() for values that need exact linear control — such as a progress bar or fade-out.
🧠 Context builds — same session, quality compounds
Claude doesn’t forget. Each turn in the same session builds context: it knows the component names, the parameters already defined, what you approved, and what you asked to change. Never restart a session in the middle of an animation.
Same session. The v4 card was built on v1 — no rewriting, no loss of context.
✗ Context break
- ✗Open a new window in the middle of the workflow—context reset.
- ✗Copy the code into a new chat to “make it faster.”
- ✗Repeating information Claude already knows wastes tokens.
✓ Session best practices
- ✓Keeps the same session from the beginning to the end of the component.
- ✓References elements by the names you gave them: "the HeroCard," "the animated title."
- ✓When resuming an old session, recap the status in 2 lines.
📋 Describe the Sequence in a Numbered List
For animations with more than one element or scene, write the sequence as numbered list of events. This eliminates ambiguity and lets Claude map each item to a frame range.
Intentional frame overlap
Notice that the logo starts at frame 15 while the background is still coming in (until frame 20). This 5-frame overlap creates fluidity—everything coming in at once would feel rigid, while doing it all sequentially would be slow.
Numbering defines visual priority
Item 1 on the list is the most important—background, container, hero. Later items are supporting elements.
Specify the frame range
Saying “after the logo” is ambiguous. Saying “frame 35–55” is deterministic and editable in the next turn.
Mention the type of motion for each item
"spring", "slide-up", "fade", "bounce" — Claude uses these terms to choose the right API.
🎯 Motion hierarchy — the main element leads, the rest supports
Every scene has a main element that carries the message — it animates with the greatest intensity (spring, scale, slide). The other elements are supporting: they enter smoothly, stay quiet, and leave first. Reverse this and the scene turns chaotic.
✗ No hierarchy
- ✗Background animates with a spring as strong as the title.
- ✗Support icons bounce, drawing more attention than the text.
- ✗Everything comes in at once — the viewer doesn't know where to look.
✓ With clear hierarchy
- ✓Background: simple fade, enters first, no overshoot.
- ✓Main title: spring with overshoot — it's the scene's hero.
- ✓Supporting elements: smooth slide with high damping; they come in later.
How to describe hierarchy to Claude
Just name the role: "The title is the main element — spring with overshoot. The icons are supporting elements — simple fade, coming in 10 frames later." Claude uses this to calibrate damping, delay, and animation type for each element.
📋 Module Summary
You completed Track 1 — Fundamentals. You’re ready to move on to the libraries.
🎉 Track 1 complete!
You’ve mastered the mental model: stack, skill, spring physics, and iterative dialogue. In Track 2, you’ll learn the animation libraries that unlock advanced effects — GSAP, Framer Motion, and Lottie inside Remotion.