TRAVIS INSKEEP

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.

The portfolio homepage rendered by the WebGL tube: a photograph behind the title with the shadow mask's phosphor triads visible across it, scan lines, rounded aperture corners where the faceplate ends, halation spreading off the lettering, and the transport keys lit in the top corner.
The Tube Setup service menu open over the site on its Screen stage: a mask type of trinitron, dot pitch 0.265 mm, mask intensity and phosphor bloom on segmented dials, and a one-line explanation under every control.