VIPEX Motion · 10 Shader backgrounds press H for the panel

CRT Overlay

One shader quad over the whole page. It paints neutral grey — the identity value under hard-light — so the layout below keeps every pixel it had until the tube's own fields darken or lighten it: curvature, bezel, vignette, rolling scanlines, aperture grille, phosphor grain, glass glare, chroma fringing and tape wobble.

test pattern · drawn on a canvas at load

Saturated bars and a grey ramp make the tube legible: the chroma slider fringes the bar edges, the grain sits in the ramp, the grille rides the flat fields.

Blends with the DOM, not with a copy of it.

Nothing is captured, rasterised or proxied. Text stays selectable, links stay clickable, and the layer is pointer-events: none above it all.

blend mode · hard-light

device tube
signal composite
lines 625 / 50 Hz
$ overlay.init(document.body, { preset: "crt" })
$ overlay.set("tracking", 0.7)  // tape wobble
$ overlay.setSource(document.querySelector(".monitor"))
$ overlay.destroy()  // layer removed, page untouched

Curvature

A barrel pinch bends the whole field, and anything pushed past the glass edge becomes bezel.

Phosphor

Per-channel grain, scaled by the vignette so the corners stay quieter than the centre.

Chroma

The three channels sample the tube at slightly different offsets; the disagreement is the fringe.

framed host

Point it at one box.

Toggle Framed host in the panel and the same controller moves its layer into this element — absolute instead of fixed, sized by a ResizeObserver, paused by an IntersectionObserver when it scrolls away.

booting…