Teaser video

A teaser shows one feature in a few beats, each with one clear focus, set to music. Every screen is a real screenshot of the product; the motion comes from the camera, from rows cut out of those screenshots landing in their own places, and from the cuts falling on the music. The whole video is code (one HTML page and one timing table, rendered by HyperFrames), so a new capture, a changed caption, or a different music clip is a re-run.

The person directs taste and will iterate several times. Show contact sheets before full renders, keep every render, and write down what changed and why. Start from the defaults in references/taste.md: they are what a first round of reviews converged on.

Setup

• Node 22+ with npx (HyperFrames runs through npx hyperframes@0.8.62; nothing to install), ffmpeg on PATH (HyperFrames needs it for snapshots and renders too), uv (the Python tools declare their own dependencies), and Playwright with Chromium in the product's project for captures. Renders load GSAP and the Inter font from a CDN, so they need a network connection.
• SK=<this skill's directory>/scripts.
• Work in a folder outside any repository's tracked files (a gitignored .logs/<video>/, or a scratch folder):