distortion-wave 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lucas Bonomi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,205 @@
-# Temporary Holding Version
+# distortion-wave
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A distortion-wave transition for **any DOM element**. A button, a card, a tab panel, the whole page.
+
+You give it an element and a function that changes the DOM. It captures the element before and after, then one WebGL2 pass carries the old state into the new one: the screen gets pulled toward the source, a lensed, blurred, colourful wave leaves from where you touched, and its colour lingers on the edges.
+
+![The wave crossing a payment screen](docs/preview.png)
+
+Inspired by Jakub Antalik's [Distortion Waves](https://libraries.dev/waves) for SwiftUI. This is an independent web implementation, not affiliated with libraries.dev.
+
+- Zero dependencies, ~17 kB gzipped
+- Same model as `document.startViewTransition()`
+- Your update **always** runs: no WebGL, element off screen, reduced motion, capture error… you just get the change without the wave
+- Keyboard focus is kept when your update replaces the focused control
+
+## Install
+
+```sh
+npm i distortion-wave
+```
+
+From a CDN, no build step (CodePen, a plain HTML page…):
+
+```html
+<script type="module">
+  import { distortionWave } from 'https://cdn.jsdelivr.net/npm/distortion-wave@0.1/+esm';
+</script>
+```
+
+Or the IIFE build, which exposes `window.DistortionWave`:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/distortion-wave@0.1/dist/distortion-wave.iife.min.js"></script>
+```
+
+## Usage
+
+```js
+import { distortionWave, warmupWave } from 'distortion-wave';
+
+warmupWave(); // optional: compiles the shaders before the first click
+
+confirmButton.addEventListener('click', (event) => {
+  distortionWave(screen, () => {
+    screen.dataset.state = 'sent';       // any DOM change: classes, innerHTML, a re-render…
+  }, {
+    source: confirmButton,               // where the wave starts
+    focus: event,                        // the touch point: the wave leaves from there and leans that way
+  });
+});
+```
+
+The source can be inside or outside the target. When it is outside, the wave enters from that edge and travels toward the bulk of the target.
+
+### A single button
+
+```js
+button.addEventListener('click', (event) => {
+  distortionWave(button, () => {
+    button.textContent = 'Subscribed';
+  }, { focus: event });                  // no source: a ring from the touch point
+});
+```
+
+### The whole page (theme switch)
+
+```js
+themeSwitch.addEventListener('click', (event) => {
+  distortionWave(document.querySelector('#app'), () => {
+    app.dataset.theme = app.dataset.theme === 'dark' ? 'light' : 'dark';
+  }, { source: themeSwitch, focus: event });
+});
+```
+
+Only the part visible in the viewport is captured and animated, so a long page costs the same as a screen.
+
+### React
+
+The DOM has to be updated when your callback returns, so wrap the state change in `flushSync` (same as with View Transitions):
+
+```jsx
+import { flushSync } from 'react-dom';
+import { distortionWave } from 'distortion-wave';
+
+function Checkout() {
+  const screen = useRef(null);
+  const [sent, setSent] = useState(false);
+  return (
+    <div ref={screen} className="screen">
+      {sent ? <Receipt /> : <Review />}
+      <button onClick={(e) => distortionWave(screen.current, () => flushSync(() => setSent(true)), { source: e.currentTarget, focus: e })}>
+        Confirm
+      </button>
+    </div>
+  );
+}
+```
+
+### Shortcut
+
+```js
+import { waveOnClick } from 'distortion-wave';
+waveOnClick(trigger, target, (event) => { /* update */ }, { palette: 'ocean' });
+```
+
+`waveOnClick` also pre-captures the target when the pointer enters the trigger or it gets focus, so the "before" capture costs nothing at click time.
+
+## Examples
+
+- [`demo/`](demo/): a payment screen, a single button, a tab panel, a media card, an element that changes size and a whole-page theme switch.
+- [`examples/ui-kit/`](examples/ui-kit/): buttons and UI elements (like, follow, status pill, copy, filter chips, a settings switch, add to cart, pricing tabs, a newsletter form, theme switch). `index.html`, `style.css` and `script.js` paste straight into CodePen; `standalone.html` opens from disk.
+
+## API
+
+### `distortionWave(target, update?, options?) → WaveTransition`
+
+| Option | Default | |
+|---|---|---|
+| `source` | touch point, else center | `Element`, `DOMRect`, `{ x, y }` |
+| `focus` | `null` | the `PointerEvent`/`MouseEvent` (or `{ x, y }`). Keyboard clicks are ignored: the wave starts centered |
+| `variant` | `'auto'` | `'vertical'`, `'horizontal'`, `'center'`. Auto: wide source → vertical, tall → horizontal, square or point → center |
+| `palette` | `'aurora'` | `'aurora'`, `'ocean'`, `'mint'`, `'ember'`, or up to 8 hex colours (interpolated in OKLab) |
+| `speed` | `1` | `0.3` for slow motion |
+| `particles` | `true` | `false`, or a count |
+| `reducedMotion` | follows `prefers-reduced-motion` | `true` gives a 220 ms crossfade |
+| `preserveFocus` | `true` | move focus to the equivalent control if the update replaced the focused one |
+| `timeout` | `3000` | max ms to wait for the "after" capture |
+| `onLaunch`, `onCovered`, `onSettled`, `onEnd(metrics)` | | callbacks |
+
+Any preset key (`amplitude`, `blur`, `rimWidth`, `lead`, `tail`, `swell`, `aberration`…) can be overridden too. Values are given for a 360×740 screen and scaled to the target, so a button gets a thinner rim and a shorter wave.
+
+`WaveTransition` mirrors `ViewTransition`:
+
+| | |
+|---|---|
+| `ready` | the overlay is up and animating |
+| `updateCallbackDone` | your update finished (rejects if it threw) |
+| `covered` | the old state is no longer visible |
+| `finished` | the overlay is gone, the real DOM is back |
+| `skip()` | jump to the end (the update still runs) |
+| `metrics` | `{ captureBefore, captureAfter, upload, worstFrame }` in ms |
+
+### Other exports
+
+- `warmupWave()`: creates a WebGL context and compiles the shaders ahead of time.
+- `prepareWave(target)`: pre-captures a target. Invalidated by any mutation.
+- `snapshotElement(el, { dpr, clip })`: the DOM → canvas capture on its own.
+- `PALETTES`, `PRESETS`, `scaleConfig`, `totalDuration`, `frameState`: the pure core, if you want to drive your own renderer.
+
+## How it works
+
+1. **Capture.** The element is cloned with every node's computed style inlined (pseudo-elements, form state, open shadow DOM, images and fonts turned into data URLs), serialized into an SVG `<foreignObject>`, and rasterized by the browser itself.
+2. **Update.** The real element goes `opacity: 0` (it stays focusable and in the accessibility tree), a canvas sits on top, and your update runs during the anticipation.
+3. **Capture again**, then build a blur pyramid once: sharp, near and far.
+4. **One full-screen pass per frame.** A signed distance field gives the wave front. Around it the shader stacks a lens along the normal, chromatic aberration, a progressive blur blended from the pyramid, a colour band in OKLab, a rim on the element's own rounded corners, and dithering. Particles are drawn as points.
+5. **Hand back.** As soon as the lens and blur are gone, the real element is shown again under the canvas and becomes interactive. The canvas only paints the lingering rim, then leaves.
+
+All the timing lives in a pure function, `frameState(t, config, geometry)`. The GPU only paints, so any frame can be reproduced and tested.
+
+## Performance
+
+Capture times measured in headless Chrome at DPR 1, warm: a button ~2 ms, a card ~9 ms, a phone-sized screen ~13 ms, a whole app UI (100+ nodes) 50–75 ms. The anticipation phase hides them.
+
+The rendering cost is one full-screen pass per frame (up to ~18 texture reads per pixel near the wave front, far fewer elsewhere). The DPR is capped at 2 and textures at ~4 Mpx. Up to 4 WebGL contexts are pooled and reused.
+
+## Accessibility
+
+- `prefers-reduced-motion` gives a short crossfade, no distortion.
+- The trigger stays a real `<button>`. Keyboard activation works, and the wave starts centered.
+- Focus is preserved when your update re-renders the focused control (same `id`, `data-focus-key` or `name`, then the same place in the tree). Text selection is kept. If your app moves focus itself, it is left alone.
+- No flashing: the shimmer stays well under 3 flashes per second.
+
+## Browser support & limits
+
+- Needs WebGL2. Without it, the update runs with no animation.
+- **Tested in Chromium only so far.** Safari and Firefox still need testing; Safari has a history of quirks with `foreignObject` images.
+- Not captured: iframes (empty box), cross-origin images without CORS (transparent), inner scroll positions, `<use href="#…">` pointing outside the target.
+- `body` and `html` cannot be targets. Wrap your app in an element.
+- A target with `transform: scale()` may be slightly offset.
+
+## Development
+
+```sh
+npm install
+npm run build          # dist/ + demo/standalone.html
+npm test               # unit tests for the pure core (node:test)
+npx playwright install chromium
+npm run test:browser   # end-to-end checks in Chromium (WebGL2 via SwiftShader)
+npm run demo           # serves the repo; open /demo/
+```
+
+`demo/standalone.html` opens straight from disk, no server needed.
+
+```
+src/
+  index.js      orchestration and public API
+  core.js       pure: config, scaling, timeline, particles
+  renderer.js   WebGL2 shaders, blur pyramid, context pool
+  capture.js    DOM → bitmap through SVG foreignObject
+  focus.js      keyboard focus preservation
+```
+
+## License
+
+MIT © Lucas Bonomi

package/dist/distortion-wave.iife.min.js

@@ -0,0 +1,159 @@
+/*! distortion-wave · MIT © Lucas Bonomi · https://github.com/LukyVj/distortion-wave */
+var DistortionWave=(()=>{var X=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var Lt=Object.getOwnPropertyNames;var kt=Object.prototype.hasOwnProperty;var Ct=(e,t)=>{for(var i in t)X(e,i,{get:t[i],enumerable:!0})},Dt=(e,t,i,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Lt(t))!kt.call(e,r)&&r!==i&&X(e,r,{get:()=>t[r],enumerable:!(n=Nt(t,r))||n.enumerable});return e};var Ut=e=>Dt(X({},"__esModule",{value:!0}),e);var he={};Ct(he,{PALETTES:()=>M,PRESETS:()=>H,distortionWave:()=>Ft,frameState:()=>G,prepareWave:()=>Mt,scaleConfig:()=>V,snapshotElement:()=>T,totalDuration:()=>B,warmupWave:()=>Rt,waveOnClick:()=>ue});var pt="http://www.w3.org/1999/xhtml",D="http://www.w3.org/2000/svg",lt="http://www.w3.org/1999/xlink",Bt=new Set(["script","style","link","meta","template","noscript","source","track","base","title"]),Ot=new Set(["background-image","mask-image","-webkit-mask-image","border-image-source","list-style-image"]),mt="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",It=e=>e.startsWith("--")||e.startsWith("transition")||e.startsWith("animation")||e==="cursor"||e==="will-change"||e==="view-transition-name"||e==="pointer-events",w=null,ct=new Map;function Wt(){if(w?.isConnected)return w.contentDocument;w=document.createElement("iframe"),w.setAttribute("aria-hidden","true"),w.setAttribute("data-dw-ignore",""),w.tabIndex=-1,w.style.cssText="position:fixed;left:-99999px;top:0;width:16px;height:16px;border:0;opacity:0;pointer-events:none",document.documentElement.appendChild(w);let e=w.contentDocument;return e.open(),e.write("<!doctype html><html><head></head><body></body></html>"),e.close(),e}function ut(e){let t=e.namespaceURI===D,i=(t?"svg:":"")+e.localName+(e.localName==="input"?":"+(e.type||"text"):""),n=ct.get(i);if(n)return n;let r=Wt(),a=t?r.createElementNS(D,e.localName):r.createElement(e.localName);if(e.localName==="input")try{a.type=e.type}catch{}r.body.appendChild(a);let o=w.contentWindow.getComputedStyle(a);n=new Map;for(let l=0;l<o.length;l++)n.set(o[l],o.getPropertyValue(o[l]));return a.remove(),ct.set(i,n),n}function ht(e,t,i,n,r){let a="";for(let o=0;o<e.length;o++){let l=e[o];if(It(l))continue;let s=e.getPropertyValue(l);s&&(s===t.get(l)&&(n||!i||i.getPropertyValue(l)===s)||(r&&Ot.has(l)&&s.includes("url(")&&r(l,s),a+=`${l}:${s};`))}return a}var K=new Map;function U(e){if(e.startsWith("data:"))return Promise.resolve(e);let t=K.get(e);return t||(t=fetch(e,{mode:"cors",credentials:"same-origin"}).then(i=>{if(!i.ok)throw new Error(`${i.status} ${e}`);return i.blob()}).then(i=>new Promise((n,r)=>{let a=new FileReader;a.onload=()=>n(a.result),a.onerror=r,a.readAsDataURL(i)})),t.catch(()=>K.delete(e)),K.set(e,t)),t}async function qt(e){let t=[...e.matchAll(/url\((['"]?)(.*?)\1\)/g)].map(n=>n[2]).filter(n=>!n.startsWith("data:")),i=e;for(let n of t)try{i=i.split(n).join(await U(new URL(n,document.baseURI).href))}catch{}return i}function zt(e){if(e.localName==="canvas")return e.toDataURL();let t=document.createElement("canvas");return t.width=e.videoWidth||e.clientWidth,t.height=e.videoHeight||e.clientHeight,t.getContext("2d").drawImage(e,0,0,t.width,t.height),t.toDataURL()}async function $t(e,t){try{return await U(t)}catch{}try{let i=document.createElement("canvas");return i.width=e.naturalWidth,i.height=e.naturalHeight,i.getContext("2d").drawImage(e,0,0),i.toDataURL()}catch{return mt}}var dt="",C=null;function Xt(){let e=[...document.fonts].filter(i=>i.status==="loaded"),t=e.map(i=>`${i.family}|${i.style}|${i.weight}|${i.unicodeRange}`).join(";");return C&&t===dt||(dt=t,C=Kt(e)),C}async function Kt(e){if(!e.length)return"";let t=l=>String(l||"").replace(/["']/g,"").replace(/\s+/g,"").toLowerCase(),i=(l,s)=>{let c=u=>(u=String(u||"400").trim().toLowerCase(),{normal:"400",bold:"700"}[u]||u);return l=c(l),s=c(s),l===s||l.includes(" ")||s.includes(" ")},n=l=>e.some(s=>t(s.family)===t(l.getPropertyValue("font-family"))&&t(s.style)===t(l.getPropertyValue("font-style")||"normal")&&i(s.weight,l.getPropertyValue("font-weight")||"400")&&t(s.unicodeRange)===t(l.getPropertyValue("unicode-range")||"U+0-10FFFF")),r=[],a=(l,s)=>{for(let c of l)if(c instanceof CSSFontFaceRule)r.push([c,s]);else if(c instanceof CSSImportRule)try{c.styleSheet&&a(c.styleSheet.cssRules,c.styleSheet.href||s)}catch{}else c.cssRules&&a(c.cssRules,s)};for(let l of[...document.styleSheets,...document.adoptedStyleSheets||[]]){let s=l.href||document.baseURI;try{a(l.cssRules,s)}catch{if(!l.href)continue;try{let c=await(await fetch(l.href)).text(),u=new CSSStyleSheet;u.replaceSync(c.replace(/@import[^;]+;/g,"")),a(u.cssRules,l.href)}catch{}}}let o=[];for(let[l,s]of r){if(!n(l.style))continue;let c=l.style.getPropertyValue("src").match(/url\((['"]?)(.*?)\1\)/);if(c)try{let u=await U(new URL(c[2],s).href);o.push(l.cssText.replace(/src\s*:[^;}]+;?/,`src:url("${u}");`))}catch{}}return o.join(`
+`)}function*Ht(e){let t=e.shadowRoot||e;for(let i of t.childNodes){if(i.nodeType===1&&i.localName==="slot"){let n=i.assignedNodes({flatten:!0});if(n.length){yield*n;continue}}yield i}}var ft=null;function gt(e,t,i,n){if(e.nodeType===3)return document.createTextNode(e.data);if(e.nodeType!==1)return null;let r=e.localName;if(Bt.has(r)||e.hasAttribute("data-dw-ignore"))return null;let a=getComputedStyle(e);if(a.display==="none")return null;let o;if(r==="canvas"||r==="video"){o=document.createElement("img");try{o.setAttribute("src",zt(e))}catch{o=document.createElement("div")}}else r==="iframe"||r==="embed"||r==="object"?o=document.createElement("div"):o=e.cloneNode(!1);for(let c of[...o.attributes]){let u=c.name.toLowerCase();(u.startsWith("on")||u==="srcset"||u==="sizes"||u==="loading"||u==="style"||u==="class")&&o.removeAttribute(c.name)}if(r==="img"){let c=e.currentSrc||e.src;o.setAttribute("src",mt),c&&n.tasks.push($t(e,c).then(u=>o.setAttribute("src",u)))}if(e.namespaceURI===D&&r==="image"){let c=e.getAttribute("href")||e.getAttributeNS(lt,"href");c&&!c.startsWith("data:")&&(o.removeAttribute("href"),o.removeAttributeNS(lt,"href"),n.tasks.push(U(new URL(c,document.baseURI).href).then(u=>o.setAttribute("href",u)).catch(()=>{})))}let l=[],s=ht(a,ut(e),t,i,(c,u)=>l.push([c,u]));i&&(s+=n.rootOverrides(a)),s+="transition:none;animation:none;",o.setAttribute("style",s);for(let[c,u]of l)n.tasks.push(qt(u).then(h=>{h!==u&&o.setAttribute("style",o.getAttribute("style").replace(`${c}:${u};`,`${c}:${h};`))}));if(e.namespaceURI===pt||!e.namespaceURI)for(let c of["::before","::after"]){let u=getComputedStyle(e,c),h=u.getPropertyValue("content");if(!h||h==="none"||h==="normal")continue;let d="dw"+(n.n++).toString(36);o.classList.add(d),ft??=document.createElement("span"),n.css+=`.${d}${c}{${ht(u,ut(ft),a,!1,null)}}`}if(r==="input"&&(e.type==="checkbox"||e.type==="radio"?e.checked?o.setAttribute("checked",""):o.removeAttribute("checked"):e.type!=="file"&&e.type!=="password"&&o.setAttribute("value",e.value)),r==="textarea")return o.textContent=e.value,o;if(r==="canvas"||r==="video"||r==="iframe"||r==="embed"||r==="object")return o;for(let c of Ht(e)){let u=gt(c,a,!1,n);u&&o.appendChild(u)}return r==="select"&&[...o.querySelectorAll("option")].forEach((c,u)=>{u===e.selectedIndex?c.setAttribute("selected",""):c.removeAttribute("selected")}),o}var Vt=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");async function T(e,{dpr:t=1,clip:i=null,rootOpacity:n=null}={}){let r=performance.now();await document.fonts.ready;let a=e.getBoundingClientRect(),o=e.offsetWidth??a.width,l=e.offsetHeight??a.height,s=i??{x:0,y:0,w:o,h:l},c={tasks:[],css:"",n:0,rootOverrides:R=>`margin:0!important;position:relative!important;inset:auto!important;float:none!important;transform:none!important;translate:none!important;rotate:none!important;scale:none!important;box-sizing:border-box!important;width:${o}px!important;height:${l}px!important;`+(R.display.startsWith("inline")&&R.display!=="inline-block"&&R.display!=="inline-flex"&&R.display!=="inline-grid"?"display:inline-block!important;":"")+(n!=null?`opacity:${n}!important;`:"")},u=gt(e,null,!0,c);if(!u)throw new Error("distortion-wave: element is not rendered (display:none?)");await Promise.all(c.tasks);let h=await Xt(),d=new XMLSerializer().serializeToString(u),p=Math.max(1,Math.round(s.w)),f=Math.max(1,Math.round(s.h)),m=`<svg xmlns="${D}" width="${p}" height="${f}"><foreignObject x="0" y="0" width="${p}" height="${f}"><div xmlns="${pt}" style="position:relative;width:${p}px;height:${f}px;overflow:hidden;margin:0;padding:0"><style>${Vt(h+c.css)}</style><div style="position:absolute;left:${-s.x}px;top:${-s.y}px;width:${o}px;height:${l}px">${d}</div></div></foreignObject></svg>`,x=new Image;x.decoding="async",x.src="data:image/svg+xml;charset=utf-8,"+encodeURIComponent(m),await x.decode();let g=document.createElement("canvas");g.width=Math.max(1,Math.round(p*t)),g.height=Math.max(1,Math.round(f*t));let S=g.getContext("2d",{willReadFrequently:!1});return S.drawImage(x,0,0,g.width,g.height),S.getImageData(0,0,1,1),{canvas:g,w:p,h:f,dpr:t,ms:performance.now()-r,bytes:m.length}}var yt=Math.PI*2,b=(e,t=0,i=1)=>Math.min(Math.max(e,t),i),v=(e,t,i)=>e+(t-e)*i,vt=e=>e-Math.floor(e),y=(e,t,i)=>{let n=b((i-e)/(t-e||1e-6));return n*n*(3-2*n)};function wt(e,t,i,n){let r=(a,o,l)=>{let s=1-a;return 3*s*s*a*o+3*s*a*a*l+a*a*a};return a=>{if(a<=0)return 0;if(a>=1)return 1;let o=0,l=1;for(let s=0;s<22;s++){let c=(o+l)/2;r(c,e,i)<a?o=c:l=c}return r((o+l)/2,t,n)}}var Gt=wt(.2,1,.3,1),xt=wt(.45,0,.55,1);function bt(e){let t=parseInt(e.replace("#",""),16),[i,n,r]=[t>>16&255,t>>8&255,t&255].map(s=>(s/=255,s<=.04045?s/12.92:((s+.055)/1.055)**2.4)),a=Math.cbrt(.4122214708*i+.5363325363*n+.0514459929*r),o=Math.cbrt(.2119034982*i+.6806995451*n+.1073969566*r),l=Math.cbrt(.0883024619*i+.2817188376*n+.6299787005*r);return[.2104542553*a+.793617785*o-.0040720468*l,1.9779984951*a-2.428592205*o+.4505937099*l,.0259040371*a+.7827717662*o-.808675766*l]}var M={aurora:["#FF4FD8","#A35BFF","#5B7CFF","#38D9FF","#FFD36B","#FF7A5C"],ocean:["#3A7BFF","#2EE6D6","#7C5CFF","#1FB6FF","#B8F2FF"],mint:["#2BD67B","#B6FF5C","#1FC8A9","#E8FFB0","#3CE0C0"],ember:["#FF5A3C","#FFB23C","#FF3C8E","#FFE07A","#FF7F50"]},E={type:"vertical",speed:1,anticipation:.45,travel:2.2,linger:-.3,rimFade:2.8,hairDelay:.45,hairFade:2.8,pull:22,inhale:50,gatherGlow:.35,gatherDots:1,amplitude:32,lensWidth:140,aberration:.75,swell:20,blur:18,blurNear:6,blurAhead:90,blurBehind:230,lead:120,tail:280,band:.9,rimWidth:14,rimSoftness:320,rimStrength:.85,uneven:1,hairWidth:1.5,lean:.9,margin:60,seam:48,particles:64,particleSize:1.8,particleLife:2.1,reach:140,spread:1,palette:"aurora"},H={vertical:E,horizontal:{...E,type:"horizontal"},center:{...E,type:"center",anticipation:.25,travel:3.2,linger:-.2,rimFade:2.4,hairDelay:.9,pull:14,inhale:32,gatherGlow:.2,gatherDots:0,amplitude:20,lensWidth:90,aberration:.35,swell:13,blur:11,blurAhead:54,blurBehind:140,lead:80,tail:180,band:.75,rimStrength:.7,rimSoftness:200,particles:90,particleLife:3,reach:90,spread:.65}},Yt=["pull","inhale","amplitude","lensWidth","swell","blur","blurNear","blurAhead","blurBehind","lead","tail","rimWidth","rimSoftness","reach","margin","seam"],jt=["anticipation","travel","linger","rimFade","hairDelay","hairFade","particleLife"];function V(e,t,i){let n=b(Math.sqrt(t*i)/516,.12,1.8),r=b(.45+.55*Math.sqrt(n),.6,1.15)/(e.speed||1),a={...e,k:n};for(let o of Yt)a[o]=e[o]*n;for(let o of jt)a[o]=e[o]*r;return a.blurNear=Math.max(a.blurNear,1.2),a.blur=Math.max(a.blur,a.blurNear),a.rimWidth=Math.max(a.rimWidth,2.5),a.seam=Math.max(a.seam,4),a.anticipation=Math.max(a.anticipation,.2/(e.speed||1)),a.particles=Math.round(e.particles*b(n,.3,1.5)),a.particleSize=e.particleSize*b(.6+.4*n,.7,1.3),a}var B=e=>e.anticipation+Math.max(e.travel*.6,e.linger+e.rimFade,e.linger+e.hairDelay+e.hairFade,e.particleLife);function Qt(e,t,i,n,r,a){let o=Math.cos(i),l=Math.sin(i),s=0;for(let[c,u]of[[0,0],[r,0],[0,a],[r,a]]){let h=c-e,d=u-t;s=Math.max(s,Math.hypot((o*h+l*d)*n,-l*h+o*d))}return s}function G(e,t,i){let n=t.type==="center",r=t.type==="horizontal",a=B(t),o=b(e,0,a),l=o-t.anticipation,s=y(0,t.anticipation,o),c=b(l/t.travel),u=Gt(c),h=i.src,d=h.x+h.w/2,p=h.y+h.h/2,f=Math.max(Math.min(h.w,h.h)/2,1),m=(r?h.h:h.w)/2,x=(r?h.w:h.h)/2,g=r?Math.PI/2:0,S=Math.cos(g),R=Math.sin(g),P=(i.w/2-d)*Math.sin(g)+(i.h/2-p)*-Math.cos(g)>=0?1:-1,N=0;!n&&i.touch&&(N=b(((i.touch.x-d)*S+(i.touch.y-p)*R)/Math.max(m,1),-1,1)*t.lean);let L=y(0,.45,u),it=d+S*N*m*L,at=p+R*N*m*L,_=g+P*N*.45*L,$=n?1:1.4,k=Qt(it,at,_,$,i.w,i.h)+t.swell*$+t.margin,rt=l<0?f+t.inhale*(1-s):f+(k+t.margin*1.6-f)*u,nt=1-y(.2,.55,c),ot=t.gatherGlow*.5,Pt=y(0,.05,c)*nt,st=l>0&&rt-t.swell>k;return{time:o,fly:l,pre:s,prog:c,moved:u,ring:n,dir:P,r0:f,half:m,perp:x,cx:d,cy:p,ox:it,oy:at,tilt:_,squash:v(1,$,y(0,.5,u)),spine:n?0:Math.max(0,m-f)*(1-L),lx:Math.cos(_),ly:Math.sin(_),fx:P*Math.sin(_),fy:-P*Math.cos(_),radius:rt,swell:t.swell*y(0,.3,u),energy:Pt,pull:t.pull*s*(1-y(0,.22,l)),glow:l<0?ot*s:v(ot,1,y(0,.07,c))*nt,clear:v(f-t.rimSoftness,k+t.rimSoftness,xt((l-t.linger)/t.rimFade)),hairClear:v(f-t.rimSoftness,k+t.rimSoftness,xt((l-t.linger-t.hairDelay)/t.hairFade)),rim:t.rimStrength*y(0,.1,c)*(1-y(.9,1,o/a)),hold:n&&i.hold?f:0,launched:l>0,covered:st,settled:st&&c>=.55}}function At(e,t){return Array.from({length:e},(i,n)=>{let r=a=>vt((n+1)*a);return{col:r(.6180339887)*2-1,gy:r(.7071067812),head:r(.1618033989)*yt,pace:.4+.65*Math.sqrt(r(.7548776662)),drift:12+45*r(.569840291),sway:3+10*r(.4142135624),swayHz:2+3*r(.7320508076),tw:7+10*r(.2360679775),ph:r(.3819660113)*yt,hop:r(.5497004779),life:t.particleLife*(.45+.55*r(.6457513111)),size:t.particleSize*(.55+.45*r(.8774)**2),bright:.35+.65*r(.6055512755)}})}function St(e,t,i){let n=.75+.25*Math.sin(t.time*e.tw+e.ph),r=i.k;if(!t.launched){if(!i.gatherDots)return null;let h=t.time/.32+e.hop,d=vt(h),p=y(0,.3,d)*(1-y(.6,1,d))*e.bright*n*y(0,i.anticipation*.35,t.time)*(1-y(i.anticipation*.75,i.anticipation,t.time)),f=i.reach*(1-d*d);if(t.ring){let g=e.head+Math.floor(h)*2.399963,S=t.r0+12*r+f;return{x:t.cx+Math.cos(g)*S,y:t.cy+Math.sin(g)*S,a:p}}let m=e.col*(t.half+16*r)*(1-.35*(1-d)),x=t.perp+10*r+f*(.45+.55*e.gy);return{x:t.cx+t.lx*m+t.fx*x,y:t.cy+t.ly*m+t.fy*x,a:p}}let a=t.fly,o=(1-y(e.life*.55,e.life,a))*e.bright*n*y(0,.08,a),l=e.sway*Math.max(r,.3)*Math.sin(e.swayHz*a+e.ph)*Math.min(a/.25,1),s=(t.radius-t.r0)*e.pace*i.spread;if(t.ring){let h=t.r0+s+e.drift*r*a,d=Math.cos(e.head),p=Math.sin(e.head);return{x:t.ox+d*h-p*l,y:t.oy+p*h+d*l,a:o}}let c=e.col*t.half*(1+.25*t.moved*e.pace)+l,u=(t.r0+s)*(1-.3*e.col*e.col)+e.drift*r*a;return{x:t.ox+t.lx*c+t.fx*u,y:t.oy+t.ly*c+t.fy*u,a:o}}var Y=`#version 300 es
+out vec2 vUv;
+void main() { vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2)); vUv = p; gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0); }`,Zt=`#version 300 es
+precision highp float; in vec2 vUv; uniform sampler2D uTex; uniform float uLod; out vec4 o;
+void main() { o = textureLod(uTex, vUv, uLod); }`,Jt=`#version 300 es
+precision highp float; in vec2 vUv; uniform sampler2D uTex; uniform vec2 uStep; uniform float uSigma; out vec4 o;
+void main() {
+  float R = min(ceil(uSigma * 3.0), 32.0); vec4 acc = vec4(0.0); float ws = 0.0;
+  for (int i = -32; i <= 32; i++) { float fi = float(i); if (abs(fi) > R) continue;
+    float w = exp(-0.5 * fi * fi / (uSigma * uSigma)); acc += textureLod(uTex, vUv + uStep * fi, 0.0) * w; ws += w; }
+  o = acc / ws;
+}`,te=`#version 300 es
+precision highp float; precision highp int;
+uniform vec2 uSize, uRes;
+uniform sampler2D uOld0, uOld1, uOld2, uNew0, uNew1, uNew2;
+uniform vec4 uOldRect, uNewRect, uShape, uRadii;   // rects in canvas CSS px; radii (br, tr, bl, tl)
+uniform int uMode;                                 // 0 before \xB7 1 live \xB7 2 after \xB7 3 crossfade \xB7 4 effects only (live DOM below)
+uniform float uFade;
+uniform bool uLaunched, uRing;
+uniform vec2 uOrigin;
+uniform float uTilt, uSpine, uRadius, uSquash, uTime, uSwell, uEnergy, uPull, uGlow, uRim, uClear, uHairClear, uHold, uK, uSeam;
+uniform float uAmp, uLensW, uAberr, uBlurMax, uBlurNear, uBlurAhead, uBlurBehind;
+uniform float uLead, uTail, uBand, uRimW, uRimSoft, uUneven, uHairW;
+uniform vec3 uPal[8]; uniform int uPalN;
+out vec4 outColor;
+const float TAU = 6.28318530718;
+
+mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, s, -s, c); }
+float ign(vec2 p) { return fract(52.9829189 * fract(dot(p, vec2(0.06711056, 0.00583715)))); }
+float h11(float x) { return fract(sin(x * 127.1) * 43758.5453); }
+float vnoise(float x) { float i = floor(x), f = fract(x); return mix(h11(i), h11(i + 1.0), f * f * (3.0 - 2.0 * f)) * 2.0 - 1.0; }
+float sdRoundBox(vec2 p, vec2 b, vec4 r) {         // y-down space: r = (bottom-right, top-right, bottom-left, top-left)
+  r.xy = (p.x > 0.0) ? r.xy : r.zw; r.x = (p.y > 0.0) ? r.x : r.y;
+  vec2 q = abs(p) - b + r.x; return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x;
+}
+struct Front { float d; vec2 n; vec2 q; float g; };
+Front front(vec2 p) {
+  vec2 q = rot(-uTilt) * (p - uOrigin); float mx = q.x * uSquash;
+  vec2 v = vec2(max(abs(mx) - uSpine, 0.0), q.y); float len = max(length(v), 1e-3);
+  vec2 grad = vec2(v.x * sign(q.x) * uSquash, v.y) / len; float g = max(length(grad), 1e-3);
+  float wob;
+  if (uRing) { float a = atan(q.y, q.x); wob = 0.5 * sin(3.0 * a + uTime * 1.3) + 0.3 * sin(5.0 * a - uTime * 0.9 + 2.1) + 0.2 * sin(2.0 * a + uTime * 2.0); }
+  else { float s = mx * 0.005 / uK; wob = 0.7 * vnoise(s + uTime * 0.8) + 0.3 * vnoise(s * 2.3 - uTime * 1.1 + 5.0); }
+  Front f; f.d = (len - uRadius) / g + uSwell * wob; f.n = rot(uTilt) * (grad / g); f.q = q; f.g = g; return f;
+}
+// The silhouette is decided by p (undisplaced); the sample by sp (displaced, clamped to the rect).
+// \u2192 content bends INSIDE the element, never revealing transparency or bleeding outside.
+vec4 tap(sampler2D s, vec4 rect, vec2 p, vec2 sp) {
+  vec2 q = (p - rect.xy) / rect.zw;
+  if (q.x < 0.0 || q.y < 0.0 || q.x > 1.0 || q.y > 1.0) return vec4(0.0);
+  return textureLod(s, clamp((sp - rect.xy) / rect.zw, 0.0, 1.0), 0.0);
+}
+vec4 fetch3(sampler2D s0, sampler2D s1, sampler2D s2, vec4 rect, vec2 p, vec2 sp, float tn, float tf) {
+  vec4 c = tap(s0, rect, p, sp);
+  if (tn > 0.0) c = mix(c, tap(s1, rect, p, sp), tn);
+  if (tf > 0.0) c = mix(c, tap(s2, rect, p, sp), tf);
+  return c;
+}
+vec4 layerOld(vec2 p, vec2 sp, vec2 sl, float tn, float tf) {
+  if (dot(sl, sl) < 0.01) return fetch3(uOld0, uOld1, uOld2, uOldRect, p, sp, tn, tf);
+  vec4 r = fetch3(uOld0, uOld1, uOld2, uOldRect, p, sp + sl, tn, tf), g = fetch3(uOld0, uOld1, uOld2, uOldRect, p, sp, tn, tf), b = fetch3(uOld0, uOld1, uOld2, uOldRect, p, sp - sl, tn, tf);
+  return vec4(r.r, g.g, b.b, max(max(r.a, g.a), b.a));
+}
+vec4 layerNew(vec2 p, vec2 sp, vec2 sl, float tn, float tf) {
+  if (dot(sl, sl) < 0.01) return fetch3(uNew0, uNew1, uNew2, uNewRect, p, sp, tn, tf);
+  vec4 r = fetch3(uNew0, uNew1, uNew2, uNewRect, p, sp + sl, tn, tf), g = fetch3(uNew0, uNew1, uNew2, uNewRect, p, sp, tn, tf), b = fetch3(uNew0, uNew1, uNew2, uNewRect, p, sp - sl, tn, tf);
+  return vec4(r.r, g.g, b.b, max(max(r.a, g.a), b.a));
+}
+vec3 paletteAt(float u) {
+  float x = fract(u) * float(uPalN); int i = min(int(floor(x)), uPalN - 1); int j = (i + 1) % uPalN;
+  return mix(uPal[i], uPal[j], smoothstep(0.0, 1.0, fract(x)));
+}
+vec3 oklabToSrgb(vec3 c) {
+  float l = c.x + 0.3963377774 * c.y + 0.2158037573 * c.z, m = c.x - 0.1055613458 * c.y - 0.0638541728 * c.z, s = c.x - 0.0894841775 * c.y - 1.2914855480 * c.z;
+  l = l * l * l; m = m * m * m; s = s * s * s;
+  vec3 lin = clamp(vec3(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s), 0.0, 1.0);
+  return mix(12.92 * lin, 1.055 * pow(lin, vec3(1.0 / 2.4)) - 0.055, step(vec3(0.0031308), lin));
+}
+void main() {
+  vec2 p = vec2(gl_FragCoord.x, uRes.y - gl_FragCoord.y) * (uSize.x / uRes.x);
+  float dn = (ign(gl_FragCoord.xy) - 0.5) / 255.0;
+  if (uMode == 0 || uMode == 2 || uMode == 3) {
+    vec4 a = tap(uOld0, uOldRect, p, p), b = tap(uNew0, uNewRect, p, p);
+    vec4 c = uMode == 0 ? a : uMode == 2 ? b : mix(a, b, uFade);
+    outColor = vec4(c.rgb + dn * c.a, c.a); return;
+  }
+  Front f = front(p);
+  vec2 r = p - uOrigin; float rl = max(length(r), 1.0);
+  float held = uHold > 0.0 ? smoothstep(uHold * 0.9, uHold * 1.8, rl) : 1.0;
+  vec4 col = vec4(0.0);
+  if (uMode == 1) {
+    float k = f.d / (uLensW * (f.d > 0.0 ? 0.8 : 1.6));
+    vec2 bulge = f.n * (uEnergy * uAmp * exp(-k * k) * held);
+    vec2 suck = (r / rl) * (uPull * (rl / (rl + 60.0 * uK)) * exp(-rl / (700.0 * uK)) * held);
+    vec2 sp = p - bulge + suck;
+    vec2 sl = (bulge * 0.5 - suck * exp(-rl / (240.0 * uK))) * uAberr;
+    float kb = f.d / (f.d > 0.0 ? uBlurAhead : uBlurBehind);
+    float bpx = uEnergy * uBlurMax * exp(-kb * kb) * held;
+    float tn = smoothstep(0.0, uBlurNear, bpx);
+    float tf = uBlurMax > uBlurNear ? smoothstep(uBlurNear, uBlurMax, bpx) : 0.0;
+    float cover = uLaunched ? smoothstep(-uSeam, uSeam, f.d) : 1.0;
+    if (cover >= 0.999) col = layerOld(p, sp, sl, tn, tf);
+    else if (cover <= 0.001) col = layerNew(p, sp, sl, tn, tf);
+    else col = mix(layerNew(p, sp, sl, tn, tf), layerOld(p, sp, sl, tn, tf), cover);
+    // the UNdisplaced alpha fixes the silhouette (rounded corners, transparent areas): no fill-in, no fringe outside
+    float aU = mix(tap(uNew0, uNewRect, p, p).a, tap(uOld0, uOldRect, p, p).a, cover);
+    col *= min(1.0, aU / max(col.a, 1e-4));
+  }
+  // element shape (per-corner radii): mask + rim
+  vec2 c = p - (uShape.xy + uShape.zw * 0.5);
+  float sd = sdRoundBox(c, uShape.zw * 0.5, uRadii);
+  float mask = clamp(0.5 - sd * (uRes.x / uSize.x), 0.0, 1.0);
+  float inset = max(-sd, 0.0);
+  float along = f.q.x * 0.0065 / uK, ang = atan(f.q.y, f.q.x);
+  float lobes = uRing ? 0.5 + 0.5 * sin(2.0 * ang + uTime * 1.4) * cos(ang - uTime * 0.6 + 0.8)
+                      : 0.5 + 0.5 * sin(along * 1.4 + uTime * 1.3) * cos(along * 0.7 - uTime * 0.6 + 0.8);
+  float bandA = 0.0;
+  if (uGlow > 0.0 && f.d < uLead) {
+    if (f.d >= 0.0) { float x = f.d / uLead; bandA = exp(-4.5 * x * x); }
+    else { float x = clamp(-f.d / (uTail * mix(0.55, 1.35, lobes)), 0.0, 1.0); bandA = pow(1.0 - x, 2.4); }
+    bandA *= uGlow * uBand * held;
+  }
+  float around = atan(c.y / uShape.w, c.x / uShape.z);
+  float rimA = 0.0, hairA = 0.0, shimmer = 0.5;
+  if (uRim > 0.0 && inset < uRimW * 4.5) {
+    float lumps = 0.5 * sin(around * 3.0 + uTime * 0.7) + 0.3 * sin(around * 5.0 - uTime * 1.2 + 2.0) + 0.2 * sin(around * 9.0 + uTime * 2.3 + 4.0);
+    float thick = max(1.0 + uUneven * 0.55 * lumps, 0.15);
+    float hk = inset / (uRimW * thick);
+    float reached = 1.0 - smoothstep(-uLead * 0.6, uLead * 0.4, f.d);
+    float kept = smoothstep(-uRimSoft, uRimSoft, f.d + (uRadius - uClear) / f.g);
+    shimmer = 0.5 + 0.5 * sin(uTime * 3.2 - around * 4.0);
+    rimA = exp(-hk * hk) * reached * kept * uRim * (0.72 + 0.28 * shimmer);
+    float line = 1.0 - smoothstep(uHairW * 0.5, uHairW * 0.5 + 0.8, inset);
+    float hairKept = smoothstep(-uRimSoft, uRimSoft, f.d + (uRadius - uHairClear) / f.g);
+    hairA = line * reached * hairKept * uRim * 0.85 * mix(0.55, 1.0, smoothstep(0.2, 1.4, thick));
+  }
+  float a = (1.0 - (1.0 - bandA) * (1.0 - rimA)) * mask;
+  hairA *= mask;
+  if (a + hairA < 0.0005) { outColor = vec4(col.rgb + dn * col.a, col.a); return; }
+  float flow = 0.6 + (uRing ? ang / TAU : along * 0.22) + uTime * 0.12 + f.d * 0.0016 / uK;
+  vec3 lab = paletteAt(flow);
+  lab.x += 0.10 * exp(-pow((f.d - 28.0 * uK) / (48.0 * uK), 2.0)) - 0.12 * exp(-pow((f.d + 90.0 * uK) / (70.0 * uK), 2.0));
+  lab.yz *= 1.2;
+  lab = mix(lab, vec3(0.985, 0.0, 0.0), 0.65 * exp(-pow((f.d + 6.0 * uK) / max(24.0 * uK, 3.0), 2.0)));
+  vec3 rimLab = paletteAt(around / TAU + uTime * 0.25 + inset * 0.0012 / uK); rimLab.yz *= 1.1;
+  lab = mix(lab, rimLab, rimA / (rimA + bandA + 1e-4));
+  float ea = clamp(a, 0.0, 1.0);
+  vec4 o = vec4(oklabToSrgb(lab) * ea, ea) + col * (1.0 - ea);
+  float ha = clamp(hairA, 0.0, 1.0);
+  o = vec4(mix(oklabToSrgb(rimLab), vec3(1.0), 0.6 + 0.35 * shimmer) * ha, ha) + o * (1.0 - ha);
+  outColor = vec4(o.rgb + dn * 2.0 * o.a, o.a);
+}`,ee=`#version 300 es
+layout(location = 0) in vec4 aDot; uniform vec2 uSize; uniform float uDpr; out float vA; out float vR; out float vPt;
+void main() { gl_Position = vec4(aDot.x / uSize.x * 2.0 - 1.0, 1.0 - aDot.y / uSize.y * 2.0, 0.0, 1.0);
+  vPt = ceil((aDot.z + 1.0) * uDpr) + 2.0; gl_PointSize = vPt; vR = aDot.z * 0.5 * uDpr; vA = aDot.w; }`,ie=`#version 300 es
+precision highp float; in float vA; in float vR; in float vPt; out vec4 o;
+void main() { float r = length(gl_PointCoord - 0.5) * vPt; float cov = clamp(vR - r + 0.5, 0.0, 1.0); o = vec4(vec3(cov * vA), cov * vA); }`;function O(e,t,i){let n=(o,l)=>{let s=e.createShader(o);if(e.shaderSource(s,l),e.compileShader(s),!e.getShaderParameter(s,e.COMPILE_STATUS))throw new Error(e.getShaderInfoLog(s)||"compile");return s},r=e.createProgram();if(e.attachShader(r,n(e.VERTEX_SHADER,t)),e.attachShader(r,n(e.FRAGMENT_SHADER,i)),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS))throw new Error(e.getProgramInfoLog(r)||"link");let a=new Map;return{p:r,u:o=>(a.has(o)||a.set(o,e.getUniformLocation(r,o)),a.get(o))}}var j=class{constructor(){this.canvas=document.createElement("canvas"),this.canvas.setAttribute("data-dw-ignore",""),this.canvas.setAttribute("aria-hidden","true"),this.canvas.style.cssText="position:fixed;left:0;top:0;pointer-events:none;z-index:2147483000;contain:strict;",this.layers={},this.pal=new Float32Array(24),this.palKey="",this.ok=!1,this.canvas.addEventListener("webglcontextlost",i=>{i.preventDefault(),this.ok=!1});let t=this.canvas.getContext("webgl2",{alpha:!0,premultipliedAlpha:!0,antialias:!1,depth:!1,stencil:!1,preserveDrawingBuffer:!1});t&&(this.gl=t,this.main=O(t,Y,te),this.blur=O(t,Y,Jt),this.copy=O(t,Y,Zt),this.dots=O(t,ee,ie),this.vao=t.createVertexArray(),this.dvao=t.createVertexArray(),this.dbuf=t.createBuffer(),this.dcap=0,t.bindVertexArray(this.dvao),t.bindBuffer(t.ARRAY_BUFFER,this.dbuf),t.enableVertexAttribArray(0),t.vertexAttribPointer(0,4,t.FLOAT,!1,16,0),t.bindVertexArray(null),this.maxTex=t.getParameter(t.MAX_TEXTURE_SIZE),this.ok=!0)}tex(t,i,n,r=!1){let a=this.gl,o=a.createTexture();return a.bindTexture(a.TEXTURE_2D,o),a.pixelStorei(a.UNPACK_FLIP_Y_WEBGL,!1),a.pixelStorei(a.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),n?a.texImage2D(a.TEXTURE_2D,0,a.RGBA8,a.RGBA,a.UNSIGNED_BYTE,n):a.texImage2D(a.TEXTURE_2D,0,a.RGBA8,t,i,0,a.RGBA,a.UNSIGNED_BYTE,null),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,r?a.LINEAR_MIPMAP_LINEAR:a.LINEAR),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MAG_FILTER,a.LINEAR),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE),a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE),r&&a.generateMipmap(a.TEXTURE_2D),o}target(t,i){let n=this.gl,r=this.tex(t,i,null),a=n.createFramebuffer();return n.bindFramebuffer(n.FRAMEBUFFER,a),n.framebufferTexture2D(n.FRAMEBUFFER,n.COLOR_ATTACHMENT0,n.TEXTURE_2D,r,0),{tex:r,fb:a}}pass(t,i,n,r){let a=this.gl;a.bindFramebuffer(a.FRAMEBUFFER,i),a.viewport(0,0,n,r),a.useProgram(t.p),a.bindVertexArray(this.vao),a.drawArrays(a.TRIANGLES,0,3)}blurred(t,i,n,r){let a=this.gl,o=Math.max(1,Math.round(r/4)),l=Math.max(1,Math.round(i/o)),s=Math.max(1,Math.round(n/o)),c=this.target(l,s),u=this.target(l,s);return a.activeTexture(a.TEXTURE0),a.bindTexture(a.TEXTURE_2D,t),a.useProgram(this.copy.p),a.uniform1i(this.copy.u("uTex"),0),a.uniform1f(this.copy.u("uLod"),Math.log2(o)),this.pass(this.copy,c.fb,l,s),a.useProgram(this.blur.p),a.uniform1i(this.blur.u("uTex"),0),a.uniform1f(this.blur.u("uSigma"),Math.max(r/o,.01)),a.bindTexture(a.TEXTURE_2D,c.tex),a.uniform2f(this.blur.u("uStep"),1/l,0),this.pass(this.blur,u.fb,l,s),a.bindTexture(a.TEXTURE_2D,u.tex),a.uniform2f(this.blur.u("uStep"),0,1/s),this.pass(this.blur,c.fb,l,s),a.deleteFramebuffer(u.fb),a.deleteTexture(u.tex),a.deleteFramebuffer(c.fb),a.bindFramebuffer(a.FRAMEBUFFER,null),c.tex}setLayer(t,i,n,r){if(!this.ok)return;this.dropLayer(t);let a=this.tex(i.width,i.height,i,!0);this.layers[t]={sharp:a,near:this.blurred(a,i.width,i.height,n),far:this.blurred(a,i.width,i.height,r)}}dropLayer(t){let i=this.layers[t];if(!(!i||!this.gl)){for(let n of[i.sharp,i.near,i.far])this.gl.deleteTexture(n);delete this.layers[t]}}clear(){for(let t of Object.keys(this.layers))this.dropLayer(t)}render(t){if(!this.ok)return;let i=this.gl,n=this.canvas.width,r=this.canvas.height,a=this.main,o=a.u,l=this.layers.old||this.layers.new,s=this.layers.new||this.layers.old;if(!l)return;i.bindFramebuffer(i.FRAMEBUFFER,null),i.viewport(0,0,n,r),i.disable(i.BLEND),i.useProgram(a.p),[["uOld0",l.sharp],["uOld1",l.near],["uOld2",l.far],["uNew0",s.sharp],["uNew1",s.near],["uNew2",s.far]].forEach(([p,f],m)=>{i.activeTexture(i.TEXTURE0+m),i.bindTexture(i.TEXTURE_2D,f),i.uniform1i(o(p),m)});let c=t.rects,u=(p,f)=>i.uniform4f(o(p),f.x,f.y,f.w,f.h);i.uniform2f(o("uSize"),t.w,t.h),i.uniform2f(o("uRes"),n,r),u("uOldRect",c.old),u("uNewRect",c.new||c.old),u("uShape",c.shape),i.uniform4f(o("uRadii"),c.radii.br,c.radii.tr,c.radii.bl,c.radii.tl),i.uniform1i(o("uMode"),t.mode),i.uniform1f(o("uFade"),t.fade||0);let h=t.s,d=t.cfg;if(h){i.uniform1i(o("uLaunched"),h.launched?1:0),i.uniform1i(o("uRing"),h.ring?1:0),i.uniform2f(o("uOrigin"),h.ox,h.oy);let p={uTilt:h.tilt,uSpine:h.spine,uRadius:h.radius,uSquash:h.squash,uTime:h.time,uSwell:h.swell,uEnergy:h.energy,uPull:h.pull,uGlow:h.glow,uRim:h.rim,uClear:h.clear,uHairClear:h.hairClear,uHold:h.hold,uK:d.k,uSeam:d.seam,uAmp:d.amplitude,uLensW:d.lensWidth,uAberr:d.aberration,uBlurMax:d.blur,uBlurNear:d.blurNear,uBlurAhead:d.blurAhead,uBlurBehind:d.blurBehind,uLead:d.lead,uTail:d.tail,uBand:d.band,uRimW:d.rimWidth,uRimSoft:d.rimSoftness,uUneven:d.uneven,uHairW:d.hairWidth};for(let x in p)i.uniform1f(o(x),p[x]);let f=Array.isArray(d.palette)?d.palette:M[d.palette]||M.aurora,m=f.join();this.palKey!==m&&(this.palKey=m,f.slice(0,8).forEach((x,g)=>this.pal.set(bt(x),g*3))),i.uniform3fv(o("uPal[0]"),this.pal),i.uniform1i(o("uPalN"),Math.min(f.length,8))}if(i.bindVertexArray(this.vao),i.drawArrays(i.TRIANGLES,0,3),t.dotCount>0){let p=this.dots;i.enable(i.BLEND),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.useProgram(p.p),i.uniform2f(p.u("uSize"),t.w,t.h),i.uniform1f(p.u("uDpr"),t.dpr),i.bindVertexArray(this.dvao),i.bindBuffer(i.ARRAY_BUFFER,this.dbuf),this.dcap<t.dots.length&&(i.bufferData(i.ARRAY_BUFFER,t.dots.byteLength,i.DYNAMIC_DRAW),this.dcap=t.dots.length),i.bufferSubData(i.ARRAY_BUFFER,0,t.dots,0,t.dotCount*4),i.drawArrays(i.POINTS,0,t.dotCount),i.disable(i.BLEND)}i.bindVertexArray(null)}},Q=[],I=0,ae=4;function Z(){for(;Q.length;){let e=Q.pop();if(e.ok)return e;I--}if(I>=ae)return null;try{let e=new j;return e.ok?(I++,e):null}catch(e){return console.warn("[distortion-wave]",e),null}}function J(e){e.clear(),e.canvas.remove(),e.ok?Q.push(e):I--}function Rt(){let e=Z();return e&&J(e),!!e}var W='a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),summary,[contenteditable="true"],[tabindex]:not([tabindex="-1"])';function _t(e){let t=document.activeElement;if(!t||t===document.body||!e.contains(t))return null;let i=[];for(let r=t;r&&r!==e;r=r.parentElement)i.unshift([...r.parentElement.children].indexOf(r));let n="selectionStart"in t?(()=>{try{return[t.selectionStart,t.selectionEnd]}catch{return null}})():null;return{el:t,id:t.id,key:t.getAttribute("data-focus-key")||t.getAttribute("name"),tag:t.localName,path:i,order:[...e.querySelectorAll(W)].indexOf(t),sel:n}}function Et(e,t){if(!e||e.el.isConnected)return;let i=document.activeElement;if(i&&i!==document.body&&i!==document.documentElement)return;let n=null;if(e.id&&(n=t.querySelector("#"+CSS.escape(e.id))),!n&&e.key&&(n=t.querySelector(`[data-focus-key="${CSS.escape(e.key)}"],[name="${CSS.escape(e.key)}"]`)),!n){let r=t;for(let a of e.path)r=r?.children[a];r&&r!==t&&r.localName===e.tag&&r.matches(W)&&(n=r)}if(!n&&e.order>=0){let r=t.querySelectorAll(W);n=r[Math.min(e.order,r.length-1)]||null}if(!n&&t.matches(W)&&(n=t),!!n&&(n.focus({preventScroll:!0}),e.sel&&typeof n.setSelectionRange=="function"))try{n.setSelectionRange(e.sel[0],e.sel[1])}catch{}}function re(e,t,i){let n=(c,u)=>{let h=String(c).trim().split(/\s+/)[0],d=parseFloat(h)||0;return h.endsWith("%")?d/100*u:d},r=n(e.borderTopLeftRadius,t),a=n(e.borderTopRightRadius,t),o=n(e.borderBottomRightRadius,t),l=n(e.borderBottomLeftRadius,t),s=Math.min(1,t/(r+a||1e9),t/(l+o||1e9),i/(r+l||1e9),i/(a+o||1e9));return{tl:r*s,tr:a*s,br:o*s,bl:l*s}}function ne(e){for(let t=e;t&&t!==document.documentElement;t=t.parentElement)if(getComputedStyle(t).position==="fixed")return!0;return!1}function tt(e){let t=e.getBoundingClientRect(),i=getComputedStyle(e),n=e.offsetWidth??t.width,r=e.offsetHeight??t.height,a=Math.max(t.left,0),o=Math.max(t.top,0),l=Math.min(t.right,innerWidth),s=Math.min(t.bottom,innerHeight),c=ne(e),u=c?0:scrollX,h=c?0:scrollY;return{w:n,h:r,fixed:c,opacity:i.opacity,radii:re(i,n,r),visible:l>a&&s>o,clip:{x:a-t.left,y:o-t.top,w:l-a,h:s-o},page:{x:a+u,y:o+h,w:l-a,h:s-o},el:{x:t.left+u,y:t.top+h,w:t.width,h:t.height}}}var oe=(e,t)=>{let i=Math.min(e.x,t.x),n=Math.min(e.y,t.y);return{x:i,y:n,w:Math.max(e.x+e.w,t.x+t.w)-i,h:Math.max(e.y+e.h,t.y+t.h)-n}},A=(e,t)=>({x:e.x-t.x,y:e.y-t.y,w:e.w,h:e.h}),se=()=>new Promise(e=>requestAnimationFrame(()=>e()));function q(){let e,t,i=new Promise((n,r)=>{e=n,t=r});return i.catch(()=>{}),{p:i,res:e,rej:t}}function Tt(e,t){let i=Math.max(e.clip.w*e.clip.h,1);return Math.max(.5,Math.min(window.devicePixelRatio||1,2,Math.sqrt(42e5/i),t/Math.max(e.clip.w,e.clip.h,1)))}var F=new WeakMap;function Mt(e){if(F.get(e)?.pending)return F.get(e).pending;let t=tt(e);if(!t.visible)return Promise.resolve(null);let i={dirty:!1,m:t,dpr:Tt(t,8192),at:performance.now()};return i.mo=new MutationObserver(()=>{i.dirty=!0}),i.mo.observe(e,{subtree:!0,childList:!0,attributes:!0,characterData:!0}),i.pending=T(e,{dpr:i.dpr,clip:t.clip}).then(n=>i.shot=n,()=>null),F.set(e,i),i.pending}function le(e,t){let i=F.get(e);if(!i)return null;F.delete(e),i.mo.disconnect();let n=(r,a)=>Math.abs(r.x-a.x)<.5&&Math.abs(r.y-a.y)<.5&&Math.abs(r.w-a.w)<.5&&Math.abs(r.h-a.h)<.5;return i.dirty||!i.shot||performance.now()-i.at>8e3||!n(i.m.page,t.page)?null:i.shot}var z=new WeakMap,ce={variant:"auto",palette:"aurora",speed:1,particles:!0,reducedMotion:null,timeout:3e3,preserveFocus:!0},et=class{constructor(t,i,n){this.target=t,this.update=i||(()=>{}),this.o={...ce,...n},this._d={ready:q(),update:q(),covered:q(),finished:q()},this.ready=this._d.ready.p,this.updateCallbackDone=this._d.update.p,this.covered=this._d.covered.p,this.finished=this._d.finished.p,this.metrics={},this._updated=!1,this._skipped=!1,this._done=!1,this._run().catch(r=>this._abort(r))}skip(){this._skipped=!0,this._loopStarted&&this._finish()}async _runUpdate(){if(this._updated)return this._updatePromise;this._updated=!0;let t=this.o.preserveFocus===!1?null:_t(this.target);return this._updatePromise=(async()=>{await this.update(),Et(t,this.target)})(),this._updatePromise.then(()=>this._d.update.res(),i=>this._d.update.rej(i)),this._updatePromise}async _run(){let t=z.get(this.target);z.set(this.target,this),t&&(t.skip(),await t.finished);let i=this.o,n=this.target,r=i.reducedMotion??matchMedia("(prefers-reduced-motion: reduce)").matches,a=tt(n),o=a.visible&&n!==document.body&&n!==document.documentElement?Z():null;if(this.r=o,!o||this._skipped)return this._plain();let l=Tt(a,o.maxTex),s=performance.now(),c=le(n,a)||await T(n,{dpr:Math.min(l,2),clip:a.clip});if(this.metrics.captureBefore=Math.round(performance.now()-s),this._skipped)return this._plain();let u={...H[this._variant(a)]||E};for(let f of Object.keys(i))f in E&&f!=="type"&&f!=="particles"&&(u[f]=i[f]);i.particles===!1?u.particles=0:typeof i.particles=="number"&&(u.particles=i.particles);let h=V(u,a.clip.w,a.clip.h);if(this.cfg=h,this.before=a,this.dpr=c.dpr,this.particles=At(h.particles,h),this.dots=new Float32Array(Math.max(this.particles.length,1)*4),this.origin=this._originPage(a),this.canvasPage=a.page,this.rects={old:A(a.page,a.page),new:null,shape:A(a.el,a.page),radii:a.radii},s=performance.now(),o.setLayer("old",c.canvas,h.blurNear*this.dpr,h.blur*this.dpr),this.metrics.upload=Math.round(performance.now()-s),this._mount(),this._hide(),this.mode=r?0:1,this.fadeOnly=r,this._d.ready.res(),this._startLoop(),await this._runUpdate(),await se(),await Promise.all([...n.querySelectorAll("img")].map(f=>f.decode?.().catch(()=>{}))),this._done)return;let d=tt(n);s=performance.now();let p=d.visible?await T(n,{dpr:this.dpr,clip:d.clip,rootOpacity:a.opacity}):null;if(this.metrics.captureAfter=Math.round(performance.now()-s),!this._done){if(!p){this._finish();return}o.setLayer("new",p.canvas,h.blurNear*this.dpr,h.blur*this.dpr),this.after=d,this.canvasPage=oe(a.page,d.page),this.rects={old:A(a.page,this.canvasPage),new:A(d.page,this.canvasPage),shape:A(a.el,this.canvasPage),radii:a.radii},this.shapes={from:A(a.el,this.canvasPage),to:A(d.el,this.canvasPage),r0:a.radii,r1:d.radii},this._resizeCanvas(),this.gateOpen=!0,this.fadeOnly&&(this.mode=3,this.fadeStart=this.now)}}_variant(t){if(this.o.variant!=="auto")return this.o.variant;let i=this.o.source;if(!(i instanceof Element)||i===this.target)return"center";let n=i.getBoundingClientRect();return n.width>=n.height*1.4?"vertical":n.height>=n.width*1.4?"horizontal":"center"}_originPage(t){let i=t.fixed?0:scrollX,n=t.fixed?0:scrollY,r=this.o,a=s=>s&&"clientX"in s?{x:s.clientX,y:s.clientY}:s&&"x"in s?{x:s.x,y:s.y}:null,o=a(r.focus);(r.focus instanceof KeyboardEvent||r.focus&&r.focus.detail===0&&r.focus.type==="click")&&(o=null);let l;if(r.source instanceof Element&&r.source!==this.target){let s=r.source.getBoundingClientRect();l={x:s.left,y:s.top,w:s.width,h:s.height}}else if(r.source&&"width"in r.source)l={x:r.source.x,y:r.source.y,w:r.source.width,h:r.source.height};else{let s=!(r.source instanceof Element)&&a(r.source)||o||{x:t.el.x-i+t.w/2,y:t.el.y-n+t.h/2},c=Math.max(8,Math.min(t.w,t.h)*.08);l={x:s.x-c,y:s.y-c,w:2*c,h:2*c}}return{src:{x:l.x+i,y:l.y+n,w:l.w,h:l.h},touch:o&&{x:o.x+i,y:o.y+n},hold:r.source instanceof Element&&r.source!==this.target&&this.target.contains(r.source)}}_mount(){let t=this.r.canvas;document.body.appendChild(t),this._resizeCanvas()}_resizeCanvas(){let t=this.r.canvas,i=this.canvasPage;t.width=Math.max(1,Math.round(i.w*this.dpr)),t.height=Math.max(1,Math.round(i.h*this.dpr)),t.style.width=i.w+"px",t.style.height=i.h+"px",this._place()}_place(){let t=this.canvasPage,i=this.before.fixed;this.r.canvas.style.transform=`translate3d(${t.x-(i?0:scrollX)}px,${t.y-(i?0:scrollY)}px,0)`}_hide(){let t=this.target.style;this._saved=["opacity","transition"].map(i=>[i,t.getPropertyValue(i),t.getPropertyPriority(i)]),t.setProperty("transition","none","important"),t.setProperty("opacity","0","important")}_show(){if(this._saved){for(let[t,i,n]of this._saved)i?this.target.style.setProperty(t,i,n):this.target.style.removeProperty(t);this._saved=null}}_startLoop(){this._loopStarted=!0,this.held=0,this.start=performance.now(),this.now=this.start,this.last=this.start;let t=i=>{if(this._done)return;let n=Math.min(i-this.last,100);this.last=i,this.now=i,this.metrics.worstFrame=Math.max(this.metrics.worstFrame||0,n),this._place();let r=(i-this.start-this.held)/1e3,a=this.cfg.anticipation-.001;if(!this.gateOpen&&r>=a&&(this.held+=r*1e3-a*1e3,r=a,i-this.start>this.o.timeout)){this._finish();return}if(this.t=r,this.mode===3){let o=b((i-this.fadeStart)/220);if(this.r.render({mode:3,fade:o,w:this.canvasPage.w,h:this.canvasPage.h,rects:this.rects,dpr:this.dpr,dotCount:0}),o>=1){this._finish();return}}else if(this.mode===0)this.r.render({mode:0,w:this.canvasPage.w,h:this.canvasPage.h,rects:this.rects,dpr:this.dpr,dotCount:0});else{let o={w:this.canvasPage.w,h:this.canvasPage.h,src:A(this.origin.src,this.canvasPage),touch:this.origin.touch&&A({...this.origin.touch,w:0,h:0},this.canvasPage),hold:this.origin.hold},l=G(r,this.cfg,o);if(this.shapes){let c=l.moved,u=this.shapes.from,h=this.shapes.to,d=this.shapes.r0,p=this.shapes.r1;this.rects.shape={x:v(u.x,h.x,c),y:v(u.y,h.y,c),w:v(u.w,h.w,c),h:v(u.h,h.h,c)},this.rects.radii={tl:v(d.tl,p.tl,c),tr:v(d.tr,p.tr,c),br:v(d.br,p.br,c),bl:v(d.bl,p.bl,c)}}l.launched&&!this._launched&&(this._launched=!0,this.o.onLaunch?.()),l.covered&&!this._covered&&(this._covered=!0,this._d.covered.res(),this.o.onCovered?.()),l.settled&&this.mode===1&&(this.mode=4,this._show(),this.o.onSettled?.());let s=0;for(let c of this.particles){let u=St(c,l,this.cfg);!u||u.a<=.002||(this.dots[s*4]=u.x,this.dots[s*4+1]=u.y,this.dots[s*4+2]=c.size,this.dots[s*4+3]=Math.min(u.a,1),s++)}if(this.r.render({mode:this.mode,s:l,cfg:this.cfg,w:this.canvasPage.w,h:this.canvasPage.h,rects:this.rects,dpr:this.dpr,dots:this.dots,dotCount:s}),r>=B(this.cfg)){this._finish();return}}if(this._skipped){this._finish();return}requestAnimationFrame(t)};requestAnimationFrame(t)}async _plain(){try{await this._runUpdate()}finally{this._done=!0,this._release(),this._d.ready.res(),this._d.covered.res(),this._d.finished.res()}}async _finish(){if(!this._done){this._done=!0;try{await this._runUpdate()}catch{}this._show(),this._release(),this._covered||this._d.covered.res(),this._d.finished.res(),this.o.onEnd?.(this.metrics)}}_release(){this.r&&(J(this.r),this.r=null),z.get(this.target)===this&&z.delete(this.target)}_abort(t){console.warn("[distortion-wave] repli sans animation :",t),this._done=!0,this._show(),this._release(),(this._updated?Promise.resolve():this._runUpdate()).catch(()=>{}).finally(()=>{this._d.ready.res(),this._d.covered.res(),this._d.finished.res()})}};function Ft(e,t,i={}){return new et(e,t,i)}function ue(e,t,i,n={}){let r=()=>Mt(t);e.addEventListener("pointerenter",r),e.addEventListener("focus",r),e.addEventListener("click",a=>Ft(t,()=>i(a),{source:e,focus:a,...n}))}return Ut(he);})();