CRT
b142cf6d21
HTML/CSS/JS timeline rendered frame by frame in headless Chrome, original music synthesized with OfflineAudioContext, ffmpeg encode + loudnorm. Outputs go to media/teaser/out (gitignored); poster.jpg is the end card.
35 lines
2.2 KiB
Markdown
35 lines
2.2 KiB
Markdown
# 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.
|