padhle - post migration

remotion-testing/STORYBOARD.md

@@ -0,0 +1,80 @@
+# 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).