MM

Command Palette

Search for a command to run...

0
Components
PreviousNext

Encrypted Text

A Matrix-like text reveal effect where characters scramble before settling.

Loading...
import { EncryptedText } from "@/components/ui/encrypted-text";
import React from "react";
 
export function EncryptedTextDemoSecond() {
    return (
        <p className="mx-auto max-w-lg py-10 text-left">
            <EncryptedText
                text="Welcome to the Matrix, Neo."
                encryptedClassName="text-neutral-500"
                revealedClassName="dark:text-white text-black"
                revealDelayMs={50}
            />
        </p>
    );
}

Usage

import { EncryptedText } from "@/components/ui/encrypted-text";
<EncryptedText
  text="Welcome to the Matrix, Neo."
  encryptedClassName="text-neutral-500"
  revealedClassName="dark:text-white text-black"
  revealDelayMs={50}
/>