<div id="interactive-container" style="position: relative; width: 100%; height: 500px; background-color: black; overflow: hidden;">
    <div id="circle" style="position: absolute; width: 30px; height: 30px; border-radius: 50%; background-color: #FDDA24; transform: translate(-50%, -50%); 
  transition: width 0.05s ease, height 0.05s ease; pointer-events: none;"></div>
    <div id="smiley" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 80px; color: #FDDA24; pointer-events: none;
   display: none;">☺</div>
    <div id="error-messages" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #FDDA24; font-family: monospace; font-size: 14px; 
  overflow: hidden; pointer-events: none; display: none;"></div>
  </div>

  <script>
  document.addEventListener('DOMContentLoaded', () => {
      const circle = document.getElementById('circle');
      const smiley = document.getElementById('smiley');
      const errorMessages = document.getElementById('error-messages');
      const container = document.getElementById('interactive-container');

      let lastX = 0;
      let lastY = 0;
      let currentX = 0;
      let currentY = 0;
      let velocityX = 0;
      let velocityY = 0;
      let size = 30;
      let isExploded = false;
      let isSecondPhase = false;

      const errorCodes = [
          'ERR_CIRCLE_OVERFLOW',
          'CRITICAL_VELOCITY_EXCEEDED',
          'SYSTEM_FAILURE_0x8F2A',
          'BUFFER_OVERFLOW_EXCEPTION',
          'RENDER_ENGINE_CRASH',
          'PHYSICS_MODEL_BREAKDOWN',
          'DIMENSION_BOUNDARY_BREACH',
          '0xDEADBEEF',
          'CIRCULAR_REFERENCE_ERROR',
          'CATASTROPHIC_FAILURE'
      ];

      function update() {
          // Smooth follow with natural motion
          velocityX = (currentX - lastX) * 0.2;
          velocityY = (currentY - lastY) * 0.2;

          // Calculate speed (distance moved per frame)
          const speed = Math.sqrt(velocityX * velocityX + velocityY * velocityY);

          // Update circle position with smoothing
          lastX += (currentX - lastX) * 0.2;
          lastY += (currentY - lastY) * 0.2;

          if (!isExploded && !isSecondPhase) {
              circle.style.left = `${lastX}px`;
              circle.style.top = `${lastY}px`;

              // Adjust size based on mouse speed
              size = 30 + speed * 1.5;

              circle.style.width = `${size}px`;
              circle.style.height = `${size}px`;

              // Check if circle should pop
              if (size > 100) {
                  explodeCircle();
              }
          }

          requestAnimationFrame(update);
      }

      function explodeCircle() {
          isExploded = true;
          circle.style.display = 'none';
          errorMessages.style.display = 'block';

          // Show random error messages
          let messageCount = 0;
          const maxMessages = 100;

          const showErrors = setInterval(() => {
              const rect = container.getBoundingClientRect();
              const randomX = Math.floor(Math.random() * rect.width);
              const randomY = Math.floor(Math.random() * rect.height);
              const randomError = errorCodes[Math.floor(Math.random() * errorCodes.length)];

              const errorElement = document.createElement('div');
              errorElement.textContent = randomError;
              errorElement.style.position = 'absolute';
              errorElement.style.left = `${randomX}px`;
              errorElement.style.top = `${randomY}px`;
              errorMessages.appendChild(errorElement);

              messageCount++;

              if (messageCount >= maxMessages) {
                  clearInterval(showErrors);

                  // Reset after a delay
                  setTimeout(() => {
                      resetToSmiley();
                  }, 3000);
              }
          }, 50);
      }

      function resetToSmiley() {
          errorMessages.style.display = 'none';
          errorMessages.innerHTML = '';
          smiley.style.display = 'block';
          isSecondPhase = true;
      }

      container.addEventListener('mousemove', (event) => {
          const rect = container.getBoundingClientRect();
          currentX = event.clientX - rect.left;
          currentY = event.clientY - rect.top;
      });

      update();
  });
  </script>