Components
A text component that scrambles into gibberish and gradually decrypts to reveal the real characters when it scrolls into view.
Loading preview...
import { EncryptedText } from "@/components/ui/encrypted-text";
import React from "react";
export default function EncryptedTextDemo() {
return (
<div className="flex min-h-[220px] w-full items-center justify-center bg-background p-10">
<p className="mx-auto max-w-lg text-center text-2xl font-semibold">
<EncryptedText
text="Welcome to the Matrix, Neo."
encryptedClassName="text-muted-foreground"
revealedClassName="text-foreground"
revealDelayMs={50}
/>
</p>
</div>
);
}