# Showreel — beat-synced cuts

## Format (read first)
- 1920×1080 (16:9), 60fps, 15.0s = 900 frames
- Target: Single HTML file

## Brief
A showreel (15s) for Ava Chen (Motion designer · Berlin). Cut on a 120 BPM grid: every cut lands on a multiple of 0.5s. Each scene is one keyword with its own distinct motion idea.

## Look
- Palette (background, accent, text): #0e0e0e, #c6ff3d, #f2f2f2
- Type: Mix of one display sans (900) and one mono for small labels.

## Beats (exact timings)
1. 0.0–1.0s — Black. A thin accent line streaks across on the downbeat at 0.5s.
2. 1.0–12.0s — Scenes for each keyword in order (Brand | Type | Product | Data | 3D | UI | Loops), each 1.0–2.0s long and starting on a beat. Vary the motion idea per scene: mask reveal, kinetic split, grid of repeated words, shape morph, odometer, marquee, scale punch. Hard cuts between scenes, no crossfades.
3. 12.0–15.0s — Name card: "Ava Chen" large, "Motion designer · Berlin" in mono below, accent underline. Hold ≥ 1.5s.

## Motion rules
- Cuts on beats only (multiples of 0.5s).
- No scene reuses the previous scene's motion idea.
- Contrast high, one accent color.

## Known failure modes — avoid these
- Scenes drifting off-beat because of easing — schedule scene start times on the grid, ease inside scenes.

## Build
- Output ONE self-contained HTML file. No CDNs, web fonts, images or scripts from URLs.
- The stage is exactly 1920×1080 and scales to fit the window (letterbox) while keeping the aspect ratio.
- Expose window.__addmotion = { width: 1920, height: 1080, fps: 60, duration: 15, seek(t) } where seek(t) renders the exact frame for time t in seconds.
- Make every frame a pure function of t: compute positions from t (with easing functions you define) rather than accumulating state. Use requestAnimationFrame only to call seek(performance.now()/1000 % duration) for live preview.
- If you use CSS @keyframes, seek(t) must set animation-play-state: paused and a negative animation-delay of -t seconds on every animated element.
- To export MP4, step seek(t) frame by frame in a headless browser, screenshot each frame, and encode with ffmpeg.

## Done when
- [ ] Every cut is on the 0.5s grid
- [ ] Name card held ≥ 1.5s
- [ ] You scrubbed the start, middle and end of every beat and nothing overlaps, clips or jumps

Before writing code, restate the beat list with frame numbers. Then build it in one pass.