Encrypted Text

text

Matrix style animated decryption scramble text with mouse hover trigger.

#text#cyberpunk#matrix#scramble

Live Interactive Preview

CYBERPUNK MATRIX ENCRYPTION

Hover to Decrypt

Component Source Code

Select language in the dropdown

EncryptedText.tsx

1'use client';
2
3import React, { useState, useEffect } from 'react';
4
5const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';
6
7export default function EncryptedText() {
8  const targetText = 'CYBERPUNK MATRIX ENCRYPTION';
9  const [displayText, setDisplayText] = useState(targetText);
10  const [isHovered, setIsHovered] = useState(false);
11
12  const triggerScramble = () => {
13    let iteration = 0;
14    const interval = setInterval(() => {
15      setDisplayText(
16        targetText
17          .split('')
18          .map((char, index) => {
19            if (char === ' ') return ' ';
20            if (index < iteration) return targetText[index];
21            return CHARS[Math.floor(Math.random() * CHARS.length)];
22          })
23          .join('')
24      );
25
26      if (iteration >= targetText.length) {
27        clearInterval(interval);
28      }
29      iteration += 1 / 2;
30    }, 30);
31  };
32
33  useEffect(() => {
34    triggerScramble();
35  }, []);
36
37  return (
38    <div
39      onMouseEnter={() => {
40        setIsHovered(true);
41        triggerScramble();
42      }}
43      onMouseLeave={() => setIsHovered(false)}
44      className="group relative flex flex-col items-center justify-center rounded-2xl border border-cyan-500/30 bg-slate-950 p-6 sm:p-8 cursor-pointer select-none shadow-[0_0_30px_rgba(6,182,212,0.15)] max-w-full"
45    >
46      <div className="text-center font-mono text-base sm:text-xl font-bold tracking-widest text-cyan-400 break-all sm:break-normal">
47        {displayText}
48      </div>
49      <span className="mt-3 rounded-full border border-cyan-500/20 bg-cyan-950/40 px-3 py-0.5 text-[10px] font-mono text-cyan-300">
50        Hover to Decrypt
51      </span>
52    </div>
53  );
54}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/EncryptedText.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import EncryptedText from '@/components/text/EncryptedText';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <EncryptedText />
7    </main>
8  );
9}