luminomorphism/dist/l-hologram.min.js

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

class LHologram extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this._onMouseMove=this._onMouseMove.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this)}static get observedAttributes(){return["glow","depth"]}attributeChangedCallback(e,s,t){if(e==="glow"&&(this.glowColor=t||"#00ffff",this._updateGlow()),e==="depth"){const o=parseFloat(t);this.depth=isNaN(o)?10:o}}connectedCallback(){this.glowColor=this.getAttribute("glow")||"#00ffff";const e=this.getAttribute("depth"),s=parseFloat(e);this.depth=isNaN(s)?10:s;const t=document.createElement("div");t.className="hologram-wrapper";const o=document.createElement("slot");o.className="hologram-content",t.appendChild(o);const i=document.createElement("div");i.className="hologram-glow",t.appendChild(i);const a=document.createElement("style");a.textContent=`
      :host {
        display: inline-block;
        position: relative;
        perspective: 800px;
      }
      .hologram-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 0.2s ease;
      }
      .hologram-content::slotted(*) {
        display: block;
        backface-visibility: hidden;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      }
      .hologram-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        pointer-events: none;
        mix-blend-mode: screen;
        opacity: 0.6;
      }
    `,this.shadow.appendChild(a),this.shadow.appendChild(t),this._wrapper=t,this._glow=i,this._slot=o,this._updateGlow(),this.addEventListener("mousemove",this._onMouseMove),this.addEventListener("mouseleave",this._onMouseLeave)}disconnectedCallback(){this.removeEventListener("mousemove",this._onMouseMove),this.removeEventListener("mouseleave",this._onMouseLeave)}_updateGlow(){if(!this._glow)return;const e=this.glowColor;this._glow.style.background=`radial-gradient(circle at center, ${e}66, ${e}00)`}_onMouseMove(e){const s=this.getBoundingClientRect(),t=(e.clientX-s.left)/s.width-.5,o=(e.clientY-s.top)/s.height-.5,i=t*this.depth,a=-o*this.depth,n=20;this._wrapper.style.transform=`rotateX(${a}deg) rotateY(${i}deg) translateZ(${n}px)`,this._glow.style.transform=`translate(${-t*10}px, ${o*10}px)`}_onMouseLeave(){this._wrapper.style.transform="rotateX(0deg) rotateY(0deg) translateZ(0px)",this._glow.style.transform=""}}customElements.define("l-hologram",LHologram);