Matrix Background for React

Matrix fills a box with digital rain: columns of katakana and digits fall at their own pace, each led by a bright glyph that flickers, with a trail that fades out behind it. The columns are laid out on the server from a fixed seed and moved by CSS keyframes, so the rain runs no script and looks the same on every load. It's the film's green by default, near-white heads on a dark page and deep green ones on a light page.

Use it behind a hero, a sign-in screen or a terminal-style card. For the same screen texture as blinking cells, use Flickering Grid; for a CRT that tears and glitches, Glitch; for falling streaks that read as weather rather than code, Rain.

Installation

Usage

import { Matrix } from "@/components/ui/matrix";

<Matrix className="min-h-[420px]">
  <h1>Zero trust, all the way down</h1>
</Matrix>

Matrix is a container: put your content inside and the rain falls behind it. It fills the box you give it, so set its height (min-h-[420px]), or className="fixed inset-0" to cover the whole page. The rain is transparent, so the box's own background shows through: add bg-black for the film's black screen.

Demos

Theme colours

color sets the rain and headColor the leading glyph, any CSS colour. Here they're the theme's --muted-foreground and --foreground, so the rain is grey ink on a light page and grey light on a dark one; color="var(--primary)" tints it with your brand.

Inside a card

A sparse, slow rain in a small box: size={12} for smaller glyphs and narrower columns, density={0.5} to leave half the columns empty, and speed={0.6}. columns={32} renders only the 32 columns a 384px card needs, so the page sends less HTML.

Accessibility

The rain is decoration: the whole layer is hidden from screen readers, ignores the pointer and can't be selected, so copying the page never picks up glyphs. With reduced motion every column stops where it is, a still frame of the rain rather than an empty box. Nothing flashes: a head changes shape a few times a second, never brightness. The trail sits behind your text at full strength, so keep text in the foreground colour and give a headline a soft scrim (such as a radial gradient in --background), or lower density to about 0.5 behind body text.

FAQ

API Reference