luminomorphism/dist/l-echo-press.min.js

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

class LEchoPress extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.createElement("div");t.classList.add("echo-wrapper"),t.innerHTML="<slot></slot>";const e=document.createElement("style");e.textContent=`
      .echo-wrapper {
        position: relative;
        display: inline-block;
        overflow: hidden;
      }

      .echo-effect {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: radial-gradient(circle, #00ffffcc 0%, transparent 70%);
        pointer-events: none;
        transform: scale(0);
        opacity: 0.8;
        animation: echo-expand 0.8s ease-out forwards;
        z-index: 100;
      }

      @keyframes echo-expand {
        to {
          transform: scale(12);
          opacity: 0;
        }
      }
    `,this.shadowRoot.append(e,t),t.addEventListener("click",o=>this.spawnEcho(o))}spawnEcho(t){const e=document.createElement("span");e.classList.add("echo-effect");const o=this.getBoundingClientRect(),n=t.clientX-o.left,s=t.clientY-o.top;e.style.left=`${n-20}px`,e.style.top=`${s-20}px`,this.shadowRoot.querySelector(".echo-wrapper").appendChild(e),e.addEventListener("animationend",()=>{e.remove()})}}customElements.define("l-echo-press",LEchoPress);