Animated Score Counter with Color Morphing

<div class="w-full text-center bg-neutral-900/30 rounded-xl p-6">
  <style>@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
    @import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
    
    @keyframes gradientSlide {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    
    .score-viral {
      background: linear-gradient(90deg, #D97706, #F59E0B, #FCD34D, #F59E0B, #D97706);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: gradientSlide 3s linear infinite;
    }
    
    .score-glow {
      filter: drop-shadow(0 0 20px rgba(217, 119, 6, 0.4)) drop-shadow(0 0 40px rgba(217, 119, 6, 0.2));
    }</style>
  <div class="flex items-baseline justify-center gap-3">
    <span id="score-number-demo" class="text-7xl font-bold tracking-tighter transition-colors duration-100" style="color: #EF4444; font-family: 'JetBrains Mono', 'Courier New', monospace;">0</span>
    <span class="text-sm text-neutral-500 font-medium" style="font-family: 'Satoshi', 'Helvetica Neue', sans-serif;">/100</span>
  </div>
  <span id="score-label-demo" class="text-xs uppercase tracking-widest font-medium mt-3
    inline-block opacity-0 transform translate-y-2
    transition-all duration-300" style="color: #EF4444; font-family: 'Satoshi', 'Helvetica Neue', sans-serif;">Calculating...</span>
  <script>(function() {
      const TARGET_SCORE = 96;
      const ANIMATION_DURATION = 1500;
      
      const SCORE_RANGES = [
        { min: 0,  max: 30,  color: '#EF4444', label: 'NEEDS WORK' },
        { min: 31, max: 60,  color: '#EAB308', label: 'AVERAGE' },
        { min: 61, max: 80,  color: '#22C55E', label: 'GOOD' },
        { min: 81, max: 90,  color: '#14B8A6', label: 'EXCELLENT' },
        { min: 91, max: 100, color: '#D97706', label: 'VIRAL READY' }
      ];
      
      function getScoreConfig(score) {
        return SCORE_RANGES.find(r => score >= r.min && score <= r.max) || SCORE_RANGES[0];
      }
      
      function easeOutExpo(x) {
        return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
      }
      
      function animateScore(targetScore) {
        const scoreElement = document.getElementById('score-number-demo');
        const labelElement = document.getElementById('score-label-demo');
        const startTime = performance.now();
        
        function update(currentTime) {
          const elapsed = currentTime - startTime;
          const progress = Math.min(elapsed / ANIMATION_DURATION, 1);
          const easedProgress = easeOutExpo(progress);
          const currentScore = Math.floor(easedProgress * targetScore);
          
          scoreElement.textContent = currentScore;
          
          const config = getScoreConfig(currentScore);
          
          if (currentScore >= 91) {
            scoreElement.classList.add('score-viral', 'score-glow');
            scoreElement.style.color = '';
          } else {
            scoreElement.classList.remove('score-viral', 'score-glow');
            scoreElement.style.color = config.color;
          }
          
          if (progress < 1) {
            requestAnimationFrame(update);
          } else {
            scoreElement.textContent = targetScore;
            const finalConfig = getScoreConfig(targetScore);
            
            labelElement.textContent = finalConfig.label;
            labelElement.style.color = finalConfig.color;
            labelElement.style.opacity = '1';
            labelElement.style.transform = 'translateY(0)';
            
            if (targetScore >= 91) {
              scoreElement.classList.add('score-viral', 'score-glow');
            }
          }
        }
        
        requestAnimationFrame(update);
      }
      
      setTimeout(() => animateScore(TARGET_SCORE), 500);
    })();</script>
</div>