SAPTARSHI-coder · SAPTARSHI-coder · Jun 22, 2026 · Jun 22, 2026
@@ -0,0 +1,26 @@
+# ease-text-scramble – Text Scramble Effect
+
+A text animation where characters randomly cycle through symbols and letters before resolving into the final text. Gives a hacker / decoder aesthetic.
+
+## EaseMotion classes used
+- **Layout:** ease-container, ease-flex, ease-items-center, ease-justify-center, ease-min-h-screen
+- **Background:** ease-bg-gray-900, ease-bg-black
+- **Typography:** ease-text-3xl, ease-font-bold, ease-text-white, ease-text-gray-400, ease-text-2xl, ease-font-mono, ease-text-green-400, ease-text-sm, ease-text-gray-500
+- **Spacing:** ease-mb-4, ease-mb-8, ease-mt-6, ease-mt-8, ease-p-6
+- **Components:** ease-btn, ease-btn-primary
+- **Hover Effects:** ease-hover-scale-105
+- **Animation:** ease-fade-in, ease-delay-200, ease-delay-500, ease-transition
+- **Helpers:** ease-inline-block, ease-rounded-xl
+
+## How it works
+- JavaScript tracks the elapsed time and the desired final text.
+- Each frame, characters that have not yet "settled" are replaced with random characters from a predefined set.
+- Once the progress reaches a character's position, it reveals the correct letter and stays fixed.
+- The animation runs for 2 seconds by default; a button lets you replay it.
+- The CSS provides a dark, green-on-black terminal style.
+- The effect respects prefers-reduced-motion by skipping the scramble.
+
+## How to use
+1. Copy the HTML, CSS, and JS into your project.
+2. Ensure the path to easemotion.css is correct.
+3. Open demo.html in any modern browser.
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ease-text-scramble – Text Scramble Effect</title>
+  <link rel="stylesheet" href="../../core/easemotion.css">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body class="ease-bg-gray-900 ease-min-h-screen ease-flex ease-items-center ease-justify-center">
+
+  <div class="ease-container ease-text-center">
+    <h1 class="ease-text-3xl ease-font-bold ease-text-white ease-mb-4 ease-fade-in">
+      Text Scramble
+    </h1>
+    <p class="ease-text-gray-400 ease-mb-8 ease-fade-in ease-delay-200">
+      Characters randomly cycle before settling — a hacker / decoder aesthetic.
+    </p>
+
+    <div class="scramble-demo ease-text-2xl ease-font-mono ease-text-green-400 ease-bg-black ease-p-6 ease-rounded-xl ease-inline-block">
+      <span id="scramble-target">Hello, World!</span>
+    </div>
+
+    <button id="scramble-btn" class="ease-btn ease-btn-primary ease-hover-scale-105 ease-transition ease-mt-6">
+      Scramble Again
+    </button>
+
+    <p class="ease-text-sm ease-text-gray-500 ease-mt-8 ease-fade-in ease-delay-500">
+      Minimal JS (~15 lines) drives the effect; CSS handles the green-on-black style.
+    </p>
+  </div>
+
+  <script>
+    const targetEl = document.getElementById('scramble-target');
+    const btn = document.getElementById('scramble-btn');
+    const originalText = targetEl.textContent;
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?';
+
+    function scramble(element, finalText, duration = 2000) {
+      const startTime = performance.now();
+      const length = finalText.length;
+
+      function tick() {
+        const elapsed = performance.now() - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        let result = '';
+
+        for (let i = 0; i < length; i++) {
+          if (i < progress * length) {
+            result += finalText[i];
+          } else {
+            result += chars[Math.floor(Math.random() * chars.length)];
+          }
+        }
+
+        element.textContent = result;
+
+        if (progress < 1) {
+          requestAnimationFrame(tick);
+        }
+      }
+
+      tick();
+    }
+
+    scramble(targetEl, originalText, 2000);
+
+    btn.addEventListener('click', () => {
+      scramble(targetEl, originalText, 2000);
+    });
+  </script>
+
+</body>
+</html>
@@ -0,0 +1,24 @@
+/* ============================================================
+   ease-text-scramble – Green-on-black hacker style
+   Minimal custom CSS; the core animation is in JS
+   ============================================================ */
+
+/* Inline block for the scrambled text container */
+.ease-inline-block {
+  display: inline-block;
+}
+
+/* Additional styling for the scrambled text area */
+.scramble-demo {
+  font-size: 1.8rem;
+  letter-spacing: 0.05em;
+  min-width: 12em;
+  text-align: center;
+}
+
+/* Accessibility: respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .scramble-demo {
+    animation: none;
+  }
+}