# storebound teaser (about 50 s social video)

A scripted terminal animation, not a screen recording. Every frame is a pure function of time, rendered from an
HTML/CSS/JS timeline in headless Chrome and encoded with ffmpeg. The music is original and synthesized from scratch in
the same browser (Web Audio `OfflineAudioContext`): no samples, no downloaded audio, nothing to license.

| file | what |
|---|---|
| `script.js` | the timeline: tempo (128 BPM, 26 bars = 48.75 s), scenes, terminal lines, prices, languages, blockers, the desktop steps |
| `desktop.ts` | the desktop scene's frames: apps/desktop's Vite dev server in fixture mode (`VITE_FIXTURES=1`, example.com-style data), captured headlessly in dark at 1280x800 @2x, plus `boxes.json` (cursor targets) -> `out/desktop/` |
| `index.html` + `teaser.js` | the picture; `window.teaser.seek(t)` sets every element for time `t` |
| `music.js` | the music: arp, kick, hats, clap, offbeat bass, pad, impacts on the cuts, key clicks, riser |
| `render.ts` | frames -> ffmpeg (H.264 high, yuv420p, 30 fps), music -> loudnorm (-14 LUFS, -1.5 dBTP), mux, posters |
| `icons/` | the mouse cursor and the blocker-list icons: Phosphor files copied unchanged by `bun tools/site-icons.ts` (no hand-written SVG; CI checks it) |
| `poster.jpg` | end card still (1920x1080, small) |

The terminal text is modelled on real storebound output for the demo game (`examples/demo-game`, placeholder ids,
dry runs); the price table values are illustrative. The store art is the demo game's real renders. The desktop scene
shows real frames of the desktop app on its fixture data in a CSS window; only the confirm dialog is drawn (in the app it
is a native OS dialog), with the app's own wording and the dry run of the diff in the frame behind it.

## Render

Needs Bun, ffmpeg and Playwright (repo devDependency; Playwright's Chromium or an installed Google Chrome).

```sh
# optional, for sharp store art: the demo renders (otherwise crops of docs/img/showcase.jpg are used)
cd examples/demo-game && bun serve.ts & bun ../../cli/index.ts shots capture && bun ../../cli/index.ts shots fonts && bun ../../cli/index.ts shots render
# from the repo root
bun media/teaser/render.ts                       # both formats + music, about 12 min (captures out/desktop/ first when missing)
bun media/teaser/render.ts --desktop             # capture the desktop app frames again (after a UI change)
bun media/teaser/render.ts --only v              # vertical only (h = horizontal)
bun media/teaser/render.ts --stills 2,12.5,30    # PNG stills in out/stills for a quick layout check
bun media/teaser/render.ts --serve --port 8750   # live preview: /index.html?w=1080&h=1920&play=1 (or &t=12.5)
```

Outputs (gitignored) in `media/teaser/out/`: `teaser-1080x1920.mp4` (X / TikTok / Reels), `teaser-1920x1080.mp4`
(X / YouTube), `-silent` variants, `poster-*.jpg`, `music.wav`.

Vertical layout keeps captions and key text inside the central 80% and leaves the bottom ~22% free for app overlays.