Morphing Text Animation

<div class="morphing-text-component bg-transparent">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');</style>
  <div class="relative mx-auto h-16 w-full max-w-screen-md text-center font-bold leading-none md:h-24" style="font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 40pt; filter: url(#threshold) blur(0.6px);" id="morphing-container">
    <span class="absolute inset-x-0 top-0 m-auto inline-block w-full" id="text1"></span>
    <span class="absolute inset-x-0 top-0 m-auto inline-block w-full" id="text2"></span>
    <svg id="filters" class="hidden" preserveAspectRatio="xMidYMid slice">
      <defs>
        <filter id="threshold">
          <fecolormatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140"></fecolormatrix>
        </filter>
      </defs>
    </svg>
  </div>
  <script>class MorphingText{constructor(texts,container){this.texts=texts;this.textIndex=0;this.morph=0;this.cooldown=0;this.time=new Date();this.text1=container.querySelector('#text1');this.text2=container.querySelector('#text2');this.morphTime=1.5;this.cooldownTime=0.5;this.animate();}setStyles(fraction){this.text2.style.filter=`blur(${Math.min(8/fraction-8,100)}px)`;this.text2.style.opacity=`${Math.pow(fraction,0.4)*100}%`;const invertedFraction=1-fraction;this.text1.style.filter=`blur(${Math.min(8/invertedFraction-8,100)}px)`;this.text1.style.opacity=`${Math.pow(invertedFraction,0.4)*100}%`;this.text1.textContent=this.texts[this.textIndex%this.texts.length];this.text2.textContent=this.texts[(this.textIndex+1)%this.texts.length];}doMorph(){this.morph-=this.cooldown;this.cooldown=0;let fraction=this.morph/this.morphTime;if(fraction>1){this.cooldown=this.cooldownTime;fraction=1;}this.setStyles(fraction);if(fraction===1){this.textIndex++;}}doCooldown(){this.morph=0;this.text2.style.filter='none';this.text2.style.opacity='100%';this.text1.style.filter='none';this.text1.style.opacity='0%';}animate(){const newTime=new Date();const dt=(newTime.getTime()-this.time.getTime())/1000;this.time=newTime;this.cooldown-=dt;if(this.cooldown<=0){this.doMorph();}else{this.doCooldown();}requestAnimationFrame(()=>this.animate());}}const container=document.getElementById('morphing-container');const morphing=new MorphingText(['Innovation','Creativity','Excellence','Future'],container);</script>
</div>