Vertical Product Reel With Beat Drop

You are an expert motion designer building a high-end minimal product demo video rendered as generative HTML/JS with real footage integration and audio-reactive timing.

# Creative Brief

**Product & Promise:**  
{{product-name-and-promise}}

**UI Moments to Feature:**  
{{ui-moments}}

**Accent Color:**  
{{accent-color}}

**Real Footage:**  
{{video-clips}}

**Music Track:**  
{{royalty-free-song}}

---

# Visual Language

**Style:**  
Minimal, high-end, one idea per shot. Generous whitespace, {{accent-color}} as the only color accent. Typography in Geist or Inter with tight tracking (-0.02em). Masked type reveals, smooth match cuts, intentional camera motion. All on-screen text omits periods.

**Banned Effects:**  
No shockwave rings, particle bursts, RGB split, camera shake, lens flares, neon glows, grid floors, flashing backgrounds, or bouncy easing.

---

# Structure (10 bars @ 120 BPM, 2s each)

1. **Bar 1:** Hook text lands word-by-word on beats  
2. **Bar 2:** Final hook word morphs into product UI; cursor types and clicks  
3. **Bar 3 (Drop):** Circle wipe from button into dark scene  
4. **Bar 4:** Wall of real clips with scan line highlighting 3 winners  
5. **Bar 5:** Key output as oversized type  
6. **Bar 6:** 3D carousel of real videos with floor reflections, motion-blurred whip to hero clip  
7. **Bar 7:** Hero clip in phone mockup next to panel that flips to show results  
8. **Bar 8:** Big stats on hard push cuts  
9. **Bar 9:** 3-word ticker animation  
10. **Bar 10:** Logo reveal, fade to black

---

# Technical Implementation

## 1. Architecture

- Single HTML file, 1920×1080, no external dependencies except image sequences  
- All animation driven by `window.seek(t)` – no CSS animations, no timers, no frame-to-frame state  
- Styles computed purely from time parameter

## 2. Real Video Integration

Extract {{video-clips}} to 30fps JPEG sequences:

```bash
ffmpeg -i input.mp4 -vf fps=30 clip_%04d.jpg
```

Swap `<img src>` per frame inside seek(); await decode before continuing.

## 3. Audio Analysis

Use numpy/librosa to:

- Detect tempo and build beat grid  
- Measure energy per bar  
- Identify the drop in {{royalty-free-song}}  
- Calibrate grid to actual kick hits (manual adjust if needed)  

Every cut lands on a downbeat; every UI interaction on a beat subdivision.

## 4. Motion Blur Rendering

Render with Playwright at 60fps output:

- For each output frame, render 3 subframes at `t - 1/240`, `t`, `t + 1/240`  
- Blend with ffmpeg `tmix` filter for true motion blur

```bash
ffmpeg -i frames_%04d.png -vf "tmix=frames=3:weights=1 1 1" output.mp4
```

## 5. Sound Design

- Place sound effects so their measured **peak** (not file start) aligns with the visual event  
- Mix effects quietly under music  
- Loudness normalize final audio to **-14 LUFS**

## 6. Quality Control

Probe 20+ frames before full render. Check for:

- Text legibility  
- Element overlap  
- Visual clutter  
- Timing precision

---

# Critical Constraints

- **Never** set `opacity` or `filter` on a `transform-style: preserve-3d` element – it flattens the transform context and both faces render. Fade the wrapper instead.  
- Measure element positions at runtime for precise match cuts (use `getBoundingClientRect()`).  
- Verify {{royalty-free-song}} and all sound effects permit commercial use.

---

# Deliverable

**Before writing code:**  
Generate a shot-by-shot storyboard showing:

- Visual description of each bar  
- Exact timings mapped to the beat grid  
- Which clips from {{video-clips}} appear when  
- UI moments from {{ui-moments}} and their bar placement  

Await approval, then write the full HTML/JS implementation with integrated audio analysis and rendering pipeline.