95 lines
4.2 KiB
Markdown
95 lines
4.2 KiB
Markdown
# Padhle — Launch Trailer (Remotion Template)
|
||
|
||
Professional, blank template for the **Padhle launch trailer** — an AI-powered
|
||
tutoring platform for CBSE students, Grades 6–12.
|
||
|
||
Built with [Remotion](https://remotion.dev) (React + code-rendered video) in the
|
||
app's strictly **white & black** brand language. No gradients, no glassmorphism,
|
||
no accent colors — minimal, premium, Apple-keynote energy.
|
||
|
||
## Canvas
|
||
|
||
| Setting | Value |
|
||
| --------- | ------------- |
|
||
| Aspect | 9:16 vertical |
|
||
| Size | 1080 × 1920 |
|
||
| FPS | 60 |
|
||
| Duration | 39.0 s (12 scenes, per STORYBOARD.md) |
|
||
| Render | `npx remotion render Padhle -o out/padhle-trailer.mp4` |
|
||
| Preview | `npm run dev` (Remotion Studio) |
|
||
| Stills | `shots/` — contact sheets `shots/contact_ui1/2.png`, `shots/s1..s4_contact.png` |
|
||
|
||
## Project layout
|
||
|
||
```
|
||
src/
|
||
├── theme.ts ← ALL brand tokens: colors, fonts, eases, canvas
|
||
├── components/
|
||
│ ├── BookMark.tsx ← the book logo (placeholder mark, swap-in ready)
|
||
│ └── ui.tsx ← app chrome: pills, top bar, cursor, bubbles, diagrams, wireframe student…
|
||
├── scenes/ ← 12 scenes (Panic … EndCard)
|
||
├── MainVideo.tsx ← master composition
|
||
├── Root.tsx ← registers compositions
|
||
└── index.ts ← registerRoot entry
|
||
```
|
||
|
||
## Theme (single source of truth — `src/theme.ts`)
|
||
|
||
Exact design tokens from the app (`frontend/src/styles/global.css`):
|
||
|
||
| Token | Value |
|
||
| ----- | ----- |
|
||
| `COLORS.background` | `#fcf8fa` |
|
||
| `COLORS.surface` | `#ffffff` |
|
||
| `COLORS.onSurface` | `#111827` (ink) |
|
||
| `COLORS.onSurfaceVariant` | `#6b7280` (muted) |
|
||
| `COLORS.outline` / `outlineVariant` | `#d1d5db` / `#e5e5e5` |
|
||
| `COLORS.primary` / `onPrimary` | `#000000` / `#ffffff` |
|
||
| Heading font | Montserrat (700/800/900) |
|
||
| Body font | Inter (400–700) |
|
||
|
||
Motion presets (`SNAP`, `OVERSHOOT`, `HIT`, `SPRING`) are tuned for the brief's
|
||
"fast zooms, quick push-ins, micro bounce, overshoot" energy.
|
||
|
||
## Storyboard
|
||
|
||
The full narrative plan — emotional arc, per-scene beats, copy, timing — lives
|
||
in [`STORYBOARD.md`](STORYBOARD.md). Follow the review loop it defines:
|
||
storyboard → scene stills → motion previews → final animation → sound → render.
|
||
|
||
The trailer is **fully built** (all 12 scenes). Seams are hard cuts; every scene
|
||
manufactures its own entrance/flash, so cuts read as rhythm, not crossfade mud.
|
||
Audio is the remaining production pass (currently silent).
|
||
|
||
## Adding a scene
|
||
|
||
Each scene becomes a file in `src/scenes/`, registered in `Root.tsx`, and
|
||
slotted into `MainVideo.tsx`:
|
||
|
||
1. **The Panic** — black, heartbeat, paper storm, `EXAMS.` slams
|
||
2. **The Pause** — freeze → white → `meet` / `Padhle.`
|
||
3. **The Promise** — `Understand faster.` / `Study smarter.` / `Stress less.`
|
||
4. **The AI Reveal** — `Your AI tutor.` (first AI mention, ~8–10s)
|
||
5. **Choosing Context** — Grade 10 → Science → Chapter 4 clicks
|
||
6. **Asking** — typing animation, send
|
||
7. **The Answer** — line-by-line answer, source badge
|
||
8. **More Than a Chatbot** — Learn / Practice / Quiz / Revise / Summarize
|
||
9. **Subjects** — Mathematics / Science / History / Language Arts / English / Geography
|
||
10. **Relief** — silhouette + floating books, success words
|
||
11. **CTA** — `Your textbooks.` `Finally make sense.` `Start Learning →`
|
||
12. **End Card** — minimal logo lockup
|
||
|
||
**Recipe** — mirror `scenes/Panic.tsx`: export `<Name>Frames = N * FPS`,
|
||
use `useCurrentFrame()` + inline `interpolate()` for everything animated
|
||
(no CSS transitions — they don't render in Remotion), keep key text ≥80px from
|
||
the sides and ≥100px from top/bottom (9:16 safe area), register the scene once
|
||
in `Root.tsx` and once inside `TransitionSeries` in `MainVideo.tsx`.
|
||
|
||
## Notes
|
||
|
||
- The book mark in `BookMark.tsx` is a placeholder drawn to the brand's
|
||
black/white language — drop the official logo SVG over it when available.
|
||
- Scenes use inline `interpolate()` styles so every tween is editable in
|
||
Remotion Studio (click any element).
|
||
- Scene seams use `@remotion/transitions` (installed) — swap `fade()` for
|
||
whip/slide/zoom presentations as the edit takes shape. |