Encrypted Text

"use client";
import { EncryptedText } from "@/lab/aceternity/ui/encrypted-text";
import React, { useState } from "react";
import { Fit } from "./_fit";

export default function EncryptedTextDemoSecond() {
  // Hovering the stage replays the decryption.
  const [run, setRun] = useState(0);
  return (
    <div className="h-full w-full" onPointerEnter={() => setRun((r) => r + 1)}>
      <Fit width={460} height={160} max={2}>
        <div className="flex h-full items-center justify-center">
          <p className="mx-auto max-w-lg text-left text-xl font-mono">
            <EncryptedText
              key={run}
              text="Welcome to the Matrix, Neo."
              encryptedClassName="text-neutral-500"
              revealedClassName="dark:text-white text-black"
              revealDelayMs={50}
            />
          </p>
        </div>
      </Fit>
    </div>
  );
}