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 (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. 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:

The Panic — black, heartbeat, paper storm, EXAMS. slams
The Pause — freeze → white → meet / Padhle.
The Promise — Understand faster. / Study smarter. / Stress less.
The AI Reveal — Your AI tutor. (first AI mention, ~8–10s)
Choosing Context — Grade 10 → Science → Chapter 4 clicks
Asking — typing animation, send
The Answer — line-by-line answer, source badge
More Than a Chatbot — Learn / Practice / Quiz / Revise / Summarize
Subjects — Mathematics / Science / History / Language Arts / English / Geography
Relief — silhouette + floating books, success words
CTA — Your textbooks. Finally make sense. Start Learning →
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.

4.2 KiB Raw Permalink Blame History Unescape Escape