# 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.