# Matrix Trail

> A quiet field of glyphs with thin lines raining down it. Move the pointer across and the glyphs behind it light up and scramble, leaving a trail that fades back into the field.

Source: https://ui.cortexcn.dev/docs/cortex/matrix-trail

## Installation

```bash
npx shadcn@latest add @cortexcn/matrix-trail
```

## Usage

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

```tsx
<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

| Prop         | Type        | Default                        | Description                                         |
| ------------ | ----------- | ------------------------------ | --------------------------------------------------- |
| `characters` | `string`    | `"0123456789ABCDEF<>/*+=:;"`   | The glyphs the field is drawn from                  |
| `cell`       | `number`    | `16`                           | The size of one glyph cell, in pixels               |
| `density`    | `number`    | `1.4`                          | Falling lines per 100 pixels of width               |
| `speed`      | `number`    | `70`                           | How fast the lines fall, in pixels a second         |
| `radius`     | `number`    | `70`                           | How far around the pointer glyphs light up          |
| `fade`       | `number`    | `1.4`                          | Seconds a lit glyph takes to fade                   |
| `accent`     | `string`    | `"var(--foreground)"`          | Color of lit glyphs and the falling lines           |
| `animated`   | `boolean`   | `true`                         | Rain the lines and twinkle the field                |
| `children`   | `ReactNode` | -                              | Content over the field, centered                    |
| `className`  | `string`    | -                              | Extra classes; set the height here                  |