NewSmall JS · text · setInterval

Text Scramble

The label scrambles into symbols, then decodes back into place, letter by letter, left to right.

A free text scramble effect in HTML and CSS (with a few lines of JavaScript). Also known as decode text animation, hacker text effect, random letters hover or text shuffle.

Class: .CCScramble
Weight: 1.8 KB
Needs: CSS + a few lines of JS
Best for: Tech brands, headline buttons, tabs

Tune it

Every snippet on this page follows these settings.

How the Text Scramble hover effect works

Script splits each label into one span per letter and stores the real text.
On hover, every few milliseconds each letter shows a random symbol.
Letters lock back to their real character one at a time, from the left.
The label's width is held while it runs, so nothing around it jumps.

Add it to your site

Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
Add the classes. For example <button class="CCButton CCScramble">.
Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Text Scramble on button, tabs, dropdown, card.

More ways to use it

The same class on headline, badge, nav bar.

The Text Scramble code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS

.CCScramble .CCScramble-ch { display: inline-block; }
.CCScramble .CCScramble-ch.is-scrambling { color: var(--cc-accent); }

Show the JavaScript

if (!matchMedia("(prefers-reduced-motion: reduce)").matches) document.querySelectorAll(".CCScramble").forEach(function (el) {
  if (el.dataset.ccScramble) return; el.dataset.ccScramble = 1;
  var glyphs = "!<>-_\\/[]{}=+*^?#ABCDEFGHJKLMNPQRSTUVWXYZ", runs = [];
  var targets = el.matches("button, h1, h2, h3, .CCBadge") ? [el] : [].slice.call(el.querySelectorAll("h3, a, [role=tab]"));
  targets.forEach(function (t) {
    [].slice.call(t.childNodes).forEach(function (node) {
      if (node.nodeType !== 3 || !node.textContent.trim()) return;
      var text = node.textContent, box = document.createElement("span"), chars = [];
      if (!t.hasAttribute("aria-label")) t.setAttribute("aria-label", t.textContent.trim());
      box.setAttribute("aria-hidden", "true");
      text.split("").forEach(function (ch) { var s = document.createElement("span"); s.className = "CCScramble-ch"; s.textContent = ch; box.appendChild(s); chars.push(s); });
      t.replaceChild(box, node);
      runs.push(function () {
        var tick = 0, w = t.offsetWidth;
        if (t === el) { t.style.width = w + "px"; t.style.whiteSpace = "nowrap"; }
        clearInterval(t._ccScramble);
        t._ccScramble = setInterval(function () {
          tick++;
          chars.forEach(function (s, i) {
            var done = tick > 3 + i * 2 || text[i] === " ";
            s.textContent = done ? text[i] : glyphs[Math.floor(Math.random() * glyphs.length)];
            s.classList.toggle("is-scrambling", !done);
          });
          if (tick > 3 + chars.length * 2) { clearInterval(t._ccScramble); if (t === el) { t.style.width = ""; t.style.whiteSpace = ""; } }
        }, 34 / (parseFloat(getComputedStyle(el).getPropertyValue("--cc-speed")) || 1));
      });
    });
  });
  function play() { runs.forEach(function (run) { run(); }); }
  el.addEventListener("mouseenter", play);
  el.addEventListener("focusin", play);
});

Pairs well with

Avoid on the same element Howl Glitch (text), Letter Wave (text), Text Roll (text), Squiggle (text), Focus Blur (text), Flip (text).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

The real label is kept as the element's accessible name, so screen readers never hear the symbols.
Runs on keyboard focus too.
Doesn't run at all under reduced motion.

Performance

1.8 KB of code, no libraries.
Animates transforms, opacity and gradients, which browsers handle cheaply.
This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Text Scramble

What is a text scramble effect?

The label scrambles into symbols, then decodes back into place, letter by letter, left to right. Text Scramble is a free text scramble effect, also known as decode text animation or hacker text effect, that works on buttons, tab bars, dropdowns, cards and more.

How do you make a text scramble effect in CSS?

Script splits each label into one span per letter and stores the real text. On hover, every few milliseconds each letter shows a random symbol. Letters lock back to their real character one at a time, from the left. The label's width is held while it runs, so nothing around it jumps.

How do I add Text Scramble to a button?

Add the class CCScramble next to CCButton, inside an element with the CCTheme class, then include the Text Scramble CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Text Scramble need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Text Scramble?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Text Scramble accessible?

The real label is kept as the element's accessible name, so screen readers never hear the symbols. Runs on keyboard focus too. Doesn't run at all under reduced motion.

Can I use Text Scramble in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCScramble to a button or block, and paste the JavaScript into the footer code area.

Is Text Scramble free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.