CRT
cec0ac2ffe
- The mouse cursor and the blocker-list icons are Phosphor files (media/teaser/icons, copied unchanged by tools/site-icons.ts) shown as CSS masks; no hand-written SVG left in media/teaser. - The no-handmade-svg guard now covers media/teaser: no inline SVG, every referenced icon is a vendored Phosphor file, byte-equal to the package. - New 6-bar desktop scene before the Submit card: real frames of apps/desktop in fixture mode (media/teaser/desktop.ts, captured headlessly) in a CSS window: portfolio across studios, the release track of both stores, the Growth chart with its tooltip, the Cmd+K palette, a price-sheet dry-run diff, the confirm dialog, and Submit for review left to the console. Music and timeline follow (26 bars, 48.75 s). - End card: "Desktop app for macOS, Windows, Linux". - site/img/teaser.mp4 (1280x720 H.264, about 3 MB) and its poster re-rendered; ?v= bumped, captions say 49 s.
40 lines
2.9 KiB
Markdown
40 lines
2.9 KiB
Markdown
# 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.
|