luminomorphism/dist/l-glow-trail.min.js

A UI design system built around light, blur, ambient motion and perceptual feedback.

class LGlowTrail extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.trail=[],this.color=this.getAttribute("color")||"#00ffff",this.blur=parseInt(this.getAttribute("blur")||12),this.density=parseFloat(this.getAttribute("density")||1),this.fade=parseFloat(this.getAttribute("fade")||.95),this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d");const t=document.createElement("style");t.textContent=`
      canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        pointer-events: none;
        mix-blend-mode: screen;
      }
    `,this.shadow.appendChild(t),this.shadow.appendChild(this.canvas),this.resizeCanvas(),window.addEventListener("resize",()=>this.resizeCanvas()),document.addEventListener("mousemove",e=>this.addPoint(e.clientX,e.clientY)),this.animate()}resizeCanvas(){this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight}addPoint(t,e){for(let i=0;i<this.density;i++)this.trail.push({x:t,y:e,alpha:1})}animate(){requestAnimationFrame(()=>this.animate());const t=this.ctx;t.clearRect(0,0,this.canvas.width,this.canvas.height),this.trail.forEach((e,i)=>{t.beginPath(),t.fillStyle=this.hexToRGBA(this.color,e.alpha),t.shadowColor=this.color,t.shadowBlur=this.blur,t.arc(e.x,e.y,6,0,2*Math.PI),t.fill(),e.alpha*=this.fade}),this.trail=this.trail.filter(e=>e.alpha>.01)}hexToRGBA(t,e=1){const i=t.replace("#",""),s=parseInt(i,16),a=s>>16&255,n=s>>8&255,h=s&255;return`rgba(${a},${n},${h},${e})`}}customElements.define("l-glow-trail",LGlowTrail);