luminomorphism/dist/l-orbital.min.js

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

class LOrbital extends HTMLElement{static get observedAttributes(){return["count","color","radius"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.render()}attributeChangedCallback(o,t,e){t!==e&&this.render()}render(){const o=parseInt(this.getAttribute("count"))||5,t=this.getAttribute("color")||"#00ffff",e=parseInt(this.getAttribute("radius"))||40;this.shadow.innerHTML="";const r=document.createElement("div");r.className="orbital-wrapper";const a=document.createElement("div");a.className="rotator";const i=document.createElement("style");i.textContent=`
    .orbital-wrapper {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    .rotator {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0; left: 0;
      animation: rotateOrbit 6s linear infinite;
      transform-origin: center center;
    }

    .orb {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      margin-top: -3px;
      border-radius: 50%;
      background: ${t};
      box-shadow: 0 0 6px ${t};
    }

    @keyframes rotateOrbit {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }   
    }
  `;for(let n=0;n<o;n++){const s=document.createElement("div");s.className="orb";const d=360/o*n*Math.PI/180,c=Math.sin(d)*e,l=-Math.cos(d)*e;s.style.transform=`translate(${c}px, ${l}px)`,a.appendChild(s)}r.appendChild(a),this.shadow.appendChild(i),this.shadow.appendChild(r)}}customElements.define("l-orbital",LOrbital);