🎬 Scenario: startup, landing page, 45 seconds
The product is real: NoteAI, a notes app that uses AI to organize and summarize. The goal of the video is to persuade in 45s—from the problem the user feels to the download CTA. No scene can be wasted.
Why GSAP for this project?
GSAP is the only library in the track with a sequential timeline native. You arrange 6 scenes in order, define offsets, and GSAP ensures each piece enters at the right moment. For a storytelling video with 6+ moving elements, this is indispensable.
✓ GSAP is ideal when…
✗ GSAP isn’t the best choice when…
📝 Scenes 1–2: Headline Enters, Sub Fades In
The first two scenes establish the value proposition. The headline rises from below with a spring — a slight overshoot, like someone slapping a hand on the table. The subheading fades in cleanly 0.8s later, giving the eye room to read.
💡 Timing tip
Between the headline and subheading, use a delay of 0.6–0.8s. Less than that, the two elements seem to enter together and the hierarchy is lost. More than 1.2s, and the viewer thinks the video froze.
🃏 Scenes 3–4: Staggered Cards and Dashboard
Three feature cards enter in 0.15s stagger each — not simultaneously, not one at a time: the right rhythm that feels deliberate. Next, the dashboard mockup slides in from the right with ease-out, like a curtain being drawn.
Scene construction order
Build the Remotion composition
Create the composition at 1920×1080, 30fps, 45s (1350 frames). Set the duration in the calculateMetadata.
Add the static elements
Headline, subheading, cards, dashboard — no animation yet. Validate the layout and typography.
Connect GSAP to the Remotion frame
Use useCurrentFrame + useEffect to advance the GSAP timeline deterministically frame by frame.
Iterate on timing scene by scene
Adjust each element’s offset in the preview. Render the MP4 only after approving the preview.
🔢 Scene 5: Statistics Counter
The stat counter animates from zero to the actual value with interpolate(frame, [0, 60], [0, 10000]). It’s one of the most persuasive moments in the video—social proof in motion.
💡 Persuasion tip
Numbers that count up activate the brain differently than static numbers. Use easing power2.out — fast at the beginning, slow at the end — so the number "lands" smoothly on the correct value, as if it were settling into place.
💬 The Complete Prompt
This is the exact prompt you give Claude Code (with the Remotion skill active). Each instruction line maps to a scene in the video — Claude generates the complete composition in a single response.
Create a SaaS launch video for an AI note-taking application. Sequence: 1. Headline enters from below. 2. Subheading fades in. 3. Three feature cards stagger onto screen. 4. Dashboard mockup slides in. 5. Statistics counter animates upward. 6. CTA button scales in. Use spring easing and professional pacing.
💡 Why list as numbers?
The numbered list maps directly to the GSAP sequence structure. Claude receives explicit ordering instructions and translates them into .to() e .from() in the correct order, without guessing.
🚀 Final Assembly and Deliverable
With the scenes approved in preview, the final render generates the MP4, ready for distribution. One video, three destinations at once—Product Hunt, landing page, and pitch deck.
✓ What this video delivers
✗ What’s NOT in scope
What you learned in this project
- ▸ GSAP timeline for sequencing animations precisely
- ▸ Staggered reveals to turn groups into a narrative
- ▸ Motion hierarchy: what leads, what supports
- ▸ Animated counters as a persuasion tool
- ▸ Presentation-style storytelling in video
📋 Module 3.1 Summary
- ✓GSAP is the right choice for choreographing multiple elements in sequence
- ✓The headline + subheading establish the visual hierarchy in the opening scenes
- ✓Card stagger creates rhythm without feeling mechanical
- ✓Animated counter = social proof in motion = more persuasion
- ✓Deliverable: launch video ready for Product Hunt and a pitch deck
Next module:
🌍 Module 3.2 — World Population Shift (D3) →