Matrix Text

Animated Matrix Text

Live Preview
Open in
H
e
l
l
o
 
W
o
r
l
d
!
Motion

Installation

npm install motion

Usage

import MatrixText from "@/components/xui/matrix-text";

export function MyComponent() {
  return (
    <div className="flex flex-col gap-4">
      <MatrixText text="Hello World!" className="min-h-[200px]" />
      <MatrixText text="Matrix Effect" className="min-h-[150px]" />
    </div>
  );
}

Props

PropTypeDefaultDescription
textstring-Text to display with matrix effect
classNamestring-Additional CSS classes

Dependencies

This component requires the following packages:

  • motion (framer-motion)