Decrypted Text

A hacker-style text decryption matrix effect that scrambles text before revealing it. Can trigger on hover or when scrolled into view.

Installation

CLI

npx @modus-ui/cli add decrypted-text

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/decrypted-text.tsx.
3. Paste the code.

Usage

import { DecryptedText } from "@/components/ui/decrypted-text";

export default function Example() {
  return (
    <DecryptedText
      text="Hover over me to decrypt"
      animateOn="hover"
      speed={40}
      className="font-mono text-4xl"
    />
  );
}

Props