luminomorphism/dist/l-flare-sheen.min.js

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

class LFlareSheen extends HTMLElement{static get observedAttributes(){return["color","duration"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const n=this.getAttribute("color")||"rgba(255,255,255,0.2)",o=this.getAttribute("duration")||"3s",e=document.createElement("div");e.className="sheen-wrapper";const r=document.createElement("slot");e.appendChild(r);const t=document.createElement("style");t.textContent=`
      .sheen-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .sheen-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, ${n}, transparent);
        transform: skewX(-20deg);
        animation: sheen-slide ${o} infinite;
        pointer-events: none;
        z-index: 1;
        mix-blend-mode: screen;
        opacity: 0.6;
      }

      ::slotted(*) {
        position: relative;
        z-index: 0;
        display: block;
      }

      @keyframes sheen-slide {
        0%   { left: -100%; }
        100% { left: 100%; }
      }

      ::slotted(.l-card) {
        width: 260px;
        height: 260px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.05);
        box-shadow:
          0 25px 50px rgba(0, 0, 0, 0.4),
          0 0 6px rgba(255, 255, 255, 0.07),
          inset 0 0 120px rgba(255, 255, 255, 0.015);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        color: white;
      }
    `,this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(t),this.shadowRoot.appendChild(e)}}customElements.define("l-flare-sheen",LFlareSheen);