# storebound teaser (30-40 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, 20 bars = 37.5 s), scenes, terminal lines, prices, languages, blockers |
| `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 |
| `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.

## 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 10 min
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.