Matrix Shader for React

Matrix Shader draws digital rain as blocks. The box is cut into 20 columns of 15-pixel blocks on black, and down each column a pale head falls at its own pace, 3 to 7 blocks a second, lighting the blocks it passes; they fade from bright green to deep green behind it. Blocks switch on and off one at a time, each once a second at its own moment, and now and then a column goes dark for a while and fades back. Every pixel is computed each frame by a WGSL fragment shader on WebGPU, under faint scanlines, for under 0.2 ms of GPU time a frame.

Use it behind a security product's hero, a terminal-style card, a CTF or a developer landing page. For real katakana and digits in plain CSS, themed and with no GPU, use the Matrix background; for a grid of flipping 0 and 1 glyphs, Binary Shader; for a broken signal, Glitch Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same green columns in browsers without WebGPU.

Installation

Usage

import { MatrixShader } from "@/components/ui/matrix-shader";

<MatrixShader 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">Access granted</h1>
  </div>
</MatrixShader>

Matrix Shader is a container: your content sits on top of the rain, 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". Most of the screen is black, but the bright blocks reach near-white, so white text can drop to 1.1:1 where a trail passes behind it: put copy on a panel, like the bg-black/70 one above, which keeps white text above 9:1 everywhere (bg-black/60, above 6:1).

Demos

Amber

color and headColor recolor the rain, here an amber terminal with a cream head; the trail's deep shade is derived from color. columns={40} doubles the columns, so the blocks are half as wide. Keep color bright and saturated: the rain is drawn on black, and a dark or grey color fades into it.

In a card

columns={12} gives a narrow card fewer, chunkier columns, and brightness={0.7} dims the rain so a label on top stays readable. The blocks are 15 CSS pixels tall at any size and screen ratio.

Performance

About 0.17 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. That's light enough to keep the default quality, and the hard block edges look best at full resolution. 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 gradient of green columns with pale heads, 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 rain is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame of the rain and stops. Nothing flashes in sync: each block switches at most once a second, at its own moment, and a head passes any spot at most once every 2 seconds. Measured over 10 seconds with WCAG's area test (a quarter of a 10° field), it flashes at most once a second; a small patch a few blocks across can reach three as a head runs down through it, well under the area that counts. speed is capped at 1.5, which keeps the area test under two. Columns fade out and in over a second rather than popping. White text needs a dark panel, as in Usage.

FAQ

API Reference