How this site's CRT look works
Barrel distortion, chromatic aberration and scanlines, in one small shader that runs over every 3D scene on the site.
Every 3D scene on this site renders into an off-screen texture first. A single full-screen shader then draws that texture to the screen, and that is where the “old monitor” look comes from.
1. Barrel distortion
The texture coordinate is pushed outward based on its distance from the centre, uv = 0.5 + c * (1.0 + k * dot(c, c)). Straight lines bow, like the glass of a tube TV.
2. Chromatic aberration
Red, green and blue are each sampled with a slightly different horizontal offset. The offset grows with scroll speed, so the image tears a little when you scroll fast.
3. Scanlines and grain
A sine wave across the screen height darkens every other line, and a cheap hash function adds animated noise.
4. Tracking glitches
Now and then a horizontal band gets shifted sideways, the same way a worn VHS tape loses tracking. When the site switches between scenes the glitch amount spikes, which hides the cut.
The text stays as normal HTML on top, so it is always sharp, selectable and readable by screen readers.