Trail map
Detailed content
🎯 Production tricks
Two professional tricks: motion path via image and rendering with the correct alpha channel.
Two common problems solved with a visual approach: trajectory control and rendering with transparency.
Draw the desired line on paper or in a simple app, save it as an image, and give it to Claude. It extracts the path and generates the animation.
Language is ambiguous when describing shapes. “A smooth curve to the right” produces unpredictable results; an image removes the ambiguity.
Title cards, lower thirds, and overlays to be composited over existing footage — whenever the Remotion background is not the final background.
Three fields in Remotion's render panel. Without these settings, the alpha channel gets flattened and you lose transparency.
Alpha gets flattened, the image confuses the path, the wrong codec—the three most common mistakes when producing with transparency.
🔁 Iteration That Builds Quality
The best Remotion outputs don’t come from the first prompt—they’re skeletons refined 3-4 times in the same conversation.
Ask for just the structure — elements in the right place, without refined timing. Validate the composition before any refinement.
With the structure approved, add durations, easing, and the entrance/exit sequence. Still in the same session—Claude remembers the context.
With the timing approved, focus on subtleties: overshoot, spring, stagger between elements. Expressive movement starts here.
Colors, typography, gradient, shadow. Polish is what turns “it works” into “it impresses.” It only makes sense once the motion is right.
A single long prompt rarely beats 4 incremental prompts. Always start with the minimum viable version and build on what was approved.
Claude remembers all the code in the session. Each turn builds on what was approved—it doesn’t start over. Quality accumulates instead of being replaced.
🗺️ Recap & final map
Everything recapped: the library matrix, the 4 universal rules, and why this is production now.
GSAP = fixed choreography; D3 = animated data; Three.js = 3D; Lottie = lightweight/fast. Each has a clear domain.
GSAP for video and deterministic choreography; Framer Motion for responsive UI and physics. They aren’t competitors—they serve different domains.
Vanilla Three.js for simple 3D scenes; React Three Fiber (R3F) when the scene needs to be composed with other React components.
Install the skill, start simple, iterate in the same session, and render with the right settings. This applies to any library and any project.
Claude Code + Remotion isn't a prototype — it's a real production tool. And each combo costs pennies. Quality scales with your approach.
Practice with the 4 projects in Track 3, explore each library’s official documentation, and build your first production video.