バラバラ文字集合タイポグラフィ

<div class="d02-08-11-stage">
          <span class="d02-08-11-hint">↓ scroll</span>
          <div class="d02-08-11-scroll">
            <div class="d02-08-11-pad-top"></div>
            <p class="d02-08-11-quote">ばらばらの想いが、ひとつのカタチになる。</p>
            <div class="d02-08-11-pad-bottom"></div>
          </div>
        </div>

.prev.d02-08-11{padding:0;display:block}
        .d02-08-11-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#12101c}
        .d02-08-11-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.35);pointer-events:none;z-index:2}
        .d02-08-11-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 26px}
        .d02-08-11-pad-top{height:130px}
        .d02-08-11-pad-bottom{height:150px}
        .d02-08-11-quote{margin:0;font-size:22px;font-weight:800;line-height:1.8;color:#fff;letter-spacing:.02em}
        .d02-08-11-quote .ch{display:inline-block;will-change:transform,opacity;color:#a89bff}
        .d02-08-11-quote .ch.on{color:#fff}

(function(){
        var root = document.getElementById('item-02-08-11');
        if(!root) return;
        var stage = root.querySelector('.d02-08-11-stage');
        var scroller = root.querySelector('.d02-08-11-scroll');
        var quote = root.querySelector('.d02-08-11-quote');
        if(!stage || !scroller || !quote) return;
        var text = quote.textContent;
        quote.textContent = '';
        var chars = [];
        for(var i = 0; i < text.length; i++){
          var ch = text[i];
          var s = document.createElement('span');
          s.className = 'ch';
          s.textContent = ch === ' ' ? ' ' : ch;
          var tx = ((i % 2 === 0 ? 1 : -1) * (30 + (i * 13) % 90));
          var ty = ((i % 2 === 0 ? -1 : 1) * (20 + (i * 7) % 60));
          var rot = ((i % 2 === 0 ? -1 : 1) * (15 + (i * 5) % 45));
          s.style.setProperty('--tx', tx + 'px');
          s.style.setProperty('--ty', ty + 'px');
          s.style.setProperty('--rot', rot + 'deg');
          quote.appendChild(s);
          chars.push(s);
        }
        function update(){
          var max = scroller.scrollHeight - scroller.clientHeight;
          var progress = max > 0 ? Math.min(Math.max(scroller.scrollTop / max, 0), 1) : 0;
          var idx = progress * chars.length;
          for(var i = 0; i < chars.length; i++){
            var local = Math.min(Math.max((idx - i) * 1.4, 0), 1);
            var c = chars[i];
            var tx = parseFloat(c.style.getPropertyValue('--tx'));
            var ty = parseFloat(c.style.getPropertyValue('--ty'));
            var rot = parseFloat(c.style.getPropertyValue('--rot'));
            c.style.transform = 'translate(' + (tx * (1 - local)).toFixed(1) + 'px,' + (ty * (1 - local)).toFixed(1) + 'px) rotate(' + (rot * (1 - local)).toFixed(1) + 'deg)';
            c.style.opacity = (0.15 + local * 0.85).toFixed(2);
            c.className = local > 0.92 ? 'ch on' : 'ch';
          }
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();