All Components

Encrypt Button

Learn how to create an engaging encryption button with dynamic text scrambling animations! This guide demonstrates how to build an interactive button that reveals an encrypted key with a satisfying scramble effect using Framer Motion and Tailwind CSS.

How It Works

The EncryptButton component creates an interactive experience where:

  • Clicking the button triggers a text scramble animation
  • The encrypted key is revealed through a series of random character transitions
  • A lock/unlock icon smoothly transitions to indicate the state
  • The animation automatically resets after 5 seconds

Let's begin by installing the required dependencies:

npm install framer-motion

npm install lucide-react

"use client";

import { useRef, useState } from "react";
import { Lock, Unlock } from "lucide-react";
import { AnimatePresence, motion } from "framer-motion";

const TARGET_TEXT = "A99ERW983HBSGS6373";
const CYCLES_PER_LETTER = 2;
const SHUFFLE_TIME = 50;

const CHARS = "!@#$%^&*():{};|,.<>/?";

const EncryptButton = () => {
const intervalRef = useRef<NodeJS.Timeout | null>(null);

const [showKey, setShowKey] = useState<boolean>(false);
const [text, setText] = useState(TARGET_TEXT);

const scramble = () => {
  setShowKey(true);

  setTimeout(() => setShowKey(false), 5000);

  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 (
  <button
    className="w-full max-w-[260px] flex justify-center group rounded-xl border border-neutral-500 ring-1 ring-transparent bg-neutral-700 px-4 py-2.5 md:py-3 text-sm md:text-base font-mono font-medium uppercase text-white hover:ring-2 hover:ring-orange-500 duration-300"
    onClick={scramble}
  >
    <div className="flex items-center space-x-2">
      <AnimatePresence mode="wait" initial={false}>
        {showKey ? (
          <motion.span
            key="unlock"
            initial={{ opacity: 0.5 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0.5 }}
          >
            <Unlock className="size-5 md:size-6" />
          </motion.span>
        ) : (
          <motion.span
            key="lock"
            initial={{ opacity: 0.5 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0.5 }}
          >
            <Lock className="size-5 md:size-6" />
          </motion.span>
        )}
      </AnimatePresence>
      <p>{showKey ? text : "Show Encrypted Key"}</p>
    </div>
  </button>
);
};

export default EncryptButton;

This implementation creates a fire-like button animation that responds to cursor movement dynamically. It's a perfect way to enhance UI interactions in modern web applications.

Happy Coding 👋

Want to Learn How to Build These Components Yourself?

We have step-by-step tutorials for every component to help you create stunning interfaces with ease.

Tutorials on YouTube