Decrypted Text

Text 24

About

Here is simple decrypted text animation

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Decrypted Text to your project and fits it to your theme.

Code

How Decrypted Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

const DemoDecryptedText = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center p-4 bg-white dark:bg-gray-900">
      <DecryptedText
        text="Customize me"
        speed={100}
        maxIterations={20}
        characters="ABCD1234!?"
        className="text-blue-600 dark:text-green-400"
        parentClassName="font-mono text-5xl md:text-6xl lg:text-7xl text-gray-800 dark:text-white"
        encryptedClassName="text-red-600 dark:text-yellow-600"
        animateOn="hover"
      />
    </div>
  );
};

export { DemoDecryptedText };