Melting Text

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundles/anime.umd.min.js"></script>
<script>
  (function () {
    // Melting Text: letters sag and drip downwards into a puddle under the
    // line, then spring back up out of it. A goo filter melts the drips and the
    // puddle together, so it reads as one liquid.
    // Usage: <h1 data-melting-text>Melt down</h1>
    // Optional: data-loop (melt and reform over and over), data-duration (ms
    // each letter takes to melt; default 2400), data-stagger (ms between
    // letters, with a little randomness; default 70), data-hold (ms it stays
    // melted before reforming; default 900), data-rest (ms it stays whole
    // between loops; default 1600). Works best on a single line.
    var DEFAULTS = { duration: 2400, stagger: 70, hold: 900, rest: 1600 };
    var count = 0;

    var css =
      '.mlt-body{position:relative;display:inline-block;padding-bottom:.55em;margin-bottom:-.55em}' +
      '.mlt-word{display:inline-block;white-space:nowrap}' +
      '.mlt-char{display:inline-block;transform-origin:50% 0;will-change:transform}' +
      '.mlt-drop{position:absolute;width:.11em;height:.12em;margin-left:-.055em;transform-origin:50% 0;border-radius:50%;background:currentColor;opacity:0;pointer-events:none}' +
      '.mlt-pool{position:absolute;left:2%;width:96%;height:.17em;border-radius:.1em;background:currentColor;transform:scaleX(0);pointer-events:none}' +
      '.mlt-svg{position:absolute;width:0;height:0;overflow:hidden}';
    var style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);

    function reduced() { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; }

    function setup(el) {
      var d = el.dataset;
      var duration = +d.duration || DEFAULTS.duration;
      var stagger = d.stagger !== undefined ? +d.stagger : DEFAULTS.stagger;
      var hold = d.hold !== undefined ? +d.hold : DEFAULTS.hold;
      var rest = d.rest !== undefined ? +d.rest : DEFAULTS.rest;
      var loop = d.loop !== undefined && d.loop !== 'false';

      var text = el.textContent.replace(/\s+/g, ' ').trim();
      el.setAttribute('aria-label', text);
      el.textContent = '';
      var body = document.createElement('span');
      body.className = 'mlt-body';
      body.setAttribute('aria-hidden', 'true');
      var chars = [];
      text.split(' ').forEach(function (w, i) {
        if (i) body.appendChild(document.createTextNode(' '));
        var word = document.createElement('span');
        word.className = 'mlt-word';
        Array.from(w).forEach(function (c) {
          var s = document.createElement('span');
          s.className = 'mlt-char';
          s.textContent = c;
          word.appendChild(s);
          chars.push(s);
        });
        body.appendChild(word);
      });
      el.appendChild(body);
      if (reduced()) return;

      // The goo filter: blur everything, then sharpen the alpha back up, so
      // shapes that touch flow into each other. The crisp text is laid on top.
      var id = 'mlt-goo-' + (++count);
      var fs = parseFloat(getComputedStyle(el).fontSize);
      var svgNS = 'http://www.w3.org/2000/svg';
      var svg = document.createElementNS(svgNS, 'svg');
      svg.setAttribute('class', 'mlt-svg');
      svg.setAttribute('aria-hidden', 'true');
      svg.innerHTML =
        '<filter id="' + id + '" x="-10%" y="-20%" width="120%" height="150%">' +
        '<feGaussianBlur in="SourceGraphic" stdDeviation="0" result="b"/>' +
        '<feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10" result="g"/>' +
        '<feMerge><feMergeNode in="g"/><feMergeNode in="SourceGraphic"/></feMerge>' +
        '</filter>';
      el.appendChild(svg);
      body.style.filter = 'url(#' + id + ')';
      // The goo only runs while melting, so the letters are crisp at rest.
      var blur = svg.querySelector('feGaussianBlur');
      var goo = { k: 0 };
      function setGoo() { blur.setAttribute('stdDeviation', (goo.k * Math.max(1.5, fs * 0.06)).toFixed(2)); }

      var pool = document.createElement('span');
      pool.className = 'mlt-pool';
      body.appendChild(pool);

      // One to three drops under each letter.
      var drops = [];
      chars.forEach(function (c, i) {
        var k = 1 + Math.floor(Math.random() * 2.5);
        for (var j = 0; j < k; j++) {
          var s = document.createElement('span');
          s.className = 'mlt-drop';
          body.appendChild(s);
          drops.push({ el: s, char: c, i: i, at: 0.25 + Math.random() * 0.5, late: Math.random() });
        }
      });

      var h = 1.1; // letter box height, in em
      function measure() {
        fs = parseFloat(getComputedStyle(el).fontSize) || fs;
        h = chars[0].offsetHeight / fs;
        pool.style.top = (h + 0.12).toFixed(3) + 'em';
        drops.forEach(function (dr) {
          var c = dr.char;
          dr.el.style.left = ((c.offsetLeft + c.offsetWidth * dr.at) / fs).toFixed(3) + 'em';
          dr.el.style.top = ((c.offsetTop / fs) + h * 0.72).toFixed(3) + 'em';
        });
      }
      measure();
      new ResizeObserver(measure).observe(el);

      var delays = chars.map(function (c, i) { return i * stagger + Math.random() * stagger * 3; });
      var melted = Math.max.apply(null, delays) + duration;
      var tl = anime.createTimeline({ loop: loop, loopDelay: rest, autoplay: false });

      // Letters sag down, stretch into drips, then slump flat into the puddle.
      chars.forEach(function (c, i) {
        tl.add(c, {
          y: ['0em', '0.02em', (h * 0.12).toFixed(3) + 'em', (h * 0.6).toFixed(3) + 'em', (h + 0.15).toFixed(3) + 'em'],
          scaleY: [1, 1.22, 1.5, 0.75, 0.05],
          scaleX: [1, 0.96, 0.88, 1.1, 1.6],
          skewX: [0, anime.utils.random(-5, 5), anime.utils.random(-9, 9), anime.utils.random(-4, 4), 0],
          duration: duration,
          ease: 'inOutSine'
        }, delays[i]);
      });

      // Drops stretch out of the bottom of each letter and fall into the puddle.
      drops.forEach(function (dr) {
        var start = delays[dr.i] + duration * (0.15 + dr.late * 0.3);
        tl.add(dr.el, {
          opacity: [0, 1, 1, 1, 0],
          y: ['0em', '0.06em', '0.18em', (h * 0.32 + 0.22).toFixed(3) + 'em', (h * 0.32 + 0.26).toFixed(3) + 'em'],
          scaleY: [0.5, 2.2, 2.8, 1.2, 0.5],
          duration: duration * 0.6,
          ease: 'inQuad'
        }, start);
      });

      // The puddle spreads as the first drips land.
      tl.add(pool, { scaleX: [0, 1], scaleY: [0.4, 1], duration: melted * 0.7, ease: 'out(2)' }, duration * 0.4);

      // The goo fades in as the melt starts, and out once the letters are whole.
      var back = melted + hold;
      tl.add(goo, { k: [0, 1], duration: 500, ease: 'linear', onUpdate: setGoo }, 0);
      tl.add(goo, { k: [1, 0], duration: 500, ease: 'linear', onUpdate: setGoo }, back + 900);

      // Spring back up out of the puddle.
      tl.add(chars, {
        y: '0em',
        scaleY: 1,
        scaleX: 1,
        skewX: 0,
        duration: 1100,
        ease: 'outElastic(1, .6)',
        delay: anime.stagger(stagger * 0.6)
      }, back);
      tl.add(pool, { scaleX: 0, scaleY: 0.4, duration: 700, ease: 'inOut(3)' }, back);

      var started = false;
      new IntersectionObserver(function (entries) {
        if (entries[0].isIntersecting) {
          if (!started) { started = true; tl.play(); }
          else if (loop) tl.play();
        } else if (loop) tl.pause();
      }, { threshold: 0.2 }).observe(el);
    }

    function init() {
      document.querySelectorAll('[data-melting-text]').forEach(function (el) {
        if (el._mlt) return;
        el._mlt = true;
        setup(el);
      });
    }

    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
    else init();
  })();
</script>

<h1 data-melting-text data-loop>Melt down</h1>