luminomorphism/dist/l-aurora-modal.min.js

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

class LAuroraModal extends HTMLElement{static get observedAttributes(){return["open","size","aurora-intensity","aurora-speed","color-palette","backdrop-blur","close-on-backdrop","particle-count","animation-type","glow-intensity"]}constructor(){super(),this.attachShadow({mode:"open"}),this.config={open:!1,size:"medium",auroraIntensity:1,auroraSpeed:1,colorPalette:"arctic",backdropBlur:!0,closeOnBackdrop:!0,particleCount:20,animationType:"fluid",glowIntensity:1},this.state={isAnimating:!1,auroraLayers:[],particles:[],wavePhase:0,mouseX:0,mouseY:0},this.elements={},this.animationId=null,this.openTimeout=null,this.closeTimeout=null,this.colorPalettes={arctic:["#00ffff","#0080ff","#8000ff","#ff00ff"],cosmic:["#ff00ff","#8000ff","#0080ff","#00ffff"],forest:["#00ff80","#80ff00","#ffff00","#ff8000"],sunset:["#ff8000","#ff4000","#ff0080","#8000ff"],ocean:["#0080ff","#00ffff","#00ff80","#80ff00"]},this.cleanup=[]}connectedCallback(){this.parseAttributes(),this.render(),this.initializeElements(),this.attachEventListeners(),this.initializeAurora(),this.startAnimation(),this.config.open&&this.show()}disconnectedCallback(){this.stopAnimation(),this.cleanup.forEach(e=>e())}attributeChangedCallback(e,t,o){t!==o&&(this.parseAttributes(),e==="open"?this.config.open?this.show():this.hide():this.updateStyling())}parseAttributes(){this.config.open=this.hasAttribute("open"),this.config.size=this.getAttribute("size")||"medium",this.config.auroraIntensity=parseFloat(this.getAttribute("aurora-intensity"))||1,this.config.auroraSpeed=parseFloat(this.getAttribute("aurora-speed"))||1,this.config.colorPalette=this.getAttribute("color-palette")||"arctic",this.config.backdropBlur=this.getAttribute("backdrop-blur")!=="false",this.config.closeOnBackdrop=this.getAttribute("close-on-backdrop")!=="false",this.config.particleCount=parseInt(this.getAttribute("particle-count"))||20,this.config.animationType=this.getAttribute("animation-type")||"fluid",this.config.glowIntensity=parseFloat(this.getAttribute("glow-intensity"))||1}render(){const{size:e,colorPalette:t,backdropBlur:o}=this.config,i=this.colorPalettes[t]||this.colorPalettes.arctic,a={small:{width:"400px",height:"300px"},medium:{width:"600px",height:"400px"},large:{width:"800px",height:"600px"},fullscreen:{width:"95vw",height:"90vh"}},l=a[e]||a.medium;this.shadowRoot.innerHTML=`
      <style>
        :host {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 9999;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.4s ease;
        }
        
        :host(.show) {
          opacity: 1;
          pointer-events: all;
        }
        
        .modal-backdrop {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
          ${o?"backdrop-filter: blur(8px);":""}
          cursor: pointer;
        }
        
        .aurora-canvas {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1;
        }
        
        .particle-layer {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 2;
        }
        
        .modal-container {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0.7);
          width: ${l.width};
          height: ${l.height};
          max-width: 95vw;
          max-height: 90vh;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          z-index: 10;
          cursor: default;
        }
        
        :host(.show) .modal-container {
          transform: translate(-50%, -50%) scale(1);
        }
        
        .modal-content {
          position: relative;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, 
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.8) 50%,
            rgba(0, 0, 0, 0.9) 100%);
          border-radius: 16px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(20px);
          overflow: hidden;
          box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.5),
            0 0 80px rgba(${this.hexToRgb(i[0])}, 0.2),
            inset 0 1px 1px rgba(255, 255, 255, 0.1);
        }
        
        .modal-header {
          position: relative;
          padding: 24px 24px 0;
          z-index: 20;
        }
        
        .modal-title {
          font-size: 1.5rem;
          font-weight: 700;
          color: #ffffff;
          margin: 0;
          background: linear-gradient(135deg, ${i[0]}, ${i[1]});
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        
        .modal-close {
          position: absolute;
          top: 24px;
          right: 24px;
          width: 32px;
          height: 32px;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          z-index: 20;
        }
        
        .modal-close:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.1);
          box-shadow: 0 0 20px ${i[0]}60;
        }
        
        .modal-close::before,
        .modal-close::after {
          content: '';
          position: absolute;
          width: 16px;
          height: 2px;
          background: #ffffff;
          border-radius: 1px;
        }
        
        .modal-close::before {
          transform: rotate(45deg);
        }
        
        .modal-close::after {
          transform: rotate(-45deg);
        }
        
        .modal-body {
          position: relative;
          padding: 24px;
          height: calc(100% - 80px);
          overflow-y: auto;
          z-index: 20;
          color: #ffffff;
        }
        
        .aurora-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0.6;
          pointer-events: none;
          z-index: 5;
          border-radius: 16px;
          overflow: hidden;
        }
        
        .aurora-layer {
          position: absolute;
          width: 120%;
          height: 120%;
          top: -10%;
          left: -10%;
          background: linear-gradient(
            var(--angle),
            transparent 0%,
            var(--color1) 20%,
            var(--color2) 40%,
            transparent 60%,
            var(--color3) 80%,
            transparent 100%
          );
          animation: auroraFlow linear infinite;
          animation-duration: var(--duration);
          filter: blur(8px);
          opacity: var(--opacity);
        }
        
        .particle {
          position: absolute;
          width: 3px;
          height: 3px;
          background: ${i[0]};
          border-radius: 50%;
          pointer-events: none;
          opacity: 0.8;
          animation: particleFloat linear infinite;
          box-shadow: 0 0 6px currentColor;
        }
        
        .glow-effect {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 16px;
          opacity: 0;
          pointer-events: none;
          z-index: 15;
          transition: opacity 0.3s ease;
        }
        
        .glow-effect.active {
          opacity: 1;
          box-shadow: 
            0 0 40px ${i[0]}40,
            0 0 80px ${i[1]}30,
            0 0 120px ${i[2]}20;
        }
        
        @keyframes auroraFlow {
          0% { 
            transform: translateX(-50%) translateY(-50%) rotate(0deg);
          }
          100% { 
            transform: translateX(-50%) translateY(-50%) rotate(360deg);
          }
        }
        
        @keyframes particleFloat {
          0% {
            transform: translate(0, 100vh) scale(0);
            opacity: 0;
          }
          10% {
            opacity: 1;
            transform: translate(0, 90vh) scale(1);
          }
          90% {
            opacity: 1;
            transform: translate(var(--drift), 10vh) scale(1);
          }
          100% {
            transform: translate(var(--drift), 0) scale(0);
            opacity: 0;
          }
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
          .modal-container {
            width: 95vw;
            height: 80vh;
            margin: 10px;
          }
          
          .modal-header,
          .modal-body {
            padding: 16px;
          }
          
          .modal-title {
            font-size: 1.3rem;
          }
        }
        
        /* Animation entrance effects */
        .modal-container.entrance-fade {
          animation: fadeInScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .modal-container.entrance-slide {
          animation: slideInUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .modal-container.entrance-zoom {
          animation: zoomIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        @keyframes fadeInScale {
          0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.3);
          }
          100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
          }
        }
        
        @keyframes slideInUp {
          0% {
            opacity: 0;
            transform: translate(-50%, -30%) scale(0.9);
          }
          100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
          }
        }
        
        @keyframes zoomIn {
          0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.1);
          }
          100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
          }
        }
      </style>
      
      <div class="modal-backdrop" id="modalBackdrop"></div>
      
      <canvas class="aurora-canvas" id="auroraCanvas"></canvas>
      
      <div class="particle-layer" id="particleLayer"></div>
      
      <div class="modal-container" id="modalContainer">
        <div class="aurora-overlay" id="auroraOverlay"></div>
        <div class="glow-effect" id="glowEffect"></div>
        
        <div class="modal-content">
          <div class="modal-header">
            <h2 class="modal-title" id="modalTitle">
              <slot name="title">Modal Title</slot>
            </h2>
            <button class="modal-close" id="modalClose"></button>
          </div>
          
          <div class="modal-body">
            <slot name="content">
              <p>Modal content goes here...</p>
            </slot>
          </div>
        </div>
      </div>
    `}initializeElements(){this.elements={backdrop:this.shadowRoot.getElementById("modalBackdrop"),canvas:this.shadowRoot.getElementById("auroraCanvas"),particleLayer:this.shadowRoot.getElementById("particleLayer"),container:this.shadowRoot.getElementById("modalContainer"),auroraOverlay:this.shadowRoot.getElementById("auroraOverlay"),glowEffect:this.shadowRoot.getElementById("glowEffect"),closeButton:this.shadowRoot.getElementById("modalClose"),title:this.shadowRoot.getElementById("modalTitle")},this.setupCanvas()}attachEventListeners(){const e=a=>{a.stopPropagation(),this.hide()},t=a=>{this.config.closeOnBackdrop&&a.target===this.elements.backdrop&&this.hide()},o=a=>{this.state.mouseX=a.clientX,this.state.mouseY=a.clientY,this.updateInteractiveEffects()},i=a=>{a.key==="Escape"&&this.hide()};this.elements.closeButton.addEventListener("click",e),this.elements.backdrop.addEventListener("click",t),this.addEventListener("mousemove",o),document.addEventListener("keydown",i),this.cleanup.push(()=>{this.elements.closeButton.removeEventListener("click",e),this.elements.backdrop.removeEventListener("click",t),this.removeEventListener("mousemove",o),document.removeEventListener("keydown",i)})}setupCanvas(){const e=this.elements.canvas;this.ctx=e.getContext("2d");const t=()=>{e.width=window.innerWidth,e.height=window.innerHeight};t(),window.addEventListener("resize",t),this.cleanup.push(()=>{window.removeEventListener("resize",t)})}initializeAurora(){const e=this.colorPalettes[this.config.colorPalette]||this.colorPalettes.arctic;this.state.auroraLayers=[];for(let t=0;t<4;t++){const o={color1:e[t%e.length],color2:e[(t+1)%e.length],color3:e[(t+2)%e.length],speed:.5+Math.random()*1.5,angle:Math.random()*360,opacity:.3+Math.random()*.4,phase:Math.random()*Math.PI*2};this.state.auroraLayers.push(o)}this.createAuroraLayers(),this.initializeParticles()}createAuroraLayers(){const e=this.elements.auroraOverlay;e.innerHTML="",this.state.auroraLayers.forEach((t,o)=>{const i=document.createElement("div");i.className="aurora-layer",i.style.setProperty("--color1",t.color1+"40"),i.style.setProperty("--color2",t.color2+"60"),i.style.setProperty("--color3",t.color3+"30"),i.style.setProperty("--angle",t.angle+"deg"),i.style.setProperty("--duration",20/(t.speed*this.config.auroraSpeed)+"s"),i.style.setProperty("--opacity",t.opacity*this.config.auroraIntensity),e.appendChild(i)})}initializeParticles(){const e=this.elements.particleLayer;e.innerHTML="";const t=this.colorPalettes[this.config.colorPalette]||this.colorPalettes.arctic;for(let o=0;o<this.config.particleCount;o++){const i=document.createElement("div");i.className="particle",i.style.left=Math.random()*100+"%",i.style.color=t[Math.floor(Math.random()*t.length)],i.style.animationDuration=8+Math.random()*12+"s",i.style.animationDelay=Math.random()*20+"s",i.style.setProperty("--drift",(Math.random()-.5)*200+"px"),e.appendChild(i)}}updateInteractiveEffects(){if(!this.config.open)return;const e=this.getBoundingClientRect(),t=this.state.mouseX-e.left,o=this.state.mouseY-e.top;t>0&&t<e.width&&o>0&&o<e.height?this.elements.glowEffect.classList.add("active"):this.elements.glowEffect.classList.remove("active")}renderFluidAurora(){if(!this.ctx||!this.config.open)return;const{canvas:e,ctx:t}=this,{auroraIntensity:o,auroraSpeed:i}=this.config;t.clearRect(0,0,e.width,e.height);const a=this.colorPalettes[this.config.colorPalette]||this.colorPalettes.arctic,l=3;for(let s=0;s<l;s++){t.save();const r=t.createLinearGradient(0,0,e.width,e.height),c=a[s%a.length],h=a[(s+1)%a.length];r.addColorStop(0,this.hexToRgba(c,0)),r.addColorStop(.3,this.hexToRgba(c,.3*o)),r.addColorStop(.7,this.hexToRgba(h,.2*o)),r.addColorStop(1,this.hexToRgba(h,0)),t.fillStyle=r,t.beginPath();const d=100+s*50,p=.01+s*.005,f=this.state.wavePhase+s*Math.PI/3;for(let n=0;n<=e.width;n+=10){const m=e.height/2+Math.sin(n*p+f)*d+Math.sin(n*p*2+f*1.5)*(d/3);n===0?t.moveTo(n,m):t.lineTo(n,m)}t.lineTo(e.width,e.height),t.lineTo(0,e.height),t.closePath(),t.fill(),t.restore()}this.state.wavePhase+=.02*i}startAnimation(){const e=()=>{this.renderFluidAurora(),this.animationId=requestAnimationFrame(e)};e()}stopAnimation(){this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null),this.openTimeout&&clearTimeout(this.openTimeout),this.closeTimeout&&clearTimeout(this.closeTimeout)}updateStyling(){this.render(),this.initializeElements(),this.attachEventListeners(),this.initializeAurora()}hexToRgb(e){const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?`${parseInt(t[1],16)}, ${parseInt(t[2],16)}, ${parseInt(t[3],16)}`:"0, 255, 255"}hexToRgba(e,t){return`rgba(${this.hexToRgb(e)}, ${t})`}show(e="fade"){this.state.isAnimating||(this.state.isAnimating=!0,this.config.open=!0,this.setAttribute("open",""),document.body.style.overflow="hidden",this.elements.container.classList.add(`entrance-${e}`),this.classList.add("show"),this.openTimeout=setTimeout(()=>{this.state.isAnimating=!1,this.elements.container.classList.remove(`entrance-${e}`)},600),this.dispatchEvent(new CustomEvent("modal-open",{detail:{modal:this}})))}hide(){this.state.isAnimating||!this.config.open||(this.state.isAnimating=!0,this.config.open=!1,this.removeAttribute("open"),this.classList.remove("show"),this.closeTimeout=setTimeout(()=>{this.state.isAnimating=!1,document.body.style.overflow=""},400),this.dispatchEvent(new CustomEvent("modal-close",{detail:{modal:this}})))}toggle(){this.config.open?this.hide():this.show()}isOpen(){return this.config.open}setTitle(e){const t=this.querySelector('[slot="title"]');t&&(t.textContent=e)}setContent(e){const t=this.querySelector('[slot="content"]');t&&(typeof e=="string"?t.innerHTML=e:(t.innerHTML="",t.appendChild(e)))}}customElements.define("l-aurora-modal",LAuroraModal);