ランダム分解モーフィングテキスト

<div class="d02-11-04-txt"></div>

.d02-11-04{background:#0f172a}
        .d02-11-04-txt{font-family:ui-monospace,Menlo,monospace;font-size:28px;font-weight:800;color:#22d3ee;letter-spacing:2px;white-space:pre}

(function(){
        var el=document.querySelector('#item-02-11-04 .d02-11-04-txt');
        var words=['ひらめき','挑戦','情熱','継続'];
        var chars='アイウエオカキクケコサシスセソ0123456789';
        var reduce=window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
        var current=words[0];
        el.textContent=current;
        if(reduce){return;}
        function pad(w,len){return (w+'　　　　　　').slice(0,len);}
        function morph(target){
          var len=Math.max(current.length,target.length);
          var from=pad(current,len), to=pad(target,len);
          var order=[];for(var i=0;i<len;i++){order.push(i);}
          for(var i=order.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1));var t=order[i];order[i]=order[j];order[j]=t;}
          var revealTime={};order.forEach(function(idx,pos){revealTime[idx]=pos*70;});
          var start=Date.now();
          var timer=setInterval(function(){
            var elapsed=Date.now()-start,out='',doneCount=0;
            for(var i=0;i<len;i++){
              if(elapsed>=revealTime[i]+150){out+=to[i];doneCount++;}
              else if(elapsed>=revealTime[i]){out+=chars[Math.floor(Math.random()*chars.length)];}
              else{out+=from[i];}
            }
            el.textContent=out;
            if(doneCount>=len){clearInterval(timer);current=target;}
          },50);
        }
        var wi=0;
        function loop(){
          wi=(wi+1)%words.length;
          morph(words[wi]);
          setTimeout(loop,2600);
        }
        setTimeout(loop,2600);
      })();