Matrix Text

​

Installation

npx shadcn@latest add @kokonutui/matrix-text

​

Usage

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

export default function Example() {
  return (
    <MatrixText 
      text="Hello World!" 
      className="min-h-[200px]"
    />
  );
}

​

Props

​

Features

• Binary Transition: Each character cycles through 1s and 0s
• Sequential Animation: Letters reveal one by one
• Green Glow: Matrix-style green text with shadow
• Monospace Font: Uses monospace for authentic digital look
• Tabular Numbers: Consistent character width

​

How It Works

1. Animation starts after initial delay
2. Each letter displays random binary characters (0 or 1)
3. After letterAnimationDuration, reveals actual character
4. Moves to next letter after letterInterval
5. Active letters glow green, revealed letters return to normal color

​

Customization

​

Fast Animation

<MatrixText 
  text="Quick Reveal" 
  letterAnimationDuration={300}
  letterInterval={50}
  initialDelay={100}
/>

​

Slow Dramatic Effect

<MatrixText 
  text="Dramatic" 
  letterAnimationDuration={800}
  letterInterval={200}
  initialDelay={500}
/>

​

Styling

<MatrixText 
  text="Custom Style" 
  className="min-h-[300px] bg-black p-8"
/>

​

Dependencies

• motion/react - Animation library
• react - Hooks (useState, useEffect, useCallback, useMemo)
• @/lib/utils - cn utility function