padhle - post migration

2026-09-15 04:08:55 -04:00
parent 534b51b41b
commit b2d8109019
509 changed files with 147378 additions and 303 deletions
@@ -0,0 +1,95 @@
+# 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.