Cyberpunk cipher text decryptor effect with animated random glyph scrambler and sequential character resolution.
"use client";
import React, { useState } from "react";
import CyberDecryptedText from "@/components/ui/cyber-decrypted-text";
export default function CyberDecryptedTextDemo() {
const [key, setKey] = useState(0);
return (
<div className="flex min-h-[400px] w-full flex-col items-center justify-center bg-zinc-950 p-8 text-center">
<div className="flex flex-col items-center gap-6 rounded-2xl border border-cyan-500/20 bg-zinc-900/60 p-8 backdrop-blur-xl shadow-2xl max-w-lg">
<span className="font-mono text-[10px] tracking-widest text-cyan-400 uppercase bg-cyan-950/60 border border-cyan-500/30 px-3 py-1 rounded-full">
Cipher Protocol v2.6
</span>
<div className="space-y-2">
<div className="text-3xl sm:text-4xl font-black text-white">
<CyberDecryptedText
key={key}
text="QUANTUM MAINFRAME"
speed={40}
encryptedClassName="text-cyan-400 opacity-90 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]"
animateOn="hover"
/>
</div>
<p className="text-sm text-zinc-400">
Hover over the text to decrypt cybernetic glyph matrices into plain characters.
</p>
</div>
<button
onClick={() => setKey((k) => k + 1)}
className="rounded-lg bg-cyan-500/10 border border-cyan-500/30 px-4 py-2 text-xs font-mono font-medium text-cyan-300 hover:bg-cyan-500/20 transition-all"
>
Re-trigger Decryption
</button>
</div>
</div>
);
}