product-teaser

---
name: product-teaser
description: "Build a cinematic, product-accurate, beat-synced brand/product teaser (~20-40s) in HyperFrames by recreating the REAL product UI pixel-faithfully and animating it to a licensed music track, with a real human voice, a message-first opener, and a call-to-action close. Use when the ask is a 'brand teaser', 'product teaser', 'cinematic teaser', a hype reveal, or 'recreate my app's UI in a promo and sync it to music' where UI fidelity and music sync matter more than a stock-footage montage. Distinct from product-launch-video (which uses captured screenshots): here you REBUILD the interface in HTML/GSAP so it performs live. A clean, repeatable clear path from product UI to finished teaser."
---

# 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 / design file for the interface you will show (a SwiftUI `View`, a React component, a Figma frame). You rebuild from this.
2. **A licensed music track** (or one you generate). The music drives the edit. Confirm the license.
3. **A real voice**: the founder's own voice (ElevenLabs), retrieved from a secret manager per call, never hardcoded. TTS reads as "AI made this."
4. **Brand tokens + fonts**, bundled locally in the project (`.woff2` in `fonts/`, exact hex, exact type scale). No network fonts at render time.
5. **A HyperFrames project**: `npx hyperframes init "videos/<project>" --non-interactive`.

**Gate:** all five in hand; you can point at the real UI source file.

### Phase 1: Product truth (fidelity and flow)

1. **Recreate the UI pixel-faithful from the real source.** Extract exact metrics, colors, fonts, and the exact set of states, and rebuild the component in HTML/CSS to match. Do not approximate or invent states.
2. **Match the real product flow.** Storyboard what the product actually does, step by step, and reproduce it exactly. Get the mechanic right before styling it.
3. **The owner is ground truth, even over the code.** If the shipping product does not visibly do something the code can, do not show it. Marketing reflects real, normal use.
4. **Do a fidelity check** after each build: re-read the real source against your recreation (states, colors, metrics, flow).

**Gate:** the recreation matches the source and the on-screen flow matches what the product truly does.

### Phase 2: Story to a music grid (beat-sync)

1. **Derive the beat grid from the track.** Decode to mono 8kHz, compute a positive-diff spectral-flux onset envelope, autocorrelate for tempo. Get BPM, beat, bar, the count-in transients, and the drop ("the one"). Lock those numbers.
2. **Storyboard the beats** against the grid: open cold on the count-in, drop the product on "the one," land every paste / cut / landing on a real beat, and cut dead air between beats.

**Gate:** a written beat map with absolute timestamps, each key moment tied to a beat, the drop identified.

### Phase 3: Build the architecture

1. **Beats are sub-compositions** (`data-composition-src="compositions/beatN.html"`), each with a paused GSAP timeline registered on `window.__timelines["<composition-id>"]`.
2. **Put media at the host root.** `<video>` and `<audio>` are direct children of `index.html`, never inside a sub-composition (media inside a sub-comp renders black / silent). Drive any per-scene media motion (a video's scale) on the **root** timeline.
3. **Paint full-bleed backgrounds on a `class="clip"` child**, not on `#root`.
4. Every timed element carries `class="clip"` + `data-start` + `data-duration` + `data-track-index`. No render-time clocks / random / network.

**Gate:** `npx hyperframes check` runs; media is at the root.

### Phase 4: Voice, SFX, and the mix

1. **The real voice drives the reveal.** Transcribe the VO for word timings (`npx hyperframes transcribe`) and reveal on-screen text to them.
2. **SFX minimal and on-brand.** No keystroke sounds for a voice-first product; cut any chime/sparkle the owner dislikes. One soft confirm on a real action is enough.
3. **Bake the music volume envelope into the audio file.** Duck under the voice, hold the groove elsewhere, fade at the end, and render that gain permanently into the `.mp3`. Reference it at `data-volume="1"` with no volume tween on the music. Fade at the true end rather than hard-stopping mid-groove.

**Gate:** the voice sits clearly above the music in the exported file.

### Phase 5: The bookends

1. **Opener: a message-first human hook, not a logo.** Open on a real human moment that names the problem, synced to the count-in, then hand off to the product on the drop (problem → relief). Use commercial-safe stock (Pexels), downscaled and graded into the brand world. Study intros you admire for register; never copy them.
2. **CTA close: resolve cinematically to an end card.** After the final brand moment lands and lingers a beat, transform into a clean end card with the action: a short invitation and a single saturated button carrying the URL. Build it inside the final composition so brand elements can travel (the wordmark scales down and rises to anchor the card) rather than hard-cutting. Music grooves under it, then fades at the true end.

**Gate:** the first ~4 seconds hook on a human truth and read the product; the last frames say exactly what to do next.

### Phase 6: QA, render, verify

1. `npx hyperframes check` → 0 errors. (Muted-grey UI-mock text may trip contrast *warnings*; that is intentional realism, not a blocker.)
2. **Snapshot key moments and read them:** `npx hyperframes snapshot --at <t1,t2,...> --no-end`; zoom into details with `--zoom "x,y,w,h"`.
3. **Render, then verify in the encoded MP4**, not the preview: extract frames across the opener, a mid beat, and the close; confirm no black media and no regressions. Measure the audio mix (`ffmpeg ... -af "atrim=A:B,volumedetect"`).
4. Deliver: open it locally and/or send the file for review.

**Gate:** encoded frames confirm every beat; audio verified; duration reported.

---

## Brand hygiene

Marketing reflects real, normal use and the brand's voice. Keep the owner's non-negotiables on a short list and check every frame against it: keep the accent color from drifting to a neighbor, do not show internal-only indicators, keep name casing and punctuation rules consistent, keep any "free" claim honest. Capture the list once and enforce it.

## Proof and sharing

`references/worked-example.md` is a real finished build (the Rekody "Someday" teaser): the beat map, the file layout, the timings, and where the rendered result lives. To share the skill, share this `product-teaser/` folder; it is self-contained method with no secrets.