Glitch Shader for React

Glitch Shader draws a screen carrying a corrupted signal. Three channels of soft value noise, sampled at slightly different, wobbling offsets, make blotchy green, yellow, pink and teal patches, under a grid of grey blocks and scrolling scanlines. On top, one block in ten is data-moshed out of place, a few columns and rows are corrupted to purple, a torn row slips sideways now and then, and static and green sparkle crawl over everything. A WGSL fragment shader on WebGPU computes every pixel each frame, for about half a millisecond of GPU time.

Every glitch runs on its own clock: each block, column and row changes at most once a second, at its own moment, so the screen churns without ever strobing. Use it behind a 404 or "signal lost" page, a game's menu or a cyberpunk launch. For a calm picture torn by short bursts, in plain CSS, use the Glitch background; for green code rain, Matrix Shader; for flipping binary digits, Binary Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS picture of the same signal in browsers without WebGPU.

Installation

Usage

import { GlitchShader } from "@/components/ui/glitch-shader";

<GlitchShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-black/70 px-8 py-6">
    <h1 className="font-mono text-5xl font-semibold text-white">Signal lost</h1>
  </div>
</GlitchShader>

Glitch Shader is a container: your content sits on top of the signal, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The colors are mid-tones that reach near-white in the yellow patches and the sparkle, so white text reads on only about 60% of the screen: put copy on a panel, like the bg-black/70 one above, which keeps white text above 8.5:1 everywhere (bg-black/60, above 5.7:1).

Demos

Cyan, fine scanlines

accentColor="#22d3ee" tints the corrupted stripes and rows cyan instead of purple, and scanlines={2} makes the lines twice as fine, for a sharper, more electronic screen.

In a card

intensity={0.5} halves the color split, the static and the sparkle, and distortion={0.4} keeps the moshed blocks close to home, so a card stays readable. The scanlines and the static are sized in CSS pixels, so they look the same at any screen ratio.

Performance

About 0.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. It keeps the default quality: half resolution would blur the scanlines and the static, which are the point. distortion and intensity don't change the cost. 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 (about 50 KB gzipped) 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 picture of the signal, color patches under scanlines with two purple stripes, 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 signal is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. It's built not to flash: each block, column and row changes at most once a second, on its own clock, so large areas never change together; a tear shows at most twice a second, one at a time; and the static and sparkle are single pixels, too small to count. Measured over 10 seconds with WCAG's area test (a quarter of a 10° field), it never flashes; even 32-pixel patches flash at most twice a second. speed is capped at 1.5, which keeps that under three. White text needs a dark panel, as in Usage.

FAQ

API Reference