luminomorphism/dist/luminomorph.min.js

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

const Luminomorph={init:function(i={}){const o=document.querySelectorAll(".l-card");document.addEventListener("mousemove",t=>{const e=t.clientX/window.innerWidth-.5,r=(t.clientY/window.innerHeight-.5)*30,d=e*-30;o.forEach(c=>{c.style.setProperty("--card-transform",`rotateX(${r}deg) rotateY(${d}deg)`)})});function a(t){const e=(t.beta-45)/3,n=-t.gamma/3;o.forEach(r=>{r.style.setProperty("--card-transform",`rotateX(${e}deg) rotateY(${n}deg)`)})}if(window.DeviceOrientationEvent&&typeof DeviceOrientationEvent.requestPermission=="function"){const t=()=>{DeviceOrientationEvent.requestPermission().then(n=>{n==="granted"&&window.addEventListener("deviceorientation",a)}).catch(console.error)},e=document.createElement("button");e.innerText="Enable Motion",Object.assign(e.style,{position:"fixed",top:"20px",left:"50%",transform:"translateX(-50%)",zIndex:"9999",padding:"10px 20px",borderRadius:"10px",border:"none",background:"rgba(255,255,255,0.1)",color:"white",backdropFilter:"blur(10px)",cursor:"pointer",fontWeight:"bold"}),e.onclick=()=>{t(),e.remove()},document.body.appendChild(e)}else window.DeviceOrientationEvent&&window.addEventListener("deviceorientation",a);if(i.sound){const t=new Audio(i.sound);o.forEach(e=>{e.addEventListener("mouseenter",()=>{t.currentTime=0,t.play()})})}}};