About this component
CRT Screen
A tube television whose picture is a live WebGL CRT shader over cards painted to an offscreen canvas: barrel distortion, scanlines, an aperture grille, bloom, a rolling hum bar and static, with a channel-switch glitch every few seconds or on click that tunes through a title card, color bars and an amber slate. Channels, curvature, scanlines, grille, glow, noise, roll, glitch interval, click to tune and the housing are all props. The resolution adapts to the device, it pauses offscreen, shows a still picture for reduced motion that still changes on click, and a CSS scanline screen stands in without WebGL.
Usage
The import and the props worth knowing about, in one place.
import { CrtScreen } from "@/components/beste/component/crt-screen";
<CrtScreen
className="max-w-3xl"
channels={[
{ title: "The late show never signed off.", caption: "Rabbit Ear Archive" },
{ title: "Midnight double feature", caption: "Two noir pictures, back to back", look: "bars" },
{ title: "Cartoons before dawn", look: "slate" },
]}
curvature={0.7} // more bulge, 0 to 1
scanlines={0.8} // deeper lines, 0 to 1
glitchInterval={0} // only change channel on click
bezel={false} // just the glass, no housing
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
channels* | CrtChannel[] | — | Cards the set tunes through, painted onto the tube |
curvature | number | — | How far the glass bulges, 0 (flat) to 1. |
scanlines | number | — | Depth of the scanlines, 0 to 1. |
mask | number | — | Strength of the red, green and blue aperture grille, 0 to 1. |
glow | number | — | Bloom around bright shapes, 0 to 1. |
noise | number | — | Static on the picture, 0 to 1. |
roll | number | — | Strength of the slow hum bar rolling down the screen, 0 to 1. |
glitchInterval | number | — | Seconds between channel changes on its own. 0 keeps one channel until clicked. |
clickToTune | boolean | — | Clicking the screen switches to the next channel. |
tuneLabel | string | — | Accessible name of the screen when it is clickable |
bezel | boolean | — | Wrap the tube in a rounded television housing. |
paused | boolean | — | Freeze the picture. |
className | string | — | |
children | ReactNode | — |
