luminomorphism/dist/l-light-ray.min.js

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

class LLightRay extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.render()}static get observedAttributes(){return["count","color","spread","speed"]}attributeChangedCallback(n,a,t){a!==t&&this.render()}render(){const n=parseInt(this.getAttribute("count"))||12,a=this.getAttribute("color")||"#ffeeaa",t=parseInt(this.getAttribute("spread"))||60,i=this.getAttribute("speed")||"slow";this.shadow.innerHTML="";const e=document.createElement("div");e.className="ray-container";const r=document.createElement("style");r.textContent=`
      .ray-container {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        pointer-events: none;
        z-index: 0;
        transform-origin: center center;
        animation: spin infinite linear;
      }

      .ray {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 120%;
        background: ${a};
        opacity: 0.06;
        transform-origin: center top;
        filter: blur(2px);
      }

      .slow    { animation-duration: 40s; }
      .medium  { animation-duration: 20s; }
      .fast    { animation-duration: 8s; }

      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
    `;for(let o=0;o<n;o++){const s=document.createElement("div");s.className="ray";const d=-t/2+t/(n-1)*o;s.style.transform=`rotate(${d}deg)`,e.appendChild(s)}e.classList.add(i),this.shadow.appendChild(r),this.shadow.appendChild(e)}}customElements.define("l-light-ray",LLightRay);