Matrix Trail

Installation

Usage

import { MatrixTrail } from "@/components/matrix-trail";

<MatrixTrail className="h-80">
  <h2>Every request leaves a trace.</h2>
</MatrixTrail>

Set the height with className. Anything inside sits centered over the field. Use it behind a hero, a section header, or a developer tool's empty state.

Examples

Binary

Only ones and zeros, smaller cells, more lines, and a longer trail.

Behavior

• The field is one canvas. The quiet glyphs are drawn once to a hidden canvas, so each frame only paints the lines, their head glyphs, and the trail.
• Lines fall at different speeds, each with a fading tail and a brighter glyph at its head, and start again above the field when they leave it. Now and then a glyph in the field changes.
• Glyphs within radius of the pointer light up, closest first, and some scramble as they light. They fade back over fade seconds.
• The field takes the text color, and lit glyphs and lines take accent. Both redraw when the theme changes.
• The canvas only draws while the field is on screen. With reduced motion enabled, or with animated={false}, the lines stop and the field stays still; the trail still follows the pointer.
• The canvas is hidden from screen readers. Content you put inside stays readable and clickable.

Props