Matrix Decode
Random scramble resolves left-to-right into target text
Installation
$ pnpm dlx shadcn@latest add @remocn/matrix-decodeUsage
// 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 |
|---|---|---|---|
textrequired | 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 |