⚙️ Fundamentals & Setup

Traditional motion graphics = complex panels and endless keyframes; the learning curve kills the idea before you can animate it.

Understanding the pain point makes the benefit of generating animation with AI-powered code clear.

learning curve · manual keyframes · barrier to entry.

Remotion is React: HTML/CSS/SVG/Canvas become frames. That’s why it works well with web animation libraries.

It’s what lets you plug in GSAP, D3, Three.js, and Lottie later.

React · web stack · declarative composition.

npx skills add remotion-dev/skills and then claude. That’s it.

Setup takes seconds — the technical barrier practically disappears.

npx skills add · skills folder · Claude starts the session.

9 component patterns, 7 transition types, animation primitives, audio integration, and render best practices.

It’s the knowledge Claude gains about Remotion.

component patterns · transitions · rendering best practices.

The rules load automatically in Claude's context — you don't paste documentation into every prompt.

Claude already “knows Remotion” from the session’s first prompt.

context loaded · skills as knowledge · zero boilerplate.

Remotion renders frame by frame, deterministically — ideal for a fixed timeline, not for interaction.

Explains why GSAP is such a good fit and Framer Motion less so (T2).

deterministic · fixed timeline · frame by frame.

Generic layout, weird timing, elements in the wrong place — looks like someone’s first attempt at CSS animation.

It’s the baseline you measure the skill’s gain against.

rough timing · wrong position · no physics.

Clean transitions, proper spring physics, and appropriate sequencing — the difference is immediate.

Shows that the bottleneck isn't the model, but the context it receives.

correct spring · sequencing · clean transitions.

Entrances with a slight overshoot, like a spring—making the animation feel alive instead of robotic.

It’s the detail that separates “amateur” from “production.”

overshoot · damping · naturalness.

Elements appear in the right order and at the right time, not all at once.

Pacing is what gives the piece a professional feel.

order · offsets · breathing room between elements.

Typing text, text appearing—clean. Too many elements and fancy transitions at once = a mess.

Starting simple is what maintains quality.

small scope · less is more · clarity.

Always start simple and refine over turns in the same conversation.

It’s the method explored in depth in module 1.3 and T4.

skeleton → refinement · iteration · same session.

The first prompt creates the basic structure, without aiming for perfection.

Trying to get the final result in a single prompt almost always fails.

minimal structure · no one-shot · foundation for refinement.

In the second turn, you adjust timing, offsets, and pacing.

Timing is where animation gains purpose.

duration · delay · stagger.

Adjust easing, spring, and curves until the motion feels natural.

Small curve adjustments completely change the feel.

easing · spring · motion polish.

Claude remembers what’s already been done; each turn builds on the previous one.

Quality builds—don’t start from scratch with every request.

context memory · continuity · combined quality.

List the scenes with numbers (“1. headline enters; 2. cards stagger in…”) instead of describing them vaguely.

Explicit sequences produce more predictable and accurate results.

numbered list · scene by scene · clarity of intent.

Not everything animates the same way: the main element leads, and the rest supports it.

Hierarchy guides the eye and prevents visual clutter.

focus · support · motion contrast.