80 lines
5.6 KiB
Markdown
80 lines
5.6 KiB
Markdown
# 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). |