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.
2.2 KiB
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).
# 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.