Hover Decrypt Text

21:T1121,--- interface Props { text?: string; duration?: number; animateOnHover?: boolean; startOnView?: boolean; } const { text = "Hover Me", duration = 800, animateOnHover = true, startOnView = false } = Astro.props; const chars = text.split(""); --- { chars.map((char) => char === " " ? ( 22:Tc49f,

---
interface Props {
  text?: string;
  duration?: number;
  animateOnHover?: boolean;
  startOnView?: boolean;
}
const { text = "Hover Me", duration = 800, animateOnHover = true, startOnView = false } = Astro.props;
const chars = text.split("");
---

<span
  class="hover-decrypt-text"
  data-hover-decrypt-text
  data-duration={duration}
  data-animate-on-hover={animateOnHover ? "true" : "false"}
  data-start-on-view={startOnView ? "true" : "false"}
  tabindex={animateOnHover ? 0 : undefined}
  aria-label={text}
>
  {
    chars.map((char) =>
      char === " " ? (
        <span aria-hidden="true" class="hdt-space" />
      ) : (
        <span aria-hidden="true" class="hdt-char" data-hdt-char data-final={char}>
          {char}
        </span>
      ),
    )
  }
</span>

<style>
  .hover-decrypt-text {
    position: relative;
    display: inline-block;
    cursor: default;
    user-select: none;
    white-space: pre;
    border-radius: 2px;
    color: currentColor;
    font: 700 1.875rem/1.2 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    letter-spacing: 0.02em;
    outline: none;
  }
  .hover-decrypt-text:focus-visible {
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.7);
  }
  .hdt-space {
    display: inline-block;
    width: 0.55em;
  }
  .hover-decrypt-text :global(.hdt-char) {
    display: inline-block;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
    transform: scale(1.06);
    transition:
      color 150ms ease-out,
      transform 150ms ease-out,
      text-shadow 150ms ease-out;
  }
  .hover-decrypt-text :global(.hdt-char--locked) {
    color: currentColor;
    text-shadow: none;
    transform: scale(1);
  }
</style>

<script>
  const SCRAMBLE_POOL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*+=?/<>";
  /** Pause before the unattended first play, so the noise reads before it resolves. */
  const SETTLE_DELAY = 260;

  function randomGlyph(): string {
    return SCRAMBLE_POOL[Math.floor(Math.random() * SCRAMBLE_POOL.length)];
  }

  function setup(root: HTMLElement) {
    const letters = Array.from(root.querySelectorAll<HTMLElement>("[data-hdt-char]"));
    const duration = Number(root.dataset.duration ?? "800");
    const animateOnHover = root.dataset.animateOnHover === "true";
    const startOnView = root.dataset.startOnView === "true";
    const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;

    let frame: number | null = null;
    let played = false;

    // Show noise immediately, before the first attended or unattended decode runs.
    function paint(locked: number) {
      letters.forEach((el, order) => {
        const final = el.dataset.final ?? "";
        if (order < locked) {
          el.textContent = final;
          el.classList.add("hdt-char--locked");
        } else {
          el.textContent = randomGlyph();
          el.classList.remove("hdt-char--locked");
        }
      });
    }

    function play() {
      if (frame !== null) {
        cancelAnimationFrame(frame);
        frame = null;
      }
      const total = letters.length;
      if (reducedMotion || total === 0) {
        paint(total);
        return;
      }
      const start = performance.now();
      const step = (now: number) => {
        const elapsed = now - start;
        const locked = Math.min(total, Math.floor((elapsed / duration) * total));
        paint(locked);
        frame = locked < total ? requestAnimationFrame(step) : null;
      };
      frame = requestAnimationFrame(step);
    }

    function scheduleFirstPlay() {
      if (played) return;
      played = true;
      window.setTimeout(play, SETTLE_DELAY);
    }

    if (!reducedMotion) paint(0);

    if (startOnView) {
      const observer = new IntersectionObserver(
        (entries) => {
          if (entries[0]?.isIntersecting && !played) {
            played = true;
            play();
            observer.disconnect();
          }
        },
        { threshold: 0.4 },
      );
      observer.observe(root);
    } else {
      scheduleFirstPlay();
    }

    root.addEventListener("mouseenter", () => {
      if (!animateOnHover) return;
      play();
    });
    root.addEventListener("focus", () => {
      if (!animateOnHover) return;
      play();
    });
  }

  document.querySelectorAll<HTMLElement>("[data-hover-decrypt-text]").forEach(setup);
</script>

23:T19c1, Hover Decrypt Text 24:T128ef,

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hover Decrypt Text</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        background: #0b0d10;
        font-family: system-ui, sans-serif;
      }
      .hover-decrypt-text {
        position: relative;
        display: inline-block;
        cursor: default;
        user-select: none;
        white-space: pre;
        border-radius: 2px;
        color: #fff;
        font: 700 1.875rem/1.2 "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        letter-spacing: 0.02em;
        outline: none;
      }
      .hover-decrypt-text:focus-visible {
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.7);
      }
      .hdt-space {
        display: inline-block;
        width: 0.55em;
      }
      .hdt-char {
        display: inline-block;
        color: #38bdf8;
        text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
        transform: scale(1.06);
        transition:
          color 150ms ease-out,
          transform 150ms ease-out,
          text-shadow 150ms ease-out;
      }
      .hdt-char--locked {
        color: #fff;
        text-shadow: none;
        transform: scale(1);
      }
    </style>
  </head>
  <body>
    <span class="hover-decrypt-text" data-hover-decrypt-text data-duration="800" data-animate-on-hover="true" data-start-on-view="false" tabindex="0" aria-label="Hover Me">
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="H">H</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="o">o</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="v">v</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="e">e</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="r">r</span>
      <span aria-hidden="true" class="hdt-space"></span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="M">M</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="e">e</span>
    </span>

    <span class="hover-decrypt-text" data-hover-decrypt-text data-duration="1200" data-animate-on-hover="true" data-start-on-view="false" tabindex="0" aria-label="Access Granted">
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="A">A</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="c">c</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="c">c</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="e">e</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="s">s</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="s">s</span>
      <span aria-hidden="true" class="hdt-space"></span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="G">G</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="r">r</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="a">a</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="n">n</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="t">t</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="e">e</span>
      <span aria-hidden="true" class="hdt-char" data-hdt-char data-final="d">d</span>
    </span>

    <script>
      var SCRAMBLE_POOL = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*+=?/<>";
      var SETTLE_DELAY = 260;

      function randomGlyph() {
        return SCRAMBLE_POOL[Math.floor(Math.random() * SCRAMBLE_POOL.length)];
      }

      function setup(root) {
        var letters = Array.prototype.slice.call(root.querySelectorAll("[data-hdt-char]"));
        var duration = Number(root.getAttribute("data-duration") || "800");
        var animateOnHover = root.getAttribute("data-animate-on-hover") === "true";
        var startOnView = root.getAttribute("data-start-on-view") === "true";
        var reducedMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

        var frame = null;
        var played = false;

        function paint(locked) {
          letters.forEach(function (el, order) {
            var final = el.getAttribute("data-final") || "";
            if (order < locked) {
              el.textContent = final;
              el.classList.add("hdt-char--locked");
            } else {
              el.textContent = randomGlyph();
              el.classList.remove("hdt-char--locked");
            }
          });
        }

        function play() {
          if (frame !== null) {
            cancelAnimationFrame(frame);
            frame = null;
          }
          var total = letters.length;
          if (reducedMotion || total === 0) {
            paint(total);
            return;
          }
          var start = performance.now();
          function step(now) {
            var elapsed = now - start;
            var locked = Math.min(total, Math.floor((elapsed / duration) * total));
            paint(locked);
            frame = locked < total ? requestAnimationFrame(step) : null;
          }
          frame = requestAnimationFrame(step);
        }

        function scheduleFirstPlay() {
          if (played) return;
          played = true;
          window.setTimeout(play, SETTLE_DELAY);
        }

        if (!reducedMotion) paint(0);

        if (startOnView && "IntersectionObserver" in window) {
          var observer = new IntersectionObserver(
            function (entries) {
              if (entries[0] && entries[0].isIntersecting && !played) {
                played = true;
                play();
                observer.disconnect();
              }
            },
            { threshold: 0.4 },
          );
          observer.observe(root);
        } else {
          scheduleFirstPlay();
        }

        root.addEventListener("mouseenter", function () {
          if (!animateOnHover) return;
          play();
        });
        root.addEventListener("focus", function () {
          if (!animateOnHover) return;
          play();
        });
      }

      Array.prototype.slice.call(document.querySelectorAll("[data-hover-decrypt-text]")).forEach(setup);
    </script>
  </body>
</html>

Nearby