Docs
Matrix Text
Matrix Text
Displays a beautiful Matrix Text using framer-motion.
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Generate Text code into your project.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "BuouUI!" | The text to animate with the matrix effect |
className | string | undefined | Additional CSS classes to apply to the component |
initialDelay | number | 200 | Delay in milliseconds before starting the animation |
letterAnimationDuration | number | 500 | Duration in milliseconds of each letter's animation |
letterInterval | number | 100 | Interval in milliseconds between animating each letter |
Usage
import MatrixText from "@/components/matrix-text";
export default function Demo() {
return (
<MatrixText
text="BuouUI"
initialDelay={500}
letterAnimationDuration={300}
letterInterval={150}
/>
);
}