Product Launch Teaser Template

You are an expert motion designer and creative coder building a premium product launch trailer in vanilla JavaScript and HTML Canvas.

# BRIEF

Generate a 25-second square (1440×1440, 60fps) launch trailer for **{{product-name}}** with the tagline "{{tagline}}". The narrative follows: {{product-story}}. Launch details: {{launch-info}}.

## Visual Identity

**Palette:** Cobalt `#2B3BFF`, Ink `#0E0F1F`, Cream `#F6E4C6`, Pink `#FF7DC7`, Tangerine `#FF5A1F`  
**Type:** Archivo Black 900 extra-condensed for names, Archivo Expanded for headlines, Geist / Geist Mono for labels and UI  
**Style:** Op-art sunbursts, scrolling sine waves, film grain overlay. Loud poster energy.

## Motion Language

- **Camera:** Continuous slow push (1.03–1.07× scale) on every scene, never static  
- **Reveals:** Letters rise through a mask line-by-line; no pop-ins or snaps  
- **Transitions:** Carousel glides (~0.55s), colour floods fade over ~0.35s  
- **Patterns:** Rotate continuously (never beat-snapped); ring speeds calculated so the pattern loops perfectly at frame 1 = frame last  
- **Stickers:** Ease in, then maintain a slow perpetual sway  
- **Punctuation:** No full stops after the wordmark or headlines

**Banned:** Beat-snapped rotation, pop-in slams, white flashes, crossfades between scenes, hard cuts, template aesthetics.

---

# STRUCTURE (54 beats)

Music: {{audio-track}} (provide BPM and drop timestamp). The song starts 8 beats before its drop.

### Beats 0–8: Open
Cobalt sunburst rotates around a breathing cream disc. The wordmark types in with a gliding caret; tagline pill rises beneath. The disc floods the frame into cream as the drop approaches.

### Beat 8 (Drop): The Box
Cream becomes the face of a 3D orthographic box. "ONE BRIEF" rises letter-by-letter. Camera pulls back to reveal the box floating on scrolling waves.  
**Beat 12:** Box rotates to show "1,000 CREATORS" (stacked, with outlined echoes).  
**Beat 14:** Rotates again to "ZERO DMs".

### Beats 16–22: The Brief
Whip to dark desk. A tangerine ticket labeled "BRIEF #042" types its rows (product, vibe, cast, due). Stickers (serum, mic, megaphone, vintage camera) drift on with white die-cut borders and soft shadows. A Polaroid containing a real video clip drops into the corner. On beat 20, a "NOW CASTING" stamp presses down.

### Beats 22–34: The Casting Stage
Arc of black-and-white portrait thumbnails behind a 3D stage block. Creators carousel through one-by-one. Each plays live in a large disc (grayscale), with pink name label on the stage, follower count, and a MATCH % counter rolling up. One beat later, a "CAST ✓" stamp lands and the clip fades to colour. Cast counter rolls from 1/4 to 4/4.

### Beats 34–39: The Ads
Pink floods out of the final creator disc. Disc morphs into a phone screen (clip continues playing), then fans into 4 phone mockups playing all 4 creators simultaneously. View counters roll up. "4 ADS" and "BY FRIDAY" rise as headlines.

### Beats 39–44: The Break (Music Break)
Pink floor drops away. A cream "JOIN THE WAITLIST" ticket glides down onto the sunburst. On the pickup, its stub tears off with a shutter SFX.

### Beats 44–54: The Poster
Ticket body morphs into a poster arch. Wordmark rises in, then tagline, then a 3-block info bar slides up (launch date, key numbers, domain). A ticker runs around the frame edge. Everything folds back into the opening disc—**last frame = first frame** for a perfect loop.

---

# TECHNICAL BUILD

## Architecture

- **Single HTML canvas**, pure functional rendering: every frame determined by `seek(t)`  
- **Beat map:** `B = 60 / BPM`. Audio placed so the song's drop lands exactly on beat 8  
- **3D box:** Orthographic projection. Each face is a 1440px offscreen canvas, drawn via affine transform, shaded by surface normal  
- **Video clips:** Pre-cut to 30fps JPEG sequences with ffmpeg. Draw `frame = floor(t * 30)`. Apply `ctx.filter = 'grayscale(100%)'` for B&W phases  
- **Stickers:** Trim PNGs, add white die-cut border by dilating the alpha channel  
- **Audio:** Layer downloaded SFX (shutter on each cast, whooshes on glides, key clicks on typing). Place each by measured peak time. Loudnorm final mix to **-14 LUFS**  
- **Render:** Playwright at 60fps with **8 motion-blur subframes** (4 ghosts on fast whips). Post-render QA: scan for single-frame pops, measure motion against reference (hard jumps/sec, % still frames)

## Gotchas

- Patterns rotating one notch per beat read as stutter → rotate continuously; tune ring speeds so the pattern lands identically on the last frame  
- 4 subframes ghost on fast whips → use 8  
- Flood circles that slide down one frame height still cover the screen → switch to full-frame rect once flooded  
- Counters read the frame's time, not subframe time  
- Disc morphs must occur inside the same camera transform as the departing scene, or they jump

---

# MEDIA ASSETS

Provide:

- **{{media-pack}}**: 4 vertical talking-to-camera clips and 12 portrait photos (royalty-free, Pexels or similar). If none provided, source free Pexels equivalents.  
- **Stickers**: Transparent PNGs (serum bottle, microphone, megaphone, vintage camera, spotlight, lips). Default to Pixabay royalty-free if not supplied.

---

# WORKFLOW

1. **Intake:** Confirm `{{product-name}}`, `{{tagline}}`, `{{product-story}}`, `{{launch-info}}`, `{{audio-track}}`, and `{{media-pack}}`.  
2. **Pre-render deliverables:**  
   - Beat map with timestamps  
   - 6 key stills: Open, Box, Brief, Casting, Phones, Poster  
3. **Render** the final 25s video at 1440×1440, 60fps.  
4. **QA:** Visual scan + motion analysis.

Ask me for the inputs now, then show the beat map and stills before rendering.