CRT Phosphor Shader for React

CRT Phosphor Shader draws an old picture tube showing a calm synth sunset: a gradient from deep violet to coral, and a glowing orb with slits across its lower half that drifts slowly and leaves a faint phosphor trail. You see it through the tube itself: curved glass that bulges the picture and rounds its corners into black, rows of red, green and blue phosphors, dark gaps between the scanlines, a soft bloom where the picture is brightest, and a faint band that rolls down every six seconds. A WGSL fragment shader on WebGPU draws the picture one scanline at a time and lays the phosphors over it, pixel by pixel.

Use it behind a retro game page, a music player or a playful 404, wherever an old screen fits. The picture stays clean: no tearing, static or flicker. For a corrupted signal, use Glitch Shader; for an 80s floor in plain CSS, the Retro Grid background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same colors in browsers without WebGPU.

Installation

Usage

import { CrtPhosphorShader } from "@/components/ui/crt-phosphor-shader";

<CrtPhosphorShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-md bg-black/60 px-8 py-6">
    <h1 className="font-mono text-5xl font-bold uppercase tracking-widest text-white">
      Press start
    </h1>
  </div>
</CrtPhosphorShader>

CRT Phosphor Shader is a container: your content sits on top of the tube, in normal flow. It fills its own box, so give it a height or content; the tube's corners are black, so it frames itself. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The middle of the picture is a mid-tone rose, so neither white nor black text reads on it alone, in either color scheme: put text on a panel such as bg-black/60.

Demos

Shadow mask

mask="shadow" swaps the vertical stripes for staggered dots, as on a TV, curvature={0.2} bulges the glass further, and lines={180} makes the scanlines chunkier.

In a card

A late-night palette, skyColor="#0b1e3f" and horizonColor="#2dd4bf", on a slot mask, with lines={120} for bold scanlines in a small box and curvature={0.08} for flatter glass. It suits a "now playing" card or a game's save screen.

Performance

About 0.6 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Each pixel samples the picture once on its scanline and six times for the bloom, with no marching. Keep quality at 1: the phosphors and scanlines are pixel-sized, so a lower resolution coarsens them, and the shader is light enough. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a CSS gradient of the same colors, the sunset with a soft orb, thin scanlines and dark corners, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The tube is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, with the refresh band held in place, and stops. Nothing flashes or flickers: the orb drifts over tens of seconds, and the refresh band brightens the picture by about a tenth as it rolls down, once every six seconds. Across the renders we measured, white text reaches 4.5:1 on 69% of the shader and black text on 32%, and the middle is the weakest part. White text on a bg-black/60 panel stayed above 5.9:1 on every pixel.

FAQ

API Reference