CRT / VHS Effect System
The renderer this site runs on: a two-pass WebGL tube built as a model of light leaving a screen, not a stack of filters.
A CRT and VHS simulation in vanilla JavaScript and WebGL, no framework and no bundler, built as a model of light leaving a tube rather than a pile of filters. It renders in two passes: the picture below the page, and a glass pass above it carrying the shadow mask and scan profile, multiply-composited so the text is scanned and masked along with the picture rather than sitting crisply on top of it. The operators follow the physics. A mask occludes, so it multiplies; phosphor emits, so it is gated on beam current and goes dark where the beam is cut off. Correcting that took a black field from RGB(27, 34, 47) to under 1. Per-gun convergence comes from a thermal model of the tube, and phosphor trails decay per gun on P22 time constants, which is why a white highlight fades through cyan and dies blue. Persistence and interlace combing read the previous frame, which neither CSS nor an SVG filter can do. Sixty-two parameters sit on a service-menu panel, each verified against rendered pixels, behind a contract suite built to catch effects that are present, correct, and connected to nothing.
Category: visual
Tech: WebGL, GLSL, Vanilla JavaScript, CSS, Eleventy, Jest, Playwright
Role: Creator
Heads up: this project uses heavy effects. The pause key in the transport, top right, holds a still picture.