padhle/remotion-testing/STORYBOARD.md

Padhle — Launch Trailer Storyboard

Premium startup commercial, not a software demo. Emotion over explanation. The goal: a CBSE student stops scrolling and thinks "That looks sick. I need to try it." Review gate: storyboard → scene stills → motion previews → final animation → sound → render. Edit: this storyboard supersedes the original 12-scene map; the emotional arc and the late-AI reveal are the new law. Audio is a second production pass — animate first.

Narrative law

• No AI mention before ~8–10s. Lead with the problem and the outcome (Understand faster. Study smarter.), then reveal it's powered by AI.
• The product is the hero. Never show a full dashboard for more than 1s — Apple-iPhone detail shots: cursors, dropdowns, typing, badges, micro-hovers.
• No real people, no stock footage. Wireframe silhouettes, vector students, floating notebooks, books, pencils, school bags. Product stays the hero.
• Strictly monochrome. Black / white / light gray. The only hint of color is a tiny indicator on the currently selected subject (scene 9). No green accent.
• Nothing static >1s. Every shot has camera motion (push / pull / whip / drift).
• Shot length 0.7–2s. Constant rhythm alternation: close-up, wide UI, typography, UI detail.

Emotion curve

😰 Stress  →  🤔 Curiosity  →  😲 "Whoa."  →  😊 Relief  →  🤯 Excitement  →  🚀 "I want this."
S1         S2               S3–S4           S5–S7          S8–S10          S11–S12

Scene plan (built: ~39s @ 60fps, all seams hard cuts)

#	Scene	File	Frames	Start (s)	Beats	Copy
1	The Panic	Panic.tsx	180	0.0	Heartbeat, paper storm (equations/diagrams/formulas/EXAM), camera shake, word slams	EXAMS. → Too many chapters. → Too little time.
2	The Pause	ThePause.tsx	132	3.0	White flash, silent lockup, tiny rotation, ambient particles	meet Padhle. CBSE · Grades 6–12
3	The Promise	ThePromise.tsx	180	5.2	Typography, three entries (pop / slide / rise), previous recedes to gray	Understand faster. Study smarter. Stress less.
4	The AI Reveal	AiReveal.tsx	168	8.2	Hard cut to black, spotlight pool, typewriter, terminal caret	Your AI tutor. Built for CBSE. Grounded in your textbook.
5	Choosing Context	ChoosingContext.tsx	240	11.0	Top bar drops, selector unfolds, cursor clicks ×3 (ripple + black pill + push)	Grade 10 → Science → Ch 2 · Photosynthesis
6	Asking	Asking.tsx	150	15.0	Question types with caret, send button grows + glows, click	Explain photosynthesis in simple words
7	The Answer	Answer.tsx	210	17.5	Answer builds line-by-line, keyword highlight, diagram slides in, source badge	Photosynthesis is how plants make… Source · Ch 2 · Photosynthesis
8	More Than a Chatbot	More.tsx	270	21.0	Five cards, each enters differently (slide / rotate / scale / drop / slide-r), down arrows	Learn Practice Quiz Revise Summarize
9	Subjects	Subjects.tsx	192	25.5	Carousel of the 6 real subjects, hero card + tiny dot indicator + progress strip	Mathematics Science History Language Arts English Geography
10	Relief	Relief.tsx	240	28.7	Wireframe student, floating notes/pencil/bag, promise words return	Understand faster. Study smarter. Stress less.
11	CTA	Cta.tsx	210	32.7	Logo grows, text, start button fades with tiny bounce, arrow slides	Your textbooks. Finally make sense. Start Learning →
12	End Card	EndCard.tsx	168	36.2	Minimal lockup, gentle fade	Padhle AI Tutor for CBSE Students Grades 6–12

Seams: 0.2s fades between scenes (whip/slide presentations can replace later).

Scene 1 — The Panic (detailed beats)

0.00–0.35s  Black screen, heartbeat: two quick white thumps (ring + screen pulse).
0.20–1.10s  Paper storm: notebook cards fly at camera (math, biology, chemistry,
            exam dates, homework). Deterministic camera shake, accelerating scale,
            motion blur as cards pass the lens. Storm clears before the first slam.
1.20s       `EXAMS.` slams (176px, Montserrat 900) → cut flash at 1.6s (0.4s up).
1.73s       `Too many chapters.` slams (0.5s up) → cut flash at 2.23s.
2.37s       `Too little time.` slams (0.5s up).
2.87–2.97s  Freeze — everything drains to black.
2.97–3.00s  White exit flash → fades into Scene 2's silence.

Each slam is cut cleanly (fades out as the cut-flash masks it) — no ghost text behind the next beat. Only fast, blurred, dimmed shrapnel streaks fly during the words, so the slams always read on near-black.

Typography: white on black, slammed in with back-overshoot (HIT easing), slight rotation drift, letter-spacing snap. Camera shake is deterministic (sum of sines) so renders are repeatable.

Review flow — DONE (all 12 scenes built and rendered)

1. ✅ Storyboard (this file)
2. ✅ Scene 1 — Panic → stills + out/s1-panic.mp4
3. ✅ Scene 2 — ThePause → stills + out/s2-pause.mp4
4. ✅ Scene 3 — ThePromise → stills + out/s3-promise.mp4 (recede-to-gray verified)
5. ✅ Scene 4 — AiReveal → stills + out/s4-ai.mp4 (typewriter + spotlight)
6. ✅ Scenes 5–12 — each in src/scenes/, preview at out/s-<Scene>.mp4
7. ✅ Master — out/padhle-trailer.mp4 (39.0s @ 60fps, 1080×1920)
8. ⏸ Next — review the trailer; audio/sound design is the second production pass (currently silent — every scene was animated with motion-first in mind).