Interactive Matrix digital rain decoding and revealing text effect.
Installation
Usage
import { MatrixText } from "viora-ui";import { MatrixText } from "viora-ui";
export default function MatrixTextDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<MatrixText />
</div>
);
}API Reference
LetterState
| Prop | Type | Default | Description |
|---|---|---|---|
| char | string | - | Configuration for char. |
| isMatrix | boolean | false | Configuration for isMatrix. |
| isSpace | boolean | false | Configuration for isSpace. |
MatrixText
| Prop | Type | Default | Description |
|---|---|---|---|
| text? | string | - | Configuration for text. |
| className? | string | "" | Additional CSS classes for custom styling. |
| initialDelay? | number | - | Configuration for initialDelay. |
| letterAnimationDuration? | number | - | Configuration for letterAnimationDuration. |
| letterInterval? | number | - | Configuration for letterInterval. |
Built by Otis
Last updated: 9/13/2026