Matrix Letter Glitch

A Matrix-style falling character glitch stream — a curtain of bright glyphs on a dark base, drawn purely in Canvas 2D.

The classic "Matrix rain" background: columns of characters fall from top to bottom, the leading glyph carries a glow, the tail fades out cell by cell, and horizontal glitch tears appear from time to time. A pure Canvas 2D approximation — no WebGL needed.

Loading preview…

npx shadcn@latest add https://webberui.com/r/matrix-letter-glitch.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Raindrop colorcolor

Font sizefontSize

Fall speedspeed

Glitch tearingglitch

Glitch strengthglitchIntensity

<MatrixLetterGlitch />

Installation

npx shadcn@latest add https://webberui.com/r/matrix-letter-glitch.json

Or, once registries are configured in components.json, install it as @webberui/matrix-letter-glitch.

Usage

Use it as the background of a bounded container, with foreground content layered above the rain as children. The container needs an explicit height (for example h-[340px]), and viewport height units should be avoided:

import { MatrixLetterGlitch } from "@/components/ui/matrix-letter-glitch";

<div className="relative h-[340px] w-full overflow-hidden rounded-xl">
  <MatrixLetterGlitch>
    <div className="relative z-10 flex h-full items-center justify-center">
      <h3 className="text-4xl font-bold text-white">Wake up, Neo.</h3>
    </div>
  </MatrixLetterGlitch>
</div>

Props

Prop	Type	Default	Description
`color`	`string`	`"#22c55e"`	Primary color of the tail
`headColor`	`string`	`"#d6ffe4"`	Color of the leading glyph at the head (which carries a glow)
`background`	`string`	`"#050a07"`	Base color of the container
`fontSize`	`number`	`16`	Font size (px), which also determines the character cell and column spacing
`speed`	`number`	`1`	Fall speed multiplier
`characters`	`string`	Katakana + digits	String of the character set in use
`glitch`	`boolean`	`true`	Whether horizontal glitch tears are enabled
`glitchIntensity`	`number`	`1`	Multiplier on how often glitches fire — higher is more frequent

A speed below 1 makes the fall slower, and above 1 makes it more urgent.

Accessibility

When the user has "reduce motion" enabled at the system level, only a single static frame of the rain is drawn — the animation loop never starts and no glitches fire
The canvas is marked aria-hidden — decorative only, so it does not interfere with assistive technology; the foreground children are announced as usual