Matrix Decode

Random scramble resolves left-to-right into target text

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

PropTypeDefaultDescription
textrequired
stringThe final text the scramble resolves into
charset
string"!@#$%^&*()_+-=<>?/\\|"Pool of characters used while scrambling
fontSize
number72Font size in pixels
color
string"#22c55e"Text color
fontWeight
number600CSS font-weight
revealDuration
number60How many frames it takes for the full text to decode
speed
number1Multiplier for animation speed
className
stringOptional className passed to the text span