Text Scramble

---
/**
 * TextScramble — random characters resolve into the text, left to right.
 *
 * The server HTML is the final string. On trigger, a small rAF loop swaps
 * each character for a random one until that character's lock time, then
 * writes the real one. Bound through the runtime; never runs under reduced
 * motion, so the text is simply there.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'span'> {
  /** Final text. */
  text: string;
  /** Element to render. */
  as?: HTMLTag;
  /** Milliseconds between one character locking and the next. */
  speed?: number;
  /** Characters to scramble with. */
  charset?: string;
  /** When to run. */
  trigger?: 'view' | 'load' | 'hover';
  /** Delay before the first lock, ms. */
  delay?: number;
}

const { text, as: Tag = 'span', speed = 30, charset = '!<>-_\\/[]{}—=+*^?#', trigger = 'view', delay = 0, class: className, ...rest } = Astro.props;
---

<Tag class:list={['ma-scramble', className]} data-ma-scramble data-speed={speed} data-charset={charset} data-trigger={trigger} data-delay={delay} {...rest}>
  <span class="ma-scramble__text" aria-hidden="true">{text}</span>
  <span class="ma-sr">{text}</span>
</Tag>

<style is:global>
  @layer components {
    :where(.ma-scramble__text) {
      font-variant-ligatures: none;
    }
    :where(.ma-scramble[data-running] .ma-scramble__text) {
      /* keep the box stable while glyph widths churn */
      font-variant-numeric: tabular-nums;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-scramble__text) {
        /* the script never binds; the final text is already here */
        opacity: 1;
      }
    }
  }
</style>

<script>
  import { onMount } from '../lib/runtime';

  onMount<HTMLElement>('[data-ma-scramble]', (el, { signal, reducedMotion }) => {
    if (reducedMotion) return;
    const node = el.querySelector<HTMLElement>('.ma-scramble__text');
    if (!node) return;
    const final = node.textContent ?? '';
    const chars = [...final];
    const speed = Number(el.dataset.speed ?? 30);
    const set = el.dataset.charset ?? '!<>-_\\/[]{}';
    const delay = Number(el.dataset.delay ?? 0);
    let raf = 0;
    let start = 0;
    const frame = (now: number) => {
      let out = '';
      let done = true;
      chars.forEach((c, i) => {
        if (c === ' ' || now >= start + i * speed) out += c;
        else {
          done = false;
          out += set[Math.floor(Math.random() * set.length)];
        }
      });
      node.textContent = out;
      if (done) delete el.dataset.running;
      else raf = requestAnimationFrame(frame);
    };
    const run = () => {
      cancelAnimationFrame(raf);
      start = performance.now() + delay;
      el.dataset.running = '';
      raf = requestAnimationFrame(frame);
    };
    // Torn down mid-scramble (an element persisted across a swap), it runs to the end at once: every character
    // locked, the real text back. The next bind reads its final string from the node, and read the noise instead.
    signal.addEventListener('abort', () => {
      cancelAnimationFrame(raf);
      frame(Infinity);
    });
    const trigger = el.dataset.trigger;
    if (trigger === 'hover') el.addEventListener('pointerenter', run, { signal });
    else if (trigger === 'load') run();
    else {
      const io = new IntersectionObserver(([e]) => {
        if (e!.isIntersecting) {
          run();
          io.disconnect();
        }
      }, { threshold: 0.4 });
      io.observe(el);
      signal.addEventListener('abort', () => io.disconnect());
    }
  });
</script>