I’m in Austin, Texas this week with the Big Bang Collective to host the Quantum Corral at Luck Reunion — more on that soon. Last night we had a lovely dinner at Licha’s Cantina with Audrey, Naomi from UT Austin, and my Big Bang mates David and Phill. As tends to happen when you get a group of science-obsessed people together over margaritas, the conversation drifted through several improbable topics before landing squarely on… Max Headroom. Who else?
And I remembered — a few months ago I’d been playing around with TensorFlow’s BodyPix person segmentation models and ended up building a little web component that recreates the iconic 80s look. The neon grid, the glitchy digital artefacts, the whole thing. So naturally I had to dig it out and put it on the site.
Click Start camera below to try it yourself — it’ll use your webcam, segment you from the background, and drop you into the Max Headroom universe. Works on phones too (front camera).
How it works
Under the hood, it’s two web components layered on top of each other:
<max-headroom-bg>— a WebGL fragment shader that draws the animated neon grid with fisheye distortion and that signature colour palette (cyan, magenta, green-cyan). Runs at 60fps.<max-headroom-video-overlay>— grabs your webcam feed, runs it through TensorFlow.js and the BodyPix model to segment you from the background in real time, then composites just the person (with glitch effects) over the grid. The background shows through where you aren’t.
The whole thing runs entirely in the browser — no server, no uploads, no data leaving your device. The BodyPix model is downloaded from Google’s CDN on first load (it’s a few MB), and after that it’s pure client-side WebGL and canvas work.
Source code is on GitHub if you want to poke around.
