Matrix Decode · remocn

A typography primitive that starts as a stream of random symbols and decodes character by character into the target text. Perfect for DevTools, cybersecurity, and AI reveal moments.

Installation

$ pnpm dlx shadcn@latest add @remocn/matrix-decode

Usage

// 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.

Notes

Deterministic randomness

Uses Remotion's random(seed) keyed on character index and frame, so scrambled glyphs are stable across renders — no flicker between frames.