# Matrix Decode
URL: https://remocn.dev/docs/typography/matrix-decode

Random scramble resolves left-to-right into target text

- Install: `npx shadcn@latest add @remocn/matrix-decode`
- Vibe: tech
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/matrix-decode
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MatrixDecode } from "@/components/remocn/matrix-decode";

const MatrixDecodeScene = () => (
  <MatrixDecode text="ACCESS GRANTED" revealDuration={60} />
);

export const RemotionRoot = () => (
  <Composition
    id="MatrixDecode"
    component={MatrixDecodeScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The final text the scramble resolves into |
| `charset` | `string` | `"!@#$%^&*()_+-=<>?/\\\|"` | Pool of characters used while scrambling |
| `fontSize` | `number` | `72` | Font size in pixels |
| `color` | `string` | `"#22c55e"` | Text color |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `revealDuration` | `number` | `60` | How many frames it takes for the full text to decode |
| `speed` | `number` | `1` | Multiplier for animation speed |
| `className` | `string` | — | Optional className passed to the text span |

## Use when
- A hacker, terminal, or cyberpunk aesthetic is required and the scramble-to-reveal glyph effect is on-brand.
- A short code, token, or technical label should appear as if being deciphered in real time.
- The scene needs a reveal that feels procedural and data-driven rather than designed.

## Don't use when
- The content is a human sentence or marketing copy — the glitchy scramble reads as broken text to non-technical audiences; use `typewriter` for a clean character-by-character reveal with a more legible progression.
- The tone is premium or editorial — use `focus-blur-resolve` or `blur-out-up` for atmospheric reveals without the glitch aesthetic.
- The text is long — the left-to-right lock is designed for short labels and codes; long strings extend `revealDuration` to an uncomfortable length.