components/sparkles.js

class SparklesEffect extends HTMLElement {
  connectedCallback() {
    this.style.position = 'relative';
    this.style.display = 'inline-block';
    this.createSparkles();
  }

  createSparkles() {
    const sparkleCount = 15;
    
    for (let i = 0; i < sparkleCount; i++) {
      const sparkle = document.createElement('div');
      sparkle.style.position = 'absolute';
      sparkle.style.width = `${Math.random() * 4 + 2}px`;
      sparkle.style.height = sparkle.style.width;
      sparkle.style.background = `rgba(255, 215, 0, ${Math.random() * 0.8 + 0.2})`;
      sparkle.style.borderRadius = '50%';
      sparkle.style.pointerEvents = 'none';
      
      const posX = Math.random() * 100;
      const posY = Math.random() * 100;
      sparkle.style.left = `${posX}%`;
      sparkle.style.top = `${posY}%`;
      
      const duration = Math.random() * 3 + 2;
      const delay = Math.random() * 2;
      
      sparkle.style.animation = `sparkleTwinkle ${duration}s ease-in-out ${delay}s infinite alternate`;
      
      this.appendChild(sparkle);
    }
  }
}

customElements.define('sparkles-effect', SparklesEffect);