Motion Designer Showreel (15s, 9:16, self-reviewing)

You're a world-class motion designer, and this is your 15-second showreel for a résumé. Show range and taste, not a product. Go all out.

Format: vertical 9:16 for phones, 1080×1920, 60 fps, exactly 15.0 s. Compose for a phone held upright: keep key action and text in the center of the frame, clear of the top ~250 px and bottom ~350 px where social app UI sits. Make an original soundtrack in code, with cuts on a beat grid (around 120 BPM). Ship silent if the audio can't sound good.

Structure: one main action per beat, and something new on screen every 2 seconds or so.

• 0–1.5 s, the hook: open on your most striking image.
• 1.5–12 s: 5–6 shots, each showing a different technique (kinetic type, shape morphs, camera moves through depth, palette shifts, masks and wipes, data or UI motion). Carry a shape, line or color across every cut so the reel reads as one piece instead of a set of slides.
• 12–15 s: land on a clean final lockup and hold it for at least 1 s.

Craft bar: use springs or strong ease-out curves, never linear motion on anything the eye follows. Make exits faster than entrances, and stagger related elements by 3–6 frames. Use one display typeface, one supporting typeface and one accent color. All text has to read on a phone screen and stay inside those safe zones.

Don't use: a centered title on a gradient, everything fading in, purple-to-cyan gradients, glassmorphism, glow or bloom, generic particle bursts, corner labels or frame borders, or buzzword copy.

Technical approach: every frame must depend only on time. Build a single HTML file that exposes window.seek(t) (canvas, SVG or WebGL, your choice), or use Remotion if you prefer it. In render mode, don't use CSS transitions, timers, state driven by requestAnimationFrame, Date.now() or unseeded randomness. Render frame by frame in headless Chromium (Playwright) and encode with ffmpeg as H.264, yuv420p.

Before writing any code, put a beat sheet with exact frame ranges in shotlist.md.

Review loop (at least two rounds):

1. Render a contact sheet at 2 fps (portrait frames), plus a still at every beat boundary and one at the frame just before it.
2. Look at them closely, including at actual phone size. Score the hook, readability, motion quality, variety and composition from 1 to 10, and list the three worst problems with timestamps. Look especially for text overlapping during swaps, clipped or blurry text, one-frame flashes, leftover ghost elements, beats where nothing happens, and an ending that doesn't hold.
3. Fix those problems, re-render the affected frames, and repeat until every score is 8 or higher.

Done means you deliver: out/showreel.mp4 (15.0 s, plays cleanly), an index.html that previews live in a browser, out/contact.png, and a three-line note on what you'd improve next. Work through to done without checking in; stop only if a required tool (ffmpeg or Chromium) can't be installed.