product-teaserlisted

# Product Teaser (cinematic, pixel-faithful, beat-synced) Make a short brand teaser where the product performs its magic **live** on screen: the real UI, rebuilt pixel-faithfully in HTML/GSAP, animated to a licensed music track, carried by a real human voice, opening on a human moment and closing on a clear call to action. `references/worked-example.md` is a real finished build you can copy as a template. This skill sits **on top of HyperFrames**. Use `/hyperframes` and its domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-cli`, `/media-use`) for framework mechanics. This skill is the teaser-specific clear path. ## When to use this vs product-launch-video - **This skill**: you want the product's UI to *act* on screen (a control responding, text appearing, a state changing), beat-synced to music, emotionally framed. You have, or can read, the **real UI source** and will rebuild it faithfully. Short (20-40s), teaser energy, one clear feeling. - **`/product-launch-video`**: a 60-90s promo built from captured screenshots / site assets and narration. No live UI recreation. - Unsure → read `/hyperframes` and pick from there. --- ## The clear path Run these phases in order; each ends with a gate. Do not start animating until Phase 1 (product truth) is locked. The biggest quality lever is **fidelity and flow accuracy**, not motion. ### Phase 0: Foundations Gather all five before Phase 1: 1. **The product UI source of truth**: the actual view code /