Trail map
Detailed content
📒 SaaS Walkthrough (GSAP)
A startup launches an AI note-taking app: a 45-second video of the landing page showing Problem → Solution → Features → CTA. GSAP coordinates the timeline choreography like an art director.
45s SaaS launch video: headline → subhead → staggered features → dashboard → stats → CTA. GSAP shines in choreographies with many elements.
Understanding the fit between the library and the project saves rework; GSAP is motion-driven storytelling.
GSAP timeline · narrative sequence · motion hierarchy.
The headline rises from below with a spring; the subheading fades in after a respectful delay. They anchor the visual hierarchy.
The first scenes set the emotional tone for the entire video.
fromBelow · spring easing · delay offset.
Three feature cards enter in a stagger (~0.15s between each); the dashboard mockup slides in from the right. The staggered rhythm is GSAP's visual signature.
Stagger turns identical elements into a sequence with personality.
gsap.stagger · slideInRight · sequential reveal.
Numbers animate from zero to the actual value with power2 easing. “10,000 users” counting up builds credibility visually.
Animated counters are proven to be more persuasive than static numbers.
counter animation · interpolateValue · power2.out.
CTA button scales from 0.8 to 1 with a slight overshoot, drawing the eye after the stats climax.
The CTA is the only action the video wants the viewer to take—the motion should underscore that.
scale pop · back.out · motion punctuation.
Final composition: 6 scenes in sequence, 1920×1080 render, MP4 for Product Hunt, pitch deck, and landing page.
Knowing the final destination determines resolution, duration, and codec from the first prompt.
render target · final composition · distribution.
🌍 World Population Shift (D3)
Animated bar race showing the 10 most populous countries from 1990 to 2030. D3 turns a spreadsheet into a documentary—each bar reorder tells a story.
A documentary about population growth from 1990–2030. Without D3, you have numbers; with D3, you have a story that unfolds over time.
D3 is the only library in the list with native scales, axes, and data transitions.
data storytelling · linear scale · dynamic axis.
Country × year × population dataset. A linear scale maps values to pixels; a band scale distributes bars with uniform gaps.
Wrong scale = bars that overflow or disappear. It’s the foundation.
scaleLinear · scaleBand · domain/range.
On each Remotion frame, the ranking is recalculated. Bars smoothly interpolate their Y position and width; leadership changes are marked with a brief pause.
The ranking transition is the dramatic moment in a bar race—it’s where the viewer reacts.
dynamic sorting · position interpolation · dramatic pause.
Country and value labels follow the bars. The year counter in the corner displays 1990 → 2030 in real time, anchored to the Remotion frame.
Labels that “stick” to the bars are what make the bar race readable at high speed.
text follow · year counter · readability motion.
Persistent country color map (same color regardless of ranking). Dark background, bars with a gradient from the country's color to a lighter shade.
Color consistency is what lets viewers follow a country throughout the video.
colorMap · persistent identity · documentary aesthetic.
The same bar race component, with only the dataset changed, becomes an infographic about revenue, a team ranking, or presidential approval.
A well-parameterized template pays for itself across dozens of videos.
generic component · dataset props · content multiplication.
🏍️ Motorcycle Commercial (Three.js)
Cinematic showcase: the camera orbits as lights reflect off the metallic bodywork. Nothing else on the list creates convincing 3D scenes — Three.js is the obvious choice.
Premium automotive commercial: orbiting camera, studio lights, metallic reflections, dark background. No other library here renders 3D.
Choosing the right tool for the right job is the most valuable meta-skill in any project.
scene · camera · renderer · WebGL.
Key light, fill light, and rim light simulate a photo studio. PointLight and SpotLight with calibrated intensity reveal the object’s shape.
Lighting distinguishes an amateur scene from a premium product more than any mesh.
three-point lighting · PointLight · rim light.
MeshStandardMaterial with metalness=0.9 and roughness=0.1. A cubic EnvMap simulates environmental reflection — the "car dealership shine".
The right material turns a cube into a desirable product.
metalness · roughness · envMap.
The camera moves in an arc around the object via Math.sin/cos of the current frame. Slow, deliberate movement, like a high-end cinema camera.
Camera movement is where viewers feel the brand's character.
camera orbit · sin/cos path · dramatic pacing.
Floor with a subtle reflective plane, #0a0a0a background, exponential fog that darkens the edges. Photographic product composition principles applied to 3D.
Composition guides the eye even without movement.
FogExp2 · reflective plane · framing.
Render in 4K with antialiasing; MP4 output for Instagram, YouTube, and out-of-home media. The result looks like professional automotive marketing.
Knowing how far the stack can go defines what you can sell.
antialias · 4K render · premium product.
🏦 Banking Onboarding (Lottie)
Fintech needs onboarding animations: create account → deposit → transfer → confirmation. Lottie delivers a small scope, fast, and extremely reliably — the right choice.
Four mobile onboarding micro-animations. Lottie = lightweight JSON, infinitely scalable, runs in React Native without recompilation.
For micro-interaction scope, Lottie is faster and more reliable than any programmatic animation library.
JSON animation · vector · cross-platform.
The app logo scales up from the center, the background transitions from dark to white, and the UI elements appear in a smooth cascade.
The splash screen is the product’s first emotional impression.
logo reveal · UI cascade · brand moment.
A coin icon falls and lands in a wallet; a transfer arrow travels from A to B. Both use Lottie path animation.
Path animations are Lottie's strong suit — SVG fluidity at runtime.
path animation · follow path · transaction UX.
Green circle draws via stroke-dashoffset; checkmark reveals inside; slight final bounce. The sequence’s emotional payoff.
The success confirmation is where the user decides whether to trust the app.
stroke-dashoffset · reveal · success state UX.
The hook useLottie with currentFrame Remotion ensures the JSON animation advances on exactly the right frame of the render.
Without frame synchronization, the render gets out of sync between the preview and the final MP4.
frame sync · useLottie · deterministic render.
Four exported JSONs + reusable React component. It can be integrated into React Native or a web app without code changes.
Lottie is the only animation format that goes from prototype to production app without friction.
JSON export · React Native · production-ready.