The 4-library matrix
Each library has a clear domain. There’s no “best library” — there’s the right library for each type of motion. The matrix below is the course’s main decision map.
Each library appears in a stagger — like a product video created with the course itself.
| Lib | Best for | Use cases | Avoid when |
|---|---|---|---|
| GSAP | Deterministic choreography | SaaS intros, launch videos | Reactive / physical UI |
| Framer Motion | Physical and reactive UI | Interfaces, spring | Video choreography |
| D3 | Animated data | Charts, dashboards, maps | 3D, pure motion |
| Three.js / R3F | 3D scenes | Product, brand, architecture | Simple 2D motion |
| Lottie | Light and fast | Social clips, micro-content | Complex choreography |
GSAP × Framer revisited
The most important distinction in the course, revisited: GSAP for video (deterministic timeline, fixed choreography, what happens at frame X is defined); Framer Motion for UI (spring, physics, reactive to application state). They aren’t competitors—they serve different domains.
⚡ Use GSAP when:
- →You’re producing a rendered video
- →The choreography is fixed and defined by you
- →Needs precise audio synchronization
- →SaaS intro, launch video, presentation
🌊 Use Framer when:
- →You’re animating a user interface
- →The animation responds to the state (hover, click)
- →You want spring and natural physics
- →Interactive React components
Vanilla Three.js × R3F revisited
Same logic as the previous distinction: Vanilla Three.js for simple 3D scenes without a React dependency. React Three Fiber (R3F) when the 3D scene needs to be composed with other React elements — state, UI, Framer animations in the same component.
Vanilla Three.js — when to use it
Isolated 3D scene, with no composition alongside React UI. Claude prompt: “Create a Three.js scene with [description] — no React.” Result: less boilerplate, more direct code.
React Three Fiber — when to use it
When the 3D component needs props, React state, or needs to be inside a larger composition. R3F's overhead pays off when it integrates with the rest of the app.
💡 Rule of thumb
If your 3D scene will live inside a React component and needs to communicate with it — R3F. If it’s an independent scene on a separate canvas — Vanilla. When in doubt, start with Vanilla and migrate to R3F if you need the integration.
The 4 universal rules
Regardless of the library, video type, or complexity level, these 4 rules always apply. They are the common denominator across all the course projects.
Install the skill
Without the Remotion skill, Claude produces generic motion. With the skill, it knows the specific conventions and APIs. It’s the difference between an average result and the right result on the first try.
Start simple
Skeleton first. Composition before timing. Timing before expressive movement. Movement before polish. The order matters—and each stage needs approval before moving on.
Iterate in the same session
The accumulated context in the session is the most valuable asset. Don’t start a new session mid-workflow—you’ll lose all the code and history Claude already has in memory.
Render with the right settings
ProRes 4444 XQ + PNG + last resort for alpha. H.264 for distribution. Know where the video will end up before rendering — the settings depend on where the video will be used.
It’s production now / practically free
Claude Code + Remotion isn't a prototype, isn't an experiment — it's real production tool, today. And each video produced with this stack costs a fraction of a cent in tokens. Experimentation costs practically nothing.
🚀 Why it’s production-ready now
- ✓Claude Code with the Remotion skill generates working code on the first try
- ✓Remotion renders at broadcast quality (4K, ProRes)
- ✓The skeleton → polish workflow has been validated in hundreds of videos
- ✓Quality scales with your approach—not your budget
💰 Practically Free
- ✓A 4-turn session costs pennies in tokens
- ✓Remotion is open source — no license fee
- ✓Node.js runs locally—no rendering costs
- ✓You can iterate 50 times for less than the price of a coffee
Next steps
You’ve finished the course. What should you do now to turn what you’ve learned into real fluency? Three concrete actions with immediate payoff.
Complete decision tree — never pick the wrong library again.
Practice with the 4 projects in Track 3
SaaS intro, data viz (D3), 3D scene (Three.js/R3F), and social clip (Lottie). Each applies the 4-turn workflow in a real-world situation. Fluency comes from practice, not reading.
Explore each library’s official documentation
GSAP docs, D3 gallery, Three.js journey, React Three Fiber docs. Claude already knows how to use them—but you need to know what to ask for. Knowing a library’s catalog means knowing what’s possible.
Build your first production video
Not to learn—to deliver. A real video, with a real destination (YouTube, reel, presentation). The first production video is what turns the course from learning into a skill.
🎓 Course complete
You’ve completed all four tracks. Here’s what you can do now:
Claude Code + Remotion is a production tool now. Quality scales with your approach. And each combo is practically free.