Matrix Decode

Random scramble resolves left-to-right into target text

Installation

$ pnpm dlx 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}
  />
);

Props8

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

textrequiredstring
The final text the scramble resolves into
charsetstring
Pool of characters used while scrambling
Default"!@#$%^&*()_+-=<>?/\\|"
fontSizenumber
Font size in pixels
Default72
colorstring
Text color
Default"#22c55e"
fontWeightnumber
CSS font-weight
Default600
revealDurationnumber
How many frames it takes for the full text to decode
Default60
speednumber
Multiplier for animation speed
Default1
classNamestring
Optional className passed to the text span