Same prompt. The skill injects spring physics; without it, Claude uses linear by default.
😩 Without a skill: generic and shaky
When you ask Claude for an animation without any Remotion context, it come up with. The code compiles, but the result looks like a first attempt at a CSS animation—linear timing, elements in the wrong positions, with no sense of frame rate or sequence.
✗ Output without the skill
- ✗Uses
setTimeoutor pure CSS—there is nouseCurrentFrame. - ✗Linear timing: everything enters at the same time and at the same speed.
- ✗Elements positioned with
absoluteand magic numbers that are never quite right. - ✗No understanding of FPS or duration in frames—sometimes it doesn’t even render.
✓ What it should be
- ✓Each prop changes based on
frame— deterministic and predictable. - ✓Spring physics with
spring()from the Remotion API. - ✓Sequencing via
delay+fromper element.
✅ With the skill: clean, correct spring, precise sequences
With the skill active, Claude already knows that every animation is a function of the frame, which spring() is the right helper for natural transitions, and duration is defined in frames (not in CSS seconds). The difference isn't in your prompt — it's in the context the skill injects.
Why spring rather than easing?
Easing describes how go from A to B in a fixed amount of time. Spring describes physics: mass, stiffness, and damping—the result is organic and interruptible. Remotion exposes spring() which calculates this frame by frame.
✓ Anatomy of a good animation
- ✓Smooth spring —
damping: 14for a subtle, natural overshoot. - ✓Delay per element — each piece comes in at the right moment, not all at once.
- ✓Composite transitions — opacity + scale + translateY together, not separately.
📐 spring() Parameters
🌊 Spring physics: overshoot and natural damping
The secret to organic movement is the overshoot — the element goes a little past its destination before settling. It’s not a mistake: it’s what makes motion feel physical. The damping controls how much bounce there is.
The spring curve slightly overshoots the target value and settles—that’s what creates a natural feel.
Practical damping rule
damping 8–12 → lively bounce (good for icons, badges). damping 14–18 → smooth settle (good for cards and text). damping 25+ → no overshoot (good for critical layouts).
⏱️ Sequencing: order over time, not all at once
When everything animates at once, the eye doesn't know where to look. The stagger is the technique of delaying each element a little — attention flows naturally from top to bottom, left to right, from the main element to the secondary one.
Each bar appears with a 0.3 s delay — the reading flow moves from top to bottom.
Identify the visual hierarchy
What goes in first should be the most important—title, hero, CTA.
Apply delay by index
Each element receives frame - i * offset — simple and scalable.
Store the offset as a constant
8 frames (at 30fps ≈ 266ms) is a good starting point. Adjust in the conversation.
🥇 Golden rule: start simple
Text that appears with a typing effect or fade is clean and effective. Twenty elements animating together is a mess. The golden rule: fewer animated elements = more impact per element. The skill helps you resist the temptation to animate everything.
✗ Common pitfalls
- ✗Animating every word individually creates visual anxiety.
- ✗Use rotation + scale + translation all at once without a purpose.
- ✗Background particle effects that compete with the content.
- ✗Animations that never stop — they distract from the main message.
✓ Principles that work
- ✓One main element animates; the rest fade in gently.
- ✓Text with a typewriter effect or fade-up is always legible and elegant.
- ✓Use motion to guide the eye, not to impress.
Musician test
An experienced musician knows that silence is just as important as the notes. An experienced motion designer knows that what no what animates is just as important as what animates. Ask: "Does this animation serve the message, or is it decoration?"
🔁 Iterate from There
The skill isn’t a magic button—it’s a iteration accelerator. You start with something that works (not perfectly), validate it in the preview, ask for adjustments in the same conversation, and reach a professional result in a few turns.
Generate the skeleton with the default spring
First result: it works, but it isn’t perfect. That’s intentional — a foundation for iteration.
Adjust damping and stiffness through conversation
"It's too bouncy; reduce the bounce" — Claude adjusts the parameters without rewriting everything.
Refine the sequencing
"The text comes in too early; delay it by 12 frames" — the conversation builds context, and edits are made surgically.
Render and review in the player
Remotion Studio plays in real time—you see the result as you talk, not after rendering.