HyperFrames: The Playground Goes Cinematic
Every page on the Jarvis Playground now carries its own rendered video — hero backgrounds, cinematic banners, and click-to-start game splashes — all generated from plain HTML, CSS and GSAP by HyperFrames, running in a Docker container on nocdocker02.
What shipped:
- A self-hosted HyperFrames render service (Node 22 + FFmpeg + Chromium, pinned headless-shell for deterministic BeginFrame capture) — 100% CPU, no cloud, no credits.
- 26 custom compositions: a kinetic home hero, radar sweeps for weather, terminal type-ins for AI News, a PR-diff reveal, stem waveforms, a rotating 360° globe, CRT static for legacy classics, meme stamps, and per-game "Press Start" splashes for all six arcade games.
- A shared
hf-videocomponent (lazy-mount, poster fallback, reduced-motion aware) wired into 26 pages — home, gallery, SNES, news, weather, conspiracy, about, labs, 360-video, face-swap, stem separator, meme generator, video share, the councils, and every game. - A capability showcase page with the full 22-clip library.
By the numbers: a 10-second 720p clip renders in ~20 seconds on 4 cores; the full 22-clip batch took under 10 minutes; the whole video library is 30 MB. Same HTML in, same MP4 out — every render is bit-for-bit reproducible, which is what makes this usable in an automated pipeline.
Next up: rendering news articles to video automatically, and a PR-to-video workflow for the jarvis-playground repo.