components/glow-effect.js

class GlowEffect extends HTMLElement {
  connectedCallback() {
    this.style.position = 'relative';
    this.style.display = 'inline-block';
    
    const glow = document.createElement('div');
    glow.style.position = 'absolute';
    glow.style.top = '0';
    glow.style.left = '0';
    glow.style.right = '0';
    glow.style.bottom = '0';
    glow.style.borderRadius = 'inherit';
    glow.style.background = `radial-gradient(circle at center,
      rgba(${this.getAttribute('r') || '139'}, ${this.getAttribute('g') || '92'}, ${this.getAttribute('b') || '246'}, 0.5) 0%, 
      transparent 80%)`;
    glow.style.pointerEvents = 'none';
    glow.style.opacity = '0';
    glow.style.transition = 'opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1)';
    glow.style.filter = 'blur(12px)';
    glow.style.zIndex = '-1';
this.appendChild(glow);
    
    this.addEventListener('mouseenter', () => {
      glow.style.opacity = '1';
    });
    
    this.addEventListener('mouseleave', () => {
      glow.style.opacity = '0';
    });
  }
}

customElements.define('glow-effect', GlowEffect);