Fifteen-Second Everything Showreel

You are a senior motion graphics developer building a high-impact 15-second showreel rendered entirely in code. This is your portfolio piece to land a top-tier motion design role—every frame must demonstrate technical and creative excellence.

## Technical Specification
- **Duration:** 15 seconds (450 frames at 30 fps)
- **Resolution:** 1920×1080 (16:9)
- **Architecture:** Single self-contained HTML file where every frame is a pure function of `time` (in seconds)
- **Rendering pipeline:** Playwright captures each frame as PNG; ffmpeg stitches frames into MP4

## Creative Direction
**Energy level:** Maximum. Something significant moves, transforms, or enters/exits every single second. No slow fades, no dead air.

**Visual language:**
- Bold, saturated color palette ({{color-palette}})
- Large kinetic typography that scales, rotates, morphs, or explodes
- Real 3D camera movements: dolly, crane, orbit—not just 2D slides
- Layered depth: foreground/midground/background elements that parallax
- Mix techniques: shape morphing, particle effects, grid deformations, shader-style gradients, text reveals

**Showreel beats (suggested 1-second intervals):**
1. Explosive title card with scale + rotation
2. 3D text extrusion with camera fly-through
3. Geometric shapes assembling from chaos
4. Bold color transition with wipe or shatter
5. Kinetic typography: words tracking in from edges
6. Circular burst of duplicated elements
7. Camera orbit around central 3D object
8. Grid of tiles flipping to reveal imagery
9. Liquid/wave distortion effect
10. Rapid-fire montage of mini-animations
11. Perspective text rolling like a cylinder
12. Neon glow or chromatic aberration effect
13. Zoom into infinite tunnel or fractal
14. All elements converge to center
15. Final logo/title lockup with dynamic hold

## Implementation Requirements

### HTML Structure
```javascript
// Core render function signature:
function render(time) {
  // time is 0.0 to 15.0 seconds
  // Return or mutate DOM to represent frame at this exact moment
  // Use CSS transforms, Canvas 2D, or WebGL as needed
}
```

**Use:**
- CSS 3D transforms (`perspective`, `rotateX/Y/Z`, `translateZ`) for camera work
- Canvas 2D API or WebGL for particles, gradients, custom shapes
- Easing functions (easeOutCubic, easeInOutQuart) for smooth motion curves—no linear movement
- `requestAnimationFrame` for live preview; Playwright calls `render(t)` per frame

**Avoid:**
- CSS animations or transitions (not frame-exact)
- External dependencies (keep it one file: inline all JS/CSS)
- Random functions (must be deterministic per time value)

### Playwright Capture Script
```javascript
// Example frame capture loop
for (let frame = 0; frame < 450; frame++) {
  const time = frame / 30;
  await page.evaluate((t) => window.render(t), time);
  await page.screenshot({ path: `frames/frame-${frame.toString().padStart(4, '0')}.png` });
}
```

### FFmpeg Stitching Command
```bash
ffmpeg -framerate 30 -i frames/frame-%04d.png -c:v libx264 -pix_fmt yuv420p -preset slow -crf 18 showreel.mp4
```

## Deliverable
Provide the complete HTML file ready to render. Assume the user will:
1. Save your HTML as `showreel.html`
2. Run the Playwright script to generate 450 PNGs in a `frames/` directory
3. Execute the ffmpeg command to produce `showreel.mp4`

Do not ask clarifying questions. Make bold, confident creative choices. Prioritize visual impact and technical demonstration of procedural animation skills.