Character text variants

Build "Character text variants" for my site using the Enrichr Library element at https://enrichr.dev/elements/character-text-variants.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/character-text-variants.json (markup, CSS, JavaScript, parameters).
Requirements: vanilla JavaScript and CSS, no new dependencies; keep the behaviour of the source unchanged; respect prefers-reduced-motion; work on touch screens; keep it accessible.

Settings:
- variant: scramble
- speed: 1
- size: 44
- loop: 3
- text: Enrichr turns any site / into a library of effects / you can use today.
- accent: #e6ff55

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and scrolling stays smooth.

<div class="ef-ctv">
  <div class="ef-ctv__wrap">
    <div class="ef-ctv__top">
      <div class="ef-ctv__vars" role="group" aria-label="Character animation variant"></div>
      <button class="ef-ctv__replay" type="button">Replay</button>
    </div>
    <div class="ef-ctv__stage">
      <p class="ef-ctv__sr"></p>
      <div class="ef-ctv__text" aria-hidden="true"><div class="ef-ctv__roll"></div></div>
    </div>
  </div>
</div>

/* Enrichr Library · https://enrichr.dev */
/* Adapted from https://github.com/codrops/TextCharacterAnimations (MIT) — Copyright (c) 2009 - 2026 [Codrops](https://codrops.com) */
.ef-ctv { width: 100%; }
.ef-ctv__wrap { --ef-acc: #e6ff55; box-sizing: border-box; width: 100%; min-height: 18rem; padding: 1rem 1.1rem 1.2rem; border-radius: 1rem; display: flex; flex-direction: column; gap: 0.9rem; background: #0c1e18; color: #fbf8f1; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ef-ctv__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ef-ctv__vars { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ef-ctv__vars button, .ef-ctv__replay { font: inherit; font-size: 0.68rem; font-weight: 600; line-height: 1; padding: 0.4rem 0.58rem; border-radius: 999px; border: 1px solid rgba(251, 248, 241, 0.3); background: transparent; color: #fbf8f1; cursor: pointer; transition: background 160ms, color 160ms, border-color 160ms; }
.ef-ctv__vars button:hover, .ef-ctv__replay:hover { border-color: var(--ef-acc); }
.ef-ctv__vars button[aria-pressed="true"] { background: var(--ef-acc); border-color: var(--ef-acc); color: #0c1e18; }
.ef-ctv__replay { margin-left: auto; color: var(--ef-acc); border-color: transparent; padding-inline: 0.5rem; }
.ef-ctv__replay:disabled { opacity: 0.35; cursor: default; }
.ef-ctv__vars button:focus-visible, .ef-ctv__replay:focus-visible { outline: 2px solid var(--ef-acc); outline-offset: 2px; }
.ef-ctv__stage { position: relative; flex: 1; display: flex; align-items: center; min-height: 8rem; padding: 0 0.3rem; }
.ef-ctv__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ef-ctv__text { position: relative; width: 100%; overflow: hidden; font-size: 28px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.ef-ctv__l { position: relative; width: max-content; white-space: nowrap; }
.ef-ctv__w { display: inline-block; }
.ef-ctv__c { display: inline-block; white-space: pre; }
.ef-ctv__fx { position: absolute; inset: 0; pointer-events: none; }
.ef-ctv__typer { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; opacity: 0; will-change: transform; }
.ef-ctv__guess { color: var(--ef-acc); opacity: 0.5; white-space: pre; }
.ef-ctv__cursor { display: block; width: 0.5em; height: 1.05em; margin-left: 0.04em; background: var(--ef-acc); }
.ef-ctv__caret { position: absolute; left: 0; top: 0; width: 2px; height: 1.2em; margin-top: 0.08em; background: var(--ef-acc); opacity: 0; will-change: transform; }
.ef-ctv__bar { position: absolute; border-radius: 2px; background: var(--ef-acc); transform: scaleY(0.06); will-change: transform; }
.ef-ctv__c.is-hl, .ef-ctv__c.is-mark, .ef-ctv__text[data-v="captions"] .ef-ctv__c { color: color-mix(in srgb, var(--ef-acc) calc(var(--m, 0) * 100%), currentColor); }
.ef-ctv__text[data-v="find"] .ef-ctv__c { border-radius: 0.12em; background: rgba(var(--ef-acc-rgb, 230, 255, 85), var(--h, 0)); }

// Enrichr Library · https://enrichr.dev
// Adapted from https://github.com/codrops/TextCharacterAnimations (MIT) — Copyright (c) 2009 - 2026 [Codrops](https://codrops.com)
// Character text variants: a short text is split into words and characters, then played back by one of six typing-style effects chosen with
// the buttons: Scramble (a cursor typing with guesses), Find all (matches light up by letter), Speed reader (words flash at one point and fly
// home), Multi-cursor (a caret in every word typing together), Live captions (bursts that roll up) and Voice note (a waveform turning to text).
// Every variant is a pure function of time, drawn from one rAF loop. No GSAP or SplitText. Reduced motion shows the finished text at once.
// The animated letters are hidden from assistive tech; a plain copy of the text is read instead.
// mount(root, { background, accent, text ("a / b / c" = lines), variant, speed (0.4-2.5), size (max px), loop (seconds before replay, 0 = off) })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var wrap = root.querySelector(".ef-ctv__wrap");
  var varsEl = root.querySelector(".ef-ctv__vars");
  var replayBtn = root.querySelector(".ef-ctv__replay");
  var stage = root.querySelector(".ef-ctv__stage");
  var sr = root.querySelector(".ef-ctv__sr");
  var textEl = root.querySelector(".ef-ctv__text");
  var roll = root.querySelector(".ef-ctv__roll");
  var VARS = [["scramble", "Scramble"], ["find", "Find all"], ["reader", "Speed reader"], ["multi", "Multi-cursor"], ["captions", "Live captions"], ["voice", "Voice note"]];
  var EXTRA = { reader: 6.4 };
  var GLYPHS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789/<>=+*";
  var ORDER = "etaoinshrdlucmfwypvbgkjqxz";
  var LETTER = /[A-Za-z0-9À-ɏ]/;
  var opts = {}, lines = [], words = [], chars = [], fs = 16, cur = null, t0 = 0, tNow = 0, raf = 0, timer = 0, ro = null, lastW = 0, btns = {}, offs = [];
  var built = "", sized = "";

  function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
  function ease3(k) { return 1 - Math.pow(1 - k, 3); }
  function mk(tag, cls) { var e = document.createElement(tag); e.className = cls; return e; }
  function rng(seed) { return function () { seed |= 0; seed = seed + 0x6D2B79F5 | 0; var t = Math.imul(seed ^ seed >>> 15, 1 | seed); t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t; return ((t ^ t >>> 14) >>> 0) / 4294967296; }; }
  function hash(n) { n = Math.sin(n * 127.1) * 43758.5453; return n - Math.floor(n); }
  function hexRgb(h) { var m = /^#?([0-9a-f]{6})$/i.exec(h || ""); if (!m) return "230,255,85"; var n = parseInt(m[1], 16); return (n >> 16) + "," + (n >> 8 & 255) + "," + (n & 255); }

  function buildText() {
    roll.textContent = ""; lines = []; words = []; chars = [];
    opts.text.split("/").map(function (s) { return s.trim(); }).filter(Boolean).slice(0, 4).forEach(function (s) {
      var l = mk("div", "ef-ctv__l"), fx = mk("div", "ef-ctv__fx");
      var L = { el: l, fx: fx, words: [], chars: [], w: 0, h: 0 };
      fx.setAttribute("aria-hidden", "true");
      s.split(/\s+/).forEach(function (wd, wi) {
        if (wi) l.appendChild(document.createTextNode(" "));
        var w = mk("span", "ef-ctv__w"), W = { el: w, chars: [], line: L };
        Array.from(wd).forEach(function (ch) {
          var c = mk("span", "ef-ctv__c"); c.textContent = ch; w.appendChild(c);
          var C = { el: c, word: W, line: L, ch: ch, x: 0, y: 0, w: 0 };
          W.chars.push(C); L.chars.push(C); chars.push(C);
        });
        l.appendChild(w); L.words.push(W); words.push(W);
      });
      l.appendChild(fx); roll.appendChild(l); lines.push(L);
    });
    sr.textContent = lines.map(function (L) { return L.words.map(function (W) { return W.chars.map(function (C) { return C.ch; }).join(""); }).join(" "); }).join(" ");
    built = opts.text;
  }
  function fit() {
    var avail = stage.clientWidth - 14;
    if (avail <= 0 || !lines.length) return false;
    textEl.style.fontSize = "100px";
    var maxW = 0;
    lines.forEach(function (L) { maxW = Math.max(maxW, L.el.offsetWidth); });
    fs = clamp(avail / (maxW / 100 + (EXTRA[opts.variant] || 0)), 11, opts.size);
    textEl.style.fontSize = fs.toFixed(2) + "px";
    return true;
  }
  function resetStyles() {
    chars.forEach(function (C) { C.el.style.cssText = ""; C.el.classList.remove("is-mark"); });
    words.forEach(function (W) { W.el.style.cssText = ""; });
    lines.forEach(function (L) { L.fx.textContent = ""; });
    roll.style.transform = "";
  }
  function measure() {
    resetStyles();
    lines.forEach(function (L) {
      var lr = L.el.getBoundingClientRect();
      L.w = L.el.offsetWidth; L.h = L.el.offsetHeight;
      L.chars.forEach(function (C) { var r = C.el.getBoundingClientRect(); C.x = r.left - lr.left; C.y = r.top - lr.top; C.w = r.width; });
    });
    textEl.style.height = (lines.length * (lines[0] ? lines[0].h : 0)) + "px";
  }

  // ---- variants: each returns { dur, render(t) }; t >= 1e8 renders the finished text ----
  function mkScramble() {
    var LET = 0.035, SH = 0.05, GN = 3, FADE = 4, ST = 0.18, BL = 0.25, NB = 2, dur = 0, info = [];
    lines.forEach(function (L, li) {
      var typer = mk("span", "ef-ctv__typer"), g = mk("span", "ef-ctv__guess"), cu = mk("span", "ef-ctv__cursor");
      typer.appendChild(g); typer.appendChild(cu); L.fx.appendChild(typer);
      var n = L.chars.length, start = li * ST, cend = start + n * LET;
      info.push({ L: L, li: li, typer: typer, g: g, cu: cu, n: n, start: start, cend: cend });
      dur = Math.max(dur, cend + FADE * LET + BL * (2 * NB + 1));
    });
    return { dur: dur, render: function (t) {
      var done = t >= 1e8;
      info.forEach(function (f) {
        var head = (t - f.start) / LET;
        f.L.chars.forEach(function (C, i) { C.el.style.opacity = done ? 1 : clamp((head - i) / FADE, 0, 1).toFixed(3); });
        var phase = Math.floor((t - f.cend) / BL), show = !done && t >= f.start && phase < 2 * NB + 1;
        f.typer.style.opacity = show ? 1 : 0;
        if (!show) return;
        var i = clamp(Math.floor(head), 0, f.n), c = f.L.chars[Math.min(i, f.n - 1)];
        var x = i < f.n ? c.x : c.x + c.w;
        f.typer.style.transform = "translate(" + x.toFixed(1) + "px," + c.y.toFixed(1) + "px)";
        var cnt = clamp(f.n - i, 0, GN), gl = "", k, idx = Math.floor(t / SH);
        for (k = 0; k < cnt; k++) gl += GLYPHS.charAt(Math.floor(hash(idx * 7.3 + k * 3.1 + f.li * 31) * GLYPHS.length));
        f.g.textContent = gl;
        f.cu.style.opacity = t > f.cend && phase % 2 === 1 ? 0 : 1;
      });
    } };
  }
  function mkFind() {
    var FIRST = 0.12, LAST = 0.04, SCAN = 0.006, HOLD = 0.08, FADE = 0.35, map = {}, order = [], searches = [], tt = 0, dur = 0;
    chars.forEach(function (C) { var k = C.ch.toLowerCase(); (map[k] = map[k] || []).push(C); });
    for (var k in map) order.push(map[k]);
    var rank = function (a) { var i = ORDER.indexOf(a[0].ch.toLowerCase()); return i < 0 ? ORDER.length : i; };
    order.sort(function (a, b) { return b.length - a.length || rank(a) - rank(b); });
    order.forEach(function (grp, si) {
      var pace = FIRST + (LAST - FIRST) * (order.length > 1 ? si / (order.length - 1) : 1);
      grp.forEach(function (C, j) { searches.push({ C: C, at: tt + j * SCAN }); });
      dur = Math.max(dur, tt + grp.length * SCAN + HOLD + FADE);
      tt += pace;
    });
    return { dur: Math.max(dur, tt), render: function (t) {
      var done = t >= 1e8;
      searches.forEach(function (s) {
        var tm = t - s.at, st = s.C.el.style;
        if (!done && tm < 0) { st.opacity = 0; st.removeProperty("--h"); st.color = ""; return; }
        st.opacity = 1;
        var h = done ? 0 : 1 - clamp((tm - HOLD) / FADE, 0, 1);
        st.setProperty("--h", h.toFixed(3));
        st.color = h > 0.45 ? "#0c1e18" : "";
      });
    } };
  }
  function mkReader() {
    var HOLD = 0.06, LT = 0.014, FLY = 0.45, LS = 0.3, xr = 0, dur = 0, items = [];
    lines.forEach(function (L) { xr = Math.max(xr, L.w); });
    xr += 1.2 * fs;
    lines.forEach(function (L, li) {
      var s = li * LS;
      L.words.forEach(function (W) {
        var cs = W.chars.filter(function (C) { return LETTER.test(C.ch); }), use = cs.length ? cs : W.chars;
        var n = use.length, ix = n < 2 ? 0 : n < 6 ? 1 : n < 10 ? 2 : n < 14 ? 3 : 4, mark = use[Math.min(ix, n - 1)];
        mark.el.classList.add("is-mark");
        var stay = HOLD + n * LT;
        items.push({ W: W, mark: mark, dx: xr - (mark.x + mark.w / 2), s0: s, s1: s + stay });
        s += stay; dur = Math.max(dur, s + FLY);
      });
    });
    return { dur: dur, render: function (t) {
      items.forEach(function (it) {
        var st = it.W.el.style;
        if (t < it.s0) { st.opacity = 0; return; }
        st.opacity = 1;
        var x = it.dx, m = 1;
        if (t >= it.s1) { var e = ease3(clamp((t - it.s1) / FLY, 0, 1)); x = it.dx * (1 - e); m = 1 - e; }
        st.transform = "translateX(" + x.toFixed(1) + "px)";
        it.mark.el.style.setProperty("--m", m.toFixed(3));
      });
    } };
  }
  function mkMulti() {
    var R = rng(7), n = words.length, land = [], keys = [], tk, i, items = [], last = 0, dur = 0;
    for (i = 0; i < n; i++) land.push(0.15 + i * 0.075);
    tk = land[0] + 0.05;
    while (keys.length < 500) { keys.push(tk); tk += 0.04 + R() * R() * 0.15 + (R() < 0.12 ? 0.14 : 0); }
    var ks = function (t) { var lo = 0, hi = keys.length; while (lo < hi) { var m = (lo + hi) >> 1; if (keys[m] <= t) lo = m + 1; else hi = m; } return lo; };
    words.forEach(function (W, wi) {
      var caret = mk("span", "ef-ctv__caret"), lk = ks(land[wi]), len = W.chars.length;
      W.line.fx.appendChild(caret);
      var fin = keys[Math.min(keys.length - 1, lk + len - 1)];
      items.push({ W: W, caret: caret, lk: lk, len: len, fin: fin, land: land[wi] });
      if (fin > items[last].fin) last = wi;
      dur = Math.max(dur, fin + 0.9);
    });
    return { dur: dur, render: function (t) {
      var done = t >= 1e8, kc = done ? keys.length : ks(t);
      items.forEach(function (it, wi) {
        var typed = done ? it.len : clamp(kc - it.lk, 0, it.len), cs = it.W.chars, c = cs[Math.min(typed, it.len - 1)];
        cs.forEach(function (C, i) { C.el.style.opacity = i < typed ? 1 : 0; });
        var vis = 0;
        if (!done && t >= it.land) {
          vis = 1;
          if (typed === it.len) {
            var age = t - it.fin;
            if (wi === last) vis = Math.floor(age / 0.2) % 2 === 0 && age < 0.8 ? 1 : 0;
            else vis = 1 - clamp(age / 0.3, 0, 1);
          }
        }
        it.caret.style.opacity = vis;
        if (vis) it.caret.style.transform = "translate(" + (typed < it.len ? c.x : c.x + c.w).toFixed(1) + "px," + c.y.toFixed(1) + "px)";
      });
    } };
  }
  function mkCaptions() {
    var R = rng(11), LET = 0.02, tt = 0.35, bursts = [], rowAt = [], n = lines.length, lh = lines[0].h;
    lines.forEach(function (L, li) {
      rowAt.push(tt);
      for (var i = 0; i < L.words.length;) {
        var size = Math.min(L.words.length - i, 1 + Math.floor(R() * 3)), cs = [];
        L.words.slice(i, i + size).forEach(function (W) { cs = cs.concat(W.chars); });
        bursts.push({ cs: cs, t0: tt });
        tt += cs.length * LET + 0.12 + R() * 0.22; i += size;
      }
    });
    return { dur: tt + 0.4, render: function (t) {
      var done = t >= 1e8, rp = 0, r;
      bursts.forEach(function (b) {
        b.cs.forEach(function (C, k) {
          var tm = t - b.t0 - k * LET;
          C.el.style.opacity = done || tm >= 0 ? 1 : 0;
          C.el.style.setProperty("--m", done ? 0 : (tm < 0 ? 0 : 1 - clamp((tm - 0.1) / 0.5, 0, 1)).toFixed(3));
        });
      });
      for (r = 1; r < n; r++) { var k = done ? 1 : clamp((t - (rowAt[r] - 0.1)) / 0.22, 0, 1); rp += k * k * (3 - 2 * k); }
      roll.style.transform = "translateY(" + ((n - 1 - rp) * lh).toFixed(1) + "px)";
    } };
  }
  function mkVoice() {
    var LET = 0.045, LAG = 5, ST = 0.25, R = rng(3), dur = 0, items = [];
    lines.forEach(function (L, li) {
      var bh = fs * 0.85, bars = [];
      L.words.forEach(function (W) {
        W.chars.forEach(function (C, k) {
          var amp = (0.35 + 0.65 * Math.sin(Math.PI * (k + 0.5) / W.chars.length)) * (/[aeiouAEIOU]/.test(C.ch) ? 1 : 0.62) * (0.8 + 0.2 * R());
          var b = mk("span", "ef-ctv__bar"), bw = Math.max(2, C.w * 0.5);
          b.style.width = bw.toFixed(1) + "px"; b.style.height = bh.toFixed(1) + "px";
          b.style.left = (C.x + C.w / 2 - bw / 2).toFixed(1) + "px"; b.style.top = ((L.h - bh) / 2).toFixed(1) + "px";
          L.fx.appendChild(b); bars.push({ C: C, b: b, amp: amp });
        });
      });
      items.push({ start: li * ST, bars: bars });
      dur = Math.max(dur, li * ST + (L.chars.length + LAG + 3) * LET + 0.2);
    });
    return { dur: dur, render: function (t) {
      var done = t >= 1e8;
      items.forEach(function (f) {
        var head = (t - f.start) / LET;
        f.bars.forEach(function (x, i) {
          var a = done ? 1 : clamp((head - i - LAG) / 3, 0, 1), gr = clamp(head - i, 0, 1), s;
          x.C.el.style.opacity = a;
          if (gr > 0) s = gr * (1 - a) * x.amp * (1 + 0.12 * Math.sin(t * 9 + i * 1.7));
          else s = 0.05 + 0.04 * (1 + Math.sin(t * 5 + i));
          x.b.style.opacity = a >= 1 ? 0 : 1;
          x.b.style.transform = "scaleY(" + Math.max(0.05, s).toFixed(3) + ")";
        });
      });
    } };
  }
  var MAKE = { scramble: mkScramble, find: mkFind, reader: mkReader, multi: mkMulti, captions: mkCaptions, voice: mkVoice };

  // ---- playback ----
  function stopLoop() { if (raf) cancelAnimationFrame(raf); raf = 0; if (timer) clearTimeout(timer); timer = 0; }
  function tick(now) {
    raf = 0;
    tNow = (now - t0) / 1000 * opts.speed;
    if (tNow >= cur.dur) { cur.render(1e9); if (opts.loop > 0) timer = setTimeout(play, opts.loop * 1000); return; }
    cur.render(tNow);
    raf = requestAnimationFrame(tick);
  }
  function play() {
    stopLoop();
    if (!cur) return;
    if (reduce) { cur.render(1e9); return; }
    cur.render(0);
    t0 = performance.now(); tNow = 0;
    raf = requestAnimationFrame(tick);
  }
  function setup() {
    stopLoop();
    if (!lines.length || !fit()) return;
    sized = Math.round(stage.clientWidth) + "|" + opts.size + "|" + opts.variant;
    measure();
    cur = MAKE[opts.variant]();
    textEl.setAttribute("data-v", opts.variant);
    play();
  }
  function setVariant(v) {
    opts.variant = v;
    VARS.forEach(function (p) { btns[p[0]].setAttribute("aria-pressed", p[0] === v ? "true" : "false"); });
    setup();
  }

  VARS.forEach(function (p) {
    var b = document.createElement("button");
    b.type = "button"; b.textContent = p[1]; b.setAttribute("aria-pressed", "false");
    var h = function () { setVariant(p[0]); };
    b.addEventListener("click", h); offs.push(function () { b.removeEventListener("click", h); });
    varsEl.appendChild(b); btns[p[0]] = b;
  });
  replayBtn.addEventListener("click", play); offs.push(function () { replayBtn.removeEventListener("click", play); });
  replayBtn.disabled = reduce;

  function update(next) {
    var prev = opts;
    opts = Object.assign({ background: "#0c1e18", accent: "#e6ff55", text: "Enrichr turns any site / into a library of effects / you can use today.", variant: "scramble", speed: 1, size: 44, loop: 3 }, opts, next || {});
    if (!MAKE[opts.variant]) opts.variant = "scramble";
    opts.speed = clamp(Number(opts.speed) || 1, 0.3, 3);
    opts.size = clamp(Number(opts.size) || 44, 14, 80);
    opts.loop = clamp(Number(opts.loop) || 0, 0, 10);
    wrap.style.background = opts.background;
    wrap.style.setProperty("--ef-acc", opts.accent);
    wrap.style.setProperty("--ef-acc-rgb", hexRgb(opts.accent));
    if (prev.speed && prev.speed !== opts.speed && raf) t0 = performance.now() - tNow / opts.speed * 1000;
    var rebuild = built !== opts.text;
    if (rebuild) buildText();
    VARS.forEach(function (p) { btns[p[0]].setAttribute("aria-pressed", p[0] === opts.variant ? "true" : "false"); });
    if (rebuild || prev.variant !== opts.variant || prev.size !== opts.size || prev.accent !== opts.accent || !cur) setup();
  }
  if (window.ResizeObserver) {
    ro = new ResizeObserver(function () {
      var w = Math.round(stage.clientWidth);
      if (w && w !== lastW) { lastW = w; if (cur) setup(); }
    });
    ro.observe(stage);
  }
  update(o);
  return {
    update: update,
    destroy: function () {
      stopLoop();
      if (ro) ro.disconnect();
      offs.forEach(function (f) { f(); }); offs = [];
      varsEl.textContent = ""; roll.textContent = "";
      lines = []; words = []; chars = []; cur = null;
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"variant":"scramble","speed":1,"size":44,"loop":3,"text":"Enrichr turns any site / into a library of effects / you can use today.","accent":"#e6ff55"});