import { useRef, useState } from "react"; import { FiLock } from "react-icons/fi"; import { motion } from "framer-motion"; const Example = () => { return (

); }; const TARGET_TEXT = "Encrypt data"; const CYCLES_PER_LETTER = 2; const SHUFFLE_TIME = 50; const CHARS = "!@#$%^&*():{};|,.<>/?"; const EncryptButton = () => { const intervalRef = useRef | null>(null); const [text, setText] = useState(TARGET_TEXT); const scramble = () => { let pos = 0; intervalRef.current = setInterval(() => { const scrambled = TARGET_TEXT.split("") .map((char, index) => { if (pos / CYCLES_PER_LETTER > index) { return char; } const randomCharIndex = Math.floor(Math.random() * CHARS.length); const randomChar = CHARS[randomCharIndex]; return randomChar; }) .join(""); setText(scrambled); pos++; if (pos >= TARGET_TEXT.length * CYCLES_PER_LETTER) { stopScramble(); } }, SHUFFLE_TIME); }; const stopScramble = () => { clearInterval(intervalRef.current || undefined); setText(TARGET_TEXT); }; return (

{text}

); }; export default Example;

Faqs

Basic Faq