ripppl 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arman Luthra
+
+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

@@ -0,0 +1,36 @@
+# ripyl
+
+Ripple displacement over the **real DOM** (WebGL shader + screen capture). Works in the browser only.
+
+## Install
+
+```bash
+npm install ripppl
+```
+
+## Use
+
+```ts
+import { attachRipple } from "ripppl";
+
+const handle = attachRipple("#my-button", {
+  scope: "#card",
+  amplitude: 3,
+  shimmer: "oklch(0.72 0.19 45)",
+});
+
+handle.update({ speed: 400 });
+handle.trigger({ x: 0.5, y: 0.5 });
+handle.destroy();
+```
+
+- **`attachRipple(trigger, options?)`** — `trigger` is a selector, element, or list of elements that start a capture + ripple on click. Use **`scope`** to clip the effect to a container (e.g. a card); omit it for a full-page ripple.
+- **`update(partial)`** — change tuning; see **`RippleTuning`** in the published types.
+- **`trigger({ x?, y? })`** — fire a ripple at normalized **0–1** coordinates inside the scope (default center).
+- **`destroy()`** — remove listeners and overlay.
+
+Build before publish: `npm run build` (runs automatically via `prepublishOnly` on `npm publish`).
+
+## License
+
+MIT

package/dist/ripyl.d.ts

@@ -0,0 +1,29 @@
+export type RippleTuning = {
+    amplitude?: number;
+    frequency?: number;
+    speed?: number;
+    damping?: number;
+    decay?: number;
+    duration?: number;
+    chromatic?: boolean;
+    chromaticIntensity?: number;
+    shimmer?: string | false;
+    shimmerWidth?: number;
+    shimmerDuration?: number;
+    shimmerGlowColor?: string;
+};
+export type RippleOptions = RippleTuning & {
+    scope?: string | HTMLElement;
+};
+export type RippleHandle = {
+    destroy: () => void;
+    update: (opts: Partial<RippleTuning>) => void;
+    trigger: (opts?: {
+        x?: number;
+        y?: number;
+    }) => void;
+};
+type TriggerInput = string | HTMLElement | NodeListOf<HTMLElement> | HTMLElement[];
+export declare function attachRipple(trigger: TriggerInput, options?: RippleOptions): RippleHandle;
+export {};
+//# sourceMappingURL=ripyl.d.ts.map

package/dist/ripyl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripyl.d.ts","sourceRoot":"","sources":["../src/ripyl.ts"],"names":[],"mappings":"AAwFA,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC9B,CAAC;AAgBF,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,KAAK,YAAY,GACb,MAAM,GACN,WAAW,GACX,UAAU,CAAC,WAAW,CAAC,GACvB,WAAW,EAAE,CAAC;AA0JlB,wBAAgB,YAAY,CAC1B,OAAO,EAAE,YAAY,EACrB,OAAO,GAAE,aAAkB,GAC1B,YAAY,CAuWd"}

package/dist/ripyl.js

@@ -0,0 +1,847 @@
+function Ce(d) {
+  return d && d.__esModule && Object.prototype.hasOwnProperty.call(d, "default") ? d.default : d;
+}
+var de = { exports: {} };
+/*! dom-to-image-more 23-10-2025 */
+var Ae = de.exports, Te;
+function Pe() {
+  return Te || (Te = 1, (function(d, f) {
+    ((b) => {
+      let r = /* @__PURE__ */ (() => {
+        let i = 0;
+        return { escape: function(e) {
+          return e.replace(/([.*+?^${}()|[\]/\\])/g, "\\$1");
+        }, isDataUrl: function(e) {
+          return e.search(/^(data:)/) !== -1;
+        }, canvasToBlob: function(e) {
+          return e.toBlob ? new Promise(function(a) {
+            e.toBlob(a);
+          }) : ((a) => new Promise(function(m) {
+            var l = Q(a.toDataURL().split(",")[1]), g = l.length, C = new Uint8Array(g);
+            for (let H = 0; H < g; H++) C[H] = l.charCodeAt(H);
+            m(new Blob([C], { type: "image/png" }));
+          }))(e);
+        }, resolveUrl: function(e, a) {
+          var m = document.implementation.createHTMLDocument(), l = m.createElement("base"), g = (m.head.appendChild(l), m.createElement("a"));
+          return m.body.appendChild(g), l.href = a, g.href = e, g.href;
+        }, getAndEncode: function(e) {
+          let a = w.impl.urlCache.find(function(m) {
+            return m.url === e;
+          });
+          return a || (a = { url: e, promise: null }, w.impl.urlCache.push(a)), a.promise === null && (w.impl.options.cacheBust && (e += (/\?/.test(e) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime()), a.promise = new Promise(function(m) {
+            let l = new XMLHttpRequest();
+            function g(p) {
+              console.error(p), m("");
+            }
+            function C() {
+              var p = w.impl.options.imagePlaceholder;
+              p ? m(p) : g("Status:" + l.status + " while fetching resource: " + e);
+            }
+            if (l.timeout = w.impl.options.httpTimeout, l.onerror = C, l.ontimeout = C, l.onloadend = function() {
+              if (l.readyState === XMLHttpRequest.DONE) {
+                var p = l.status;
+                if (p === 0 && e.toLowerCase().startsWith("file://") || 200 <= p && p <= 300 && l.response !== null) {
+                  p = l.response, p instanceof Blob || g("Expected response to be a Blob, but got: " + typeof p);
+                  let A = new FileReader();
+                  A.onloadend = function() {
+                    var y = A.result;
+                    m(y);
+                  };
+                  try {
+                    A.readAsDataURL(p);
+                  } catch (y) {
+                    g("Failed to read the response as Data URL: " + y.toString());
+                  }
+                } else C();
+              }
+            }, 0 < w.impl.options.useCredentialsFilters.length && (w.impl.options.useCredentials = 0 < w.impl.options.useCredentialsFilters.filter((p) => 0 <= e.search(p)).length), w.impl.options.useCredentials && (l.withCredentials = !0), w.impl.options.corsImg && e.indexOf("http") === 0 && e.indexOf(window.location.origin) === -1) {
+              var H = (w.impl.options.corsImg.method || "GET").toUpperCase() === "POST" ? "POST" : "GET";
+              l.open(H, (w.impl.options.corsImg.url || "").replace("#{cors}", e), !0);
+              let p = !1, A = w.impl.options.corsImg.headers || {}, y = (Object.keys(A).forEach(function(c) {
+                A[c].indexOf("application/json") !== -1 && (p = !0), l.setRequestHeader(c, A[c]);
+              }), ((c) => {
+                try {
+                  return JSON.parse(JSON.stringify(c));
+                } catch (S) {
+                  g("corsImg.data is missing or invalid:" + S.toString());
+                }
+              })(w.impl.options.corsImg.data || ""));
+              Object.keys(y).forEach(function(c) {
+                typeof y[c] == "string" && (y[c] = y[c].replace("#{cors}", e));
+              }), l.responseType = "blob", l.send(p ? JSON.stringify(y) : y);
+            } else l.open("GET", e, !0), l.responseType = "blob", l.send();
+          })), a.promise;
+        }, uid: function() {
+          return "u" + ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4) + i++;
+        }, asArray: function(e) {
+          var a = [], m = e.length;
+          for (let l = 0; l < m; l++) a.push(e[l]);
+          return a;
+        }, escapeXhtml: function(e) {
+          return e.replace(/%/g, "%25").replace(/#/g, "%23").replace(/\n/g, "%0A");
+        }, makeImage: function(e) {
+          return e !== "data:," ? new Promise(function(a, m) {
+            let l = document.createElementNS("http://www.w3.org/2000/svg", "svg"), g = new Image();
+            w.impl.options.useCredentials && (g.crossOrigin = "use-credentials"), g.onload = function() {
+              document.body.removeChild(l), window && window.requestAnimationFrame ? window.requestAnimationFrame(function() {
+                a(g);
+              }) : a(g);
+            }, g.onerror = (C) => {
+              document.body.removeChild(l), m(C);
+            }, l.appendChild(g), g.src = e, document.body.appendChild(l);
+          }) : Promise.resolve();
+        }, width: function(e) {
+          var a = u(e, "width");
+          if (!isNaN(a)) return a;
+          var a = u(e, "border-left-width"), m = u(e, "border-right-width");
+          return e.scrollWidth + a + m;
+        }, height: function(e) {
+          var a = u(e, "height");
+          if (!isNaN(a)) return a;
+          var a = u(e, "border-top-width"), m = u(e, "border-bottom-width");
+          return e.scrollHeight + a + m;
+        }, getWindow: t, isElement: E, isElementHostForOpenShadowRoot: function(e) {
+          return E(e) && e.shadowRoot !== null;
+        }, isShadowRoot: h, isInShadowRoot: s, isHTMLElement: function(e) {
+          return e instanceof t(e).HTMLElement;
+        }, isHTMLCanvasElement: function(e) {
+          return e instanceof t(e).HTMLCanvasElement;
+        }, isHTMLInputElement: function(e) {
+          return e instanceof t(e).HTMLInputElement;
+        }, isHTMLImageElement: function(e) {
+          return e instanceof t(e).HTMLImageElement;
+        }, isHTMLLinkElement: function(e) {
+          return e instanceof t(e).HTMLLinkElement;
+        }, isHTMLScriptElement: function(e) {
+          return e instanceof t(e).HTMLScriptElement;
+        }, isHTMLStyleElement: function(e) {
+          return e instanceof t(e).HTMLStyleElement;
+        }, isHTMLTextAreaElement: function(e) {
+          return e instanceof t(e).HTMLTextAreaElement;
+        }, isShadowSlotElement: function(e) {
+          return s(e) && e instanceof t(e).HTMLSlotElement;
+        }, isSVGElement: function(e) {
+          return e instanceof t(e).SVGElement;
+        }, isSVGRectElement: function(e) {
+          return e instanceof t(e).SVGRectElement;
+        }, isDimensionMissing: function(e) {
+          return isNaN(e) || e <= 0;
+        } };
+        function t(e) {
+          return e = e ? e.ownerDocument : void 0, (e ? e.defaultView : void 0) || window || b;
+        }
+        function h(e) {
+          return e instanceof t(e).ShadowRoot;
+        }
+        function s(e) {
+          return e != null && e.getRootNode !== void 0 && h(e.getRootNode());
+        }
+        function E(e) {
+          return e instanceof t(e).Element;
+        }
+        function u(e, a) {
+          if (e.nodeType === te) {
+            let m = K(e).getPropertyValue(a);
+            if (m.slice(-2) === "px") return m = m.slice(0, -2), parseFloat(m);
+          }
+          return NaN;
+        }
+      })(), T = /* @__PURE__ */ (() => {
+        let i = /url\(\s*(["']?)((?:\\.|[^\\)])+)\1\s*\)/gm;
+        return { inlineAll: function(u, e, a) {
+          return t(u) ? Promise.resolve(u).then(h).then(function(m) {
+            let l = Promise.resolve(u);
+            return m.forEach(function(g) {
+              l = l.then(function(C) {
+                return E(C, g, e, a);
+              });
+            }), l;
+          }) : Promise.resolve(u);
+        }, shouldProcess: t, impl: { readUrls: h, inline: E, urlAsRegex: s } };
+        function t(u) {
+          return u.search(i) !== -1;
+        }
+        function h(u) {
+          for (var e, a = []; (e = i.exec(u)) !== null; ) a.push(e[2]);
+          return a.filter(function(m) {
+            return !r.isDataUrl(m);
+          });
+        }
+        function s(u) {
+          return new RegExp(`url\\((["']?)(${r.escape(u)})\\1\\)`, "gm");
+        }
+        function E(u, e, a, m) {
+          return Promise.resolve(e).then(function(l) {
+            return a ? r.resolveUrl(l, a) : l;
+          }).then(m || r.getAndEncode).then(function(l) {
+            var g = s(e);
+            return u.replace(g, `url($1${l}$1)`);
+          });
+        }
+      })(), L = { resolveAll: function() {
+        return B().then(function(i) {
+          return Promise.all(i.map(function(t) {
+            return t.resolve();
+          }));
+        }).then(function(i) {
+          return i.join(`
+`);
+        });
+      }, impl: { readAll: B } };
+      function B() {
+        return Promise.resolve(r.asArray(document.styleSheets)).then(function(t) {
+          let h = [];
+          return t.forEach(function(s) {
+            var E = Object.getPrototypeOf(s);
+            if (Object.prototype.hasOwnProperty.call(E, "cssRules")) try {
+              r.asArray(s.cssRules || []).forEach(h.push.bind(h));
+            } catch (u) {
+              console.error("domtoimage: Error while reading CSS rules from: " + s.href, u.toString());
+            }
+          }), h;
+        }).then(function(t) {
+          return t.filter(function(h) {
+            return h.type === CSSRule.FONT_FACE_RULE;
+          }).filter(function(h) {
+            return T.shouldProcess(h.style.getPropertyValue("src"));
+          });
+        }).then(function(t) {
+          return t.map(i);
+        });
+        function i(t) {
+          return { resolve: function() {
+            var h = (t.parentStyleSheet || {}).href;
+            return T.inlineAll(t.cssText, h);
+          }, src: function() {
+            return t.style.getPropertyValue("src");
+          } };
+        }
+      }
+      let G = { inlineAll: function i(t) {
+        if (!r.isElement(t)) return Promise.resolve(t);
+        return h(t).then(function() {
+          return r.isHTMLImageElement(t) ? oe(t).inline() : Promise.all(r.asArray(t.childNodes).map(function(s) {
+            return i(s);
+          }));
+        });
+        function h(s) {
+          let E = ["background", "background-image"], u = E.map(function(e) {
+            let a = s.style.getPropertyValue(e), m = s.style.getPropertyPriority(e);
+            return a ? T.inlineAll(a).then(function(l) {
+              s.style.setProperty(e, l, m);
+            }) : Promise.resolve();
+          });
+          return Promise.all(u).then(function() {
+            return s;
+          });
+        }
+      }, impl: { newImage: oe } };
+      function oe(i) {
+        return { inline: function(t) {
+          return r.isDataUrl(i.src) ? Promise.resolve() : Promise.resolve(i.src).then(t || r.getAndEncode).then(function(h) {
+            return new Promise(function(s) {
+              i.onload = s, i.onerror = s, i.src = h;
+            });
+          });
+        } };
+      }
+      let k = { copyDefaultStyles: !0, imagePlaceholder: void 0, cacheBust: !1, useCredentials: !1, useCredentialsFilters: [], httpTimeout: 3e4, styleCaching: "strict", corsImg: void 0 }, w = { toSvg: Z, toPng: function(i, t) {
+        return q(i, t).then(function(h) {
+          return h.toDataURL();
+        });
+      }, toJpeg: function(i, t) {
+        return q(i, t).then(function(h) {
+          return h.toDataURL("image/jpeg", (t ? t.quality : void 0) || 1);
+        });
+      }, toBlob: function(i, t) {
+        return q(i, t).then(r.canvasToBlob);
+      }, toPixelData: function(i, t) {
+        return q(i, t).then(function(h) {
+          return h.getContext("2d").getImageData(0, 0, r.width(i), r.height(i)).data;
+        });
+      }, toCanvas: q, impl: { fontFaces: L, images: G, util: r, inliner: T, urlCache: [], options: {}, copyOptions: function(i) {
+        i.copyDefaultStyles === void 0 ? w.impl.options.copyDefaultStyles = k.copyDefaultStyles : w.impl.options.copyDefaultStyles = i.copyDefaultStyles, w.impl.options.imagePlaceholder = (i.imagePlaceholder === void 0 ? k : i).imagePlaceholder, w.impl.options.cacheBust = (i.cacheBust === void 0 ? k : i).cacheBust, w.impl.options.corsImg = (i.corsImg === void 0 ? k : i).corsImg, w.impl.options.useCredentials = (i.useCredentials === void 0 ? k : i).useCredentials, w.impl.options.useCredentialsFilters = (i.useCredentialsFilters === void 0 ? k : i).useCredentialsFilters, w.impl.options.httpTimeout = (i.httpTimeout === void 0 ? k : i).httpTimeout, w.impl.options.styleCaching = (i.styleCaching === void 0 ? k : i).styleCaching;
+      } } }, te = (d.exports = w, (Node === void 0 ? void 0 : Node.ELEMENT_NODE) || 1), K = (b === void 0 ? void 0 : b.getComputedStyle) || (window === void 0 ? void 0 : window.getComputedStyle) || globalThis.getComputedStyle, Q = (b === void 0 ? void 0 : b.atob) || (window === void 0 ? void 0 : window.atob) || globalThis.atob;
+      function Z(i, t) {
+        w.impl.util.getWindow(i);
+        let h = (t = t || {}, w.impl.copyOptions(t), []);
+        return Promise.resolve(i).then(function(s) {
+          if (s.nodeType === te) return s;
+          var E = s, u = document.createElement("span");
+          return E.replaceWith(u), u.append(s), h.push({ child: E, wrapper: u }), u;
+        }).then(function(s) {
+          return (function E(u, e, a, m) {
+            let l = e.filter;
+            if (u === O || r.isHTMLScriptElement(u) || r.isHTMLStyleElement(u) || r.isHTMLLinkElement(u) || a !== null && l && !l(u)) return Promise.resolve();
+            return Promise.resolve(u).then(g).then(C).then(function(c) {
+              return A(c, p(u));
+            }).then(H).then(function(c) {
+              return y(c, u);
+            });
+            function g(c) {
+              return r.isHTMLCanvasElement(c) ? r.makeImage(c.toDataURL()) : c.cloneNode(!1);
+            }
+            function C(c) {
+              return e.adjustClonedNode && e.adjustClonedNode(u, c, !1), Promise.resolve(c);
+            }
+            function H(c) {
+              return e.adjustClonedNode && e.adjustClonedNode(u, c, !0), Promise.resolve(c);
+            }
+            function p(c) {
+              return r.isElementHostForOpenShadowRoot(c) ? c.shadowRoot : c;
+            }
+            function A(c, S) {
+              let j = $(S), X = Promise.resolve();
+              if (j.length !== 0) {
+                let R = K(z(S));
+                r.asArray(j).forEach(function(I) {
+                  X = X.then(function() {
+                    return E(I, e, R).then(function(P) {
+                      P && c.appendChild(P);
+                    });
+                  });
+                });
+              }
+              return X.then(function() {
+                return c;
+              });
+              function z(R) {
+                return r.isShadowRoot(R) ? R.host : R;
+              }
+              function $(R) {
+                if (r.isShadowSlotElement(R)) {
+                  let I = R.assignedNodes();
+                  if (I && 0 < I.length) return I;
+                }
+                return R.childNodes;
+              }
+            }
+            function y(c, S) {
+              return !r.isElement(c) || r.isShadowSlotElement(S) ? Promise.resolve(c) : Promise.resolve().then(X).then(z).then($).then(R).then(j).then(function() {
+                return c;
+              });
+              function j() {
+                r.isHTMLImageElement(c) && (c.removeAttribute("loading"), S.srcset || S.sizes) && (c.removeAttribute("srcset"), c.removeAttribute("sizes"), c.src = S.currentSrc || S.src);
+              }
+              function X() {
+                function I(x, v) {
+                  v.font = x.font, v.fontFamily = x.fontFamily, v.fontFeatureSettings = x.fontFeatureSettings, v.fontKerning = x.fontKerning, v.fontSize = x.fontSize, v.fontStretch = x.fontStretch, v.fontStyle = x.fontStyle, v.fontVariant = x.fontVariant, v.fontVariantCaps = x.fontVariantCaps, v.fontVariantEastAsian = x.fontVariantEastAsian, v.fontVariantLigatures = x.fontVariantLigatures, v.fontVariantNumeric = x.fontVariantNumeric, v.fontVariationSettings = x.fontVariationSettings, v.fontWeight = x.fontWeight;
+                }
+                function P(x, v) {
+                  let N = K(x);
+                  N.cssText ? (v.style.cssText = N.cssText, I(N, v.style)) : (U(e, x, N, a, v), a === null && (["inset-block", "inset-block-start", "inset-block-end"].forEach((V) => v.style.removeProperty(V)), ["left", "right", "top", "bottom"].forEach((V) => {
+                    v.style.getPropertyValue(V) && v.style.setProperty(V, "0px");
+                  })));
+                }
+                P(S, c);
+              }
+              function z() {
+                let I = r.uid();
+                function P(x) {
+                  let v = K(S, x), N = v.getPropertyValue("content");
+                  if (N !== "" && N !== "none") {
+                    let le = function() {
+                      let se = `.${I}:` + x, he = (v.cssText ? ne : ce)();
+                      return document.createTextNode(se + `{${he}}`);
+                      function ne() {
+                        return `${v.cssText} content: ${N};`;
+                      }
+                      function ce() {
+                        return r.asArray(v).map(o).join("; ") + ";";
+                        function o(_) {
+                          let D = v.getPropertyValue(_), W = v.getPropertyPriority(_) ? " !important" : "";
+                          return _ + ": " + D + W;
+                        }
+                      }
+                    }, V = c.getAttribute("class") || "", Y = (c.setAttribute("class", V + " " + I), document.createElement("style"));
+                    Y.appendChild(le()), c.appendChild(Y);
+                  }
+                }
+                [":before", ":after"].forEach(function(x) {
+                  P(x);
+                });
+              }
+              function $() {
+                r.isHTMLTextAreaElement(S) && (c.innerHTML = S.value), r.isHTMLInputElement(S) && c.setAttribute("value", S.value);
+              }
+              function R() {
+                r.isSVGElement(c) && (c.setAttribute("xmlns", "http://www.w3.org/2000/svg"), r.isSVGRectElement(c)) && ["width", "height"].forEach(function(I) {
+                  let P = c.getAttribute(I);
+                  P && c.style.setProperty(I, P);
+                });
+              }
+            }
+          })(s, t, null);
+        }).then(t.disableEmbedFonts ? Promise.resolve(i) : re).then(t.disableInlineImages ? Promise.resolve(i) : ie).then(function(s) {
+          t.bgcolor && (s.style.backgroundColor = t.bgcolor), t.width && (s.style.width = t.width + "px"), t.height && (s.style.height = t.height + "px"), t.style && Object.keys(t.style).forEach(function(u) {
+            s.style[u] = t.style[u];
+          });
+          let E = null;
+          return typeof t.onclone == "function" && (E = t.onclone(s)), Promise.resolve(E).then(function() {
+            return s;
+          });
+        }).then(function(s) {
+          let E = t.width || r.width(i), u = t.height || r.height(i);
+          return Promise.resolve(s).then(function(e) {
+            return e.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"), new XMLSerializer().serializeToString(e);
+          }).then(r.escapeXhtml).then(function(e) {
+            var a = (r.isDimensionMissing(E) ? ' width="100%"' : ` width="${E}"`) + (r.isDimensionMissing(u) ? ' height="100%"' : ` height="${u}"`);
+            return `<svg xmlns="http://www.w3.org/2000/svg"${(r.isDimensionMissing(E) ? "" : ` width="${E}"`) + (r.isDimensionMissing(u) ? "" : ` height="${u}"`)}><foreignObject${a}>${e}</foreignObject></svg>`;
+          }).then(function(e) {
+            return "data:image/svg+xml;charset=utf-8," + e;
+          });
+        }).then(function(s) {
+          for (; 0 < h.length; ) {
+            var E = h.pop();
+            E.wrapper.replaceWith(E.child);
+          }
+          return s;
+        }).then(function(s) {
+          return w.impl.urlCache = [], O && (document.body.removeChild(O), O = null), M && clearTimeout(M), M = setTimeout(() => {
+            M = null, n = {};
+          }, 2e4), s;
+        });
+      }
+      function q(i, t) {
+        return Z(i, t = t || {}).then(r.makeImage).then(function(h) {
+          var s = typeof t.scale != "number" ? 1 : t.scale, E = ((e, a) => {
+            let m = t.width || r.width(e), l = t.height || r.height(e);
+            return r.isDimensionMissing(m) && (m = r.isDimensionMissing(l) ? 300 : 2 * l), r.isDimensionMissing(l) && (l = m / 2), (e = document.createElement("canvas")).width = m * a, e.height = l * a, t.bgcolor && ((a = e.getContext("2d")).fillStyle = t.bgcolor, a.fillRect(0, 0, e.width, e.height)), e;
+          })(i, s), u = E.getContext("2d");
+          return u.msImageSmoothingEnabled = !1, u.imageSmoothingEnabled = !1, h && (u.scale(s, s), u.drawImage(h, 0, 0)), E;
+        });
+      }
+      let O = null;
+      function re(i) {
+        return L.resolveAll().then(function(t) {
+          var h;
+          return t !== "" && (h = document.createElement("style"), i.appendChild(h), h.appendChild(document.createTextNode(t))), i;
+        });
+      }
+      function ie(i) {
+        return G.inlineAll(i).then(function() {
+          return i;
+        });
+      }
+      function U(i, t, h, s, E) {
+        let u = w.impl.options.copyDefaultStyles ? ((a, m) => {
+          var l, g = ((p) => (a.styleCaching !== "relaxed" ? p : p.filter((A, y, c) => y === 0 || y === c.length - 1)).join(">"))(m = ((p) => {
+            var A = [];
+            do
+              if (p.nodeType === te) {
+                var y = p.tagName;
+                if (A.push(y), ae.includes(y)) break;
+              }
+            while (p = p.parentNode);
+            return A;
+          })(m));
+          {
+            if (n[g]) return n[g];
+            m = ((p, A) => {
+              let y = p.body;
+              do {
+                var c = A.pop(), c = p.createElement(c);
+                y.appendChild(c), y = c;
+              } while (0 < A.length);
+              return y.textContent = "​", y;
+            })((l = (() => {
+              if (O) return O.contentWindow;
+              A = document.characterSet || "UTF-8", p = (p = document.doctype) ? (`<!DOCTYPE ${z(p.name)} ${z(p.publicId)} ` + z(p.systemId)).trim() + ">" : "", (O = document.createElement("iframe")).id = "domtoimage-sandbox-" + r.uid(), O.style.top = "-9999px", O.style.visibility = "hidden", O.style.position = "fixed", document.body.appendChild(O);
+              var p, A, y = O, c = "domtoimage-sandbox";
+              try {
+                return y.contentWindow.document.write(p + `<html><head><meta charset='${A}'><title>${c}</title></head><body></body></html>`), y.contentWindow;
+              } catch {
+              }
+              var S = document.createElement("meta");
+              S.setAttribute("charset", A);
+              try {
+                var j = document.implementation.createHTMLDocument(c), X = (j.head.appendChild(S), p + j.documentElement.outerHTML);
+                return y.setAttribute("srcdoc", X), y.contentWindow;
+              } catch {
+              }
+              return y.contentDocument.head.appendChild(S), y.contentDocument.title = c, y.contentWindow;
+              function z($) {
+                var R;
+                return $ ? ((R = document.createElement("div")).innerText = $, R.innerHTML) : "";
+              }
+            })()).document, m), l = ((p, A) => {
+              let y = {}, c = p.getComputedStyle(A);
+              return r.asArray(c).forEach(function(S) {
+                y[S] = S === "width" || S === "height" ? "auto" : c.getPropertyValue(S);
+              }), y;
+            })(l, m);
+            var C = m;
+            do {
+              var H = C.parentElement;
+              H !== null && H.removeChild(C), C = H;
+            } while (C && C.tagName !== "BODY");
+            return n[g] = l;
+          }
+        })(i, t) : {}, e = E.style;
+        r.asArray(h).forEach(function(a) {
+          var m, l, g, C;
+          i.filterStyles && !i.filterStyles(t, a) || (l = h.getPropertyValue(a), g = u[a], m = s ? s.getPropertyValue(a) : void 0, e.getPropertyValue(a)) || (l !== g || s && l !== m) && (g = h.getPropertyPriority(a), m = e, l = l, g = g, C = 0 <= ["background-clip"].indexOf(a = a), g ? (m.setProperty(a, l, g), C && m.setProperty("-webkit-" + a, l, g)) : (m.setProperty(a, l), C && m.setProperty("-webkit-" + a, l)));
+        });
+      }
+      let M = null, n = {}, ae = ["ADDRESS", "ARTICLE", "ASIDE", "BLOCKQUOTE", "DETAILS", "DIALOG", "DD", "DIV", "DL", "DT", "FIELDSET", "FIGCAPTION", "FIGURE", "FOOTER", "FORM", "H1", "H2", "H3", "H4", "H5", "H6", "HEADER", "HGROUP", "HR", "LI", "MAIN", "NAV", "OL", "P", "PRE", "SECTION", "SVG", "TABLE", "UL", "math", "svg", "BODY", "HEAD", "HTML"];
+    })(Ae);
+  })(de)), de.exports;
+}
+var Me = Pe();
+const De = /* @__PURE__ */ Ce(Me);
+function J(d) {
+  return Math.min(1, Math.max(0, d));
+}
+function Se(d, f, b) {
+  const r = 1 - b;
+  return [r * d[0] + b * f[0], r * d[1] + b * f[1], r * d[2] + b * f[2]];
+}
+function _e(d, f) {
+  const b = 0.2126 * d[0] + 0.7152 * d[1] + 0.0722 * d[2];
+  return [
+    J(d[0] + (d[0] - b) * f),
+    J(d[1] + (d[1] - b) * f),
+    J(d[2] + (d[2] - b) * f)
+  ];
+}
+function Re(d) {
+  const f = d.trim().toLowerCase();
+  return f.endsWith("deg") ? parseFloat(f.slice(0, -3)) : f.endsWith("rad") ? parseFloat(f.slice(0, -3)) * 180 / Math.PI : f.endsWith("turn") ? parseFloat(f.slice(0, -4)) * 360 : f.endsWith("grad") ? parseFloat(f.slice(0, -4)) * 360 / 400 : parseFloat(f);
+}
+function Le(d) {
+  const f = d.trim();
+  if (!/^oklch\s*\(/i.test(f)) return null;
+  const T = f.slice(f.indexOf("(") + 1, f.lastIndexOf(")")).split(/\s*\/\s*/)[0].trim().split(/\s+/).filter(Boolean);
+  if (T.length < 3) return null;
+  let L;
+  T[0].endsWith("%") ? L = Math.min(1, Math.max(0, parseFloat(T[0]) / 100)) : L = Math.min(1, Math.max(0, parseFloat(T[0])));
+  let B;
+  T[1].endsWith("%") ? B = Math.max(0, parseFloat(T[1]) * 0.4 / 100) : B = Math.max(0, parseFloat(T[1]));
+  const G = Re(T[2]);
+  return !Number.isFinite(L) || !Number.isFinite(B) || !Number.isFinite(G) ? null : { l: L, c: B, h: G };
+}
+function Ie(d, f, b) {
+  const r = Math.pow(d + 0.3963377773761749 * f + 0.2158037573099136 * b, 3), T = Math.pow(d - 0.1055613458156586 * f - 0.0638541728258133 * b, 3), L = Math.pow(d - 0.0894841775298119 * f - 1.2914855480194092 * b, 3);
+  return [
+    4.076741636075957 * r - 3.3077115392580616 * T + 0.2309699031821044 * L,
+    -1.2684379732850317 * r + 2.6097573492876887 * T - 0.3413193760026573 * L,
+    -0.0041960761386756 * r - 0.7034186179359362 * T + 1.7076146940746117 * L
+  ];
+}
+function ye(d) {
+  const f = Math.abs(d);
+  return f > 31308e-7 ? (Math.sign(d) || 1) * (1.055 * Math.pow(f, 1 / 2.4) - 0.055) : d * 12.92;
+}
+function ve(d) {
+  const f = Le(d);
+  if (!f) return [1, 1, 1];
+  const b = f.h / 180 * Math.PI, r = f.c ? f.c * Math.cos(b) : 0, T = f.c ? f.c * Math.sin(b) : 0, [L, B, G] = Ie(f.l, r, T);
+  return [
+    J(ye(L)),
+    J(ye(B)),
+    J(ye(G))
+  ];
+}
+function Oe(d) {
+  return typeof d == "string" ? Array.from(document.querySelectorAll(d)) : d instanceof HTMLElement ? [d] : Array.from(d);
+}
+function Fe(d) {
+  return d ? typeof d == "string" ? document.querySelector(d) ?? document.body : d : document.body;
+}
+const He = `attribute vec2 a_pos;
+void main(){ gl_Position = vec4(a_pos, 0.0, 1.0); }`, Ne = `precision highp float;
+uniform sampler2D u_tex;
+uniform vec2 u_res;
+uniform vec2 u_css;
+uniform float u_time;
+uniform int u_count;
+uniform vec3 u_rip[16];
+uniform float u_freq, u_speed, u_amp, u_damp, u_decay;
+uniform float u_chroma;
+uniform vec3 u_shimColor;
+uniform float u_shimStr;
+uniform float u_shimWidth;
+uniform float u_shimIntScale;
+uniform float u_shimDur;
+uniform vec3 u_glowDodge;
+uniform vec3 u_glowScreen;
+uniform vec3 u_glowMix;
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / u_res;
+  uv.y = 1.0 - uv.y;
+  vec2 d = vec2(0.0);
+  float maxShim = 0.0;
+  float maxDodge = 0.0;
+  float maxScreen = 0.0;
+  float maxOuter = 0.0;
+  for(int i = 0; i < 16; i++){
+    if(i >= u_count) break;
+    vec2 c = u_rip[i].xy;
+    float t = u_time - u_rip[i].z;
+    vec2 diff = (uv - c) * u_css;
+    float dist = length(diff);
+    if(dist < 0.5) continue;
+
+    float front = t * u_speed;
+    float behind = front - dist;
+    float mask = smoothstep(0.0, 2.0, behind);
+    float ringDecay = exp(-behind * u_damp);
+    float temporal = exp(-t * u_decay);
+    float phase = dist * u_freq - t * u_speed * u_freq;
+    float wave = sin(phase) * mask * ringDecay * temporal;
+    float center = smoothstep(0.0, 10.0, dist);
+
+    d -= normalize(diff) * wave * u_amp * center;
+
+    float b = max(0.0, behind);
+    float delayT = clamp((t - 0.05) / 0.32, 0.0, 1.0);
+    float delay = (1.0 - pow(1.0 - delayT, 3.0)) * step(0.05, t);
+    float growT = clamp(t / 3.9, 0.0, 1.0);
+    float easeOut = 1.0 - pow(1.0 - growT, 3.0);
+    float radialScale = clamp(1.0 + front * 0.0032 + front * front * 8.0e-7, 1.0, 5.0);
+    float sigma = mix(32.0, 142.0, easeOut) * radialScale * u_shimWidth;
+    float peak = mix(18.0, 72.0, easeOut) * radialScale * u_shimWidth;
+    float x = (b - peak) / max(sigma, 1.0);
+    float x2 = x * x;
+    float shimBell =
+      exp(-x2) * 0.68 + exp(-x2 * 0.52) * 0.32;
+    float tailW = mix(0.12, 0.075, easeOut) / (1.0 + t * 1.15 + front * 0.0012);
+    float shimTail = exp(-b * tailW);
+    float enterW = mix(10.0, 36.0, easeOut) * radialScale * u_shimWidth;
+    float shimEnter = smoothstep(0.0, enterW, b);
+    float fadeT = clamp(t / max(u_shimDur, 0.001), 0.0, 1.0);
+    float opacityEase = 1.0 - pow(fadeT, 2.35);
+    float opacityFade = opacityEase * delay * exp(-t * 0.72);
+    float shimEdge =
+      shimEnter * shimBell * shimTail * opacityFade * center * u_shimIntScale;
+    maxShim = max(maxShim, shimEdge);
+    float gBase = shimEnter * shimTail * opacityFade * center;
+    float su = max(sigma, 1.0);
+    float u = (b - peak) / su;
+    float ao = (u + 0.78) / 0.48;
+    float gOut = exp(-(ao * ao));
+    float am = (u + 0.22) / 0.26;
+    float gMid = exp(-(am * am));
+    float ac = u / 0.1;
+    float gHot = exp(-(ac * ac));
+    float mOuter =
+      max(0.0, gOut - gMid * 0.75 - gHot * 0.15) * gBase * u_shimIntScale;
+    float mScreen =
+      max(0.0, gMid - gHot * 0.82 - gOut * 0.35) * gBase * u_shimIntScale;
+    float mDodge = max(0.0, gHot - gMid * 0.45) * gBase * u_shimIntScale;
+    maxDodge = max(maxDodge, mDodge);
+    maxScreen = max(maxScreen, mScreen);
+    maxOuter = max(maxOuter, mOuter);
+  }
+  d /= u_css;
+
+  vec3 col;
+  if(u_chroma > 0.0){
+    vec2 spread = d * u_chroma;
+    vec2 perp = vec2(-spread.y, spread.x) * 0.5;
+
+    float r = 0.0, g = 0.0, b = 0.0;
+    float tw = 0.0;
+    for(int s = -3; s <= 3; s++){
+      float f = float(s) / 3.0;
+      float w = exp(-2.0 * f * f);
+      tw += w;
+      vec2 rOff = spread * (f - 1.0) + perp * f;
+      vec2 gOff = perp * f * 0.3;
+      vec2 bOff = spread * (f + 1.0) - perp * f;
+      r += texture2D(u_tex, uv + d + rOff).r * w;
+      g += texture2D(u_tex, uv + d + gOff).g * w;
+      b += texture2D(u_tex, uv + d + bOff).b * w;
+    }
+    col = vec3(r, g, b) / tw;
+  } else {
+    col = texture2D(u_tex, uv + d).rgb;
+  }
+  if(u_shimStr > 0.0){
+    float di = fract(sin(dot(floor(gl_FragCoord.xy), vec2(12.9898, 78.233))) * 43758.5453);
+    float n = (di - 0.5) * 0.012;
+    float coreAmt = clamp(maxShim * u_shimStr + n, 0.0, 1.0);
+    float edge = 1.0 - coreAmt * 0.18;
+    float o = clamp(maxOuter * u_shimStr + n, 0.0, 1.0) * edge;
+    float s = clamp(maxScreen * u_shimStr + n, 0.0, 1.0) * edge;
+    col = mix(col, u_glowMix, o * 0.92);
+    vec3 scr = u_glowScreen * s * 1.02;
+    scr = min(scr, vec3(0.97));
+    col = vec3(1.0) - (vec3(1.0) - col) * (vec3(1.0) - scr);
+    col = min(col, vec3(1.0));
+    col = mix(col, u_shimColor, coreAmt);
+    float dg = clamp(maxDodge * u_shimStr + n, 0.0, 1.0);
+    float hot = dg * (0.62 + 0.38 * (1.0 - coreAmt));
+    vec3 cs = u_glowDodge * hot * 2.05;
+    cs = clamp(cs, vec3(0.0), vec3(0.995));
+    vec3 denom = vec3(1.0) - cs;
+    denom = max(denom, vec3(0.001));
+    col = min(col / denom, vec3(1.0));
+  }
+  gl_FragColor = vec4(col, 1.0);
+}`;
+function Be(d, f = {}) {
+  const b = Oe(d), r = Fe(f.scope), T = r === document.body;
+  let L = f.amplitude ?? 3, B = f.frequency ?? 0.018, G = f.speed ?? 300, oe = f.damping ?? 0.025, k = f.decay ?? 1.2, w = (f.duration ?? 3500) / 1e3, te = f.chromatic ?? !1, K = f.chromaticIntensity ?? 0.4, Q = f.shimmer ? ve(f.shimmer) : [1, 1, 1], Z = f.shimmer ? 1 : 0, q = f.shimmerWidth ?? 1, O = (f.shimmerDuration ?? 2600) / 1e3, re = f.shimmerGlowColor;
+  const ie = () => {
+    if (!Z)
+      return {
+        dodge: [1, 1, 1],
+        screen: [1, 1, 1],
+        mix: [1, 1, 1]
+      };
+    const o = re ? ve(re) : Q;
+    return {
+      dodge: Se(o, [1, 1, 1], 0.94),
+      screen: _e(o, 1.72),
+      mix: Se(_e(o, 0.45), [1, 1, 1], 0.4)
+    };
+  };
+  let U = ie();
+  const M = document.createElement("canvas");
+  if (M.setAttribute("data-ripyl-overlay", ""), T)
+    M.style.cssText = "position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2147483647;";
+  else {
+    getComputedStyle(r).position === "static" && (r.style.position = "relative");
+    const _ = getComputedStyle(r);
+    M.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2147483647;", M.style.borderRadius = _.borderRadius, M.style.overflow = "hidden";
+  }
+  (T ? document.body : r).appendChild(M);
+  const n = M.getContext("webgl", {
+    premultipliedAlpha: !0,
+    alpha: !0
+  });
+  if (!n)
+    return M.remove(), {
+      destroy() {
+      },
+      update() {
+      },
+      trigger() {
+      }
+    };
+  const ae = (o, _) => {
+    const D = n.createShader(o);
+    return n.shaderSource(D, _), n.compileShader(D), D;
+  }, i = n.createProgram();
+  n.attachShader(i, ae(n.VERTEX_SHADER, He)), n.attachShader(i, ae(n.FRAGMENT_SHADER, Ne)), n.linkProgram(i), n.useProgram(i);
+  const t = n.createBuffer();
+  n.bindBuffer(n.ARRAY_BUFFER, t), n.bufferData(
+    n.ARRAY_BUFFER,
+    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+    n.STATIC_DRAW
+  );
+  const h = n.getAttribLocation(i, "a_pos");
+  n.enableVertexAttribArray(h), n.vertexAttribPointer(h, 2, n.FLOAT, !1, 0, 0);
+  const s = (o) => n.getUniformLocation(i, o), E = s("u_res"), u = s("u_css"), e = s("u_time"), a = s("u_count"), m = s("u_freq"), l = s("u_speed"), g = s("u_amp"), C = s("u_damp"), H = s("u_decay"), p = s("u_chroma"), A = s("u_shimColor"), y = s("u_shimStr"), c = s("u_shimWidth"), S = s("u_shimIntScale"), j = s("u_shimDur"), X = s("u_glowDodge"), z = s("u_glowScreen"), $ = s("u_glowMix"), R = [];
+  for (let o = 0; o < 16; o++) R.push(s(`u_rip[${o}]`));
+  const I = n.createTexture();
+  n.bindTexture(n.TEXTURE_2D, I), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, n.CLAMP_TO_EDGE), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, n.LINEAR), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, n.LINEAR);
+  const P = [];
+  let x = 0, v = !1, N = !1, V = !1, Y = !1;
+  const le = () => {
+    const o = devicePixelRatio || 1, _ = T ? innerWidth : r.clientWidth, D = T ? innerHeight : r.clientHeight, W = _ * o, F = D * o;
+    (M.width !== W || M.height !== F) && (M.width = W, M.height = F, n.viewport(0, 0, W, F));
+  }, se = () => {
+    n.clearColor(0, 0, 0, 0), n.clear(n.COLOR_BUFFER_BIT);
+  }, he = async () => {
+    if (!(V || Y)) {
+      V = !0, se();
+      try {
+        const o = devicePixelRatio || 1, _ = innerWidth, D = innerHeight, W = (ee) => !(ee instanceof Element && ee.hasAttribute("data-ripyl-overlay")), F = Math.round(_ * o), we = Math.round(D * o), be = await De.toPng(document.documentElement, {
+          width: F,
+          height: we,
+          style: {
+            transform: `scale(${o})`,
+            transformOrigin: "top left",
+            width: _ + "px",
+            height: D + "px"
+          },
+          filter: W
+        });
+        if (Y) return;
+        const ge = new Image();
+        if (ge.src = be, await ge.decode(), Y) return;
+        let Ee = 0, xe = 0, ue = F, me = we;
+        if (!T) {
+          const ee = r.getBoundingClientRect();
+          Ee = Math.round(ee.left * o), xe = Math.round(ee.top * o), ue = Math.round(ee.width * o), me = Math.round(ee.height * o);
+        }
+        const fe = document.createElement("canvas");
+        fe.width = ue, fe.height = me, fe.getContext("2d").drawImage(ge, Ee, xe, ue, me, 0, 0, ue, me), n.bindTexture(n.TEXTURE_2D, I), n.texImage2D(
+          n.TEXTURE_2D,
+          0,
+          n.RGBA,
+          n.RGBA,
+          n.UNSIGNED_BYTE,
+          fe
+        ), N = !0, le();
+      } catch {
+      }
+      V = !1, N && P.length > 0 && !v && (v = !0, cancelAnimationFrame(x), x = requestAnimationFrame(ne));
+    }
+  }, ne = () => {
+    const o = performance.now() / 1e3;
+    let _ = 0;
+    for (; _ < P.length; )
+      o - P[_].t0 > w ? P.splice(_, 1) : _++;
+    if (P.length === 0) {
+      se(), v = !1, N = !1;
+      return;
+    }
+    if (!N) {
+      x = requestAnimationFrame(ne);
+      return;
+    }
+    le(), n.clearColor(0, 0, 0, 0), n.clear(n.COLOR_BUFFER_BIT);
+    const D = T ? innerWidth : r.clientWidth, W = T ? innerHeight : r.clientHeight;
+    n.uniform2f(E, M.width, M.height), n.uniform2f(u, D, W), n.uniform1f(e, o), n.uniform1i(a, P.length), n.uniform1f(m, B), n.uniform1f(l, G), n.uniform1f(g, L), n.uniform1f(C, oe), n.uniform1f(H, k), n.uniform1f(p, te ? K : 0), n.uniform3f(A, Q[0], Q[1], Q[2]), n.uniform1f(y, Z), n.uniform1f(c, q), n.uniform1f(
+      S,
+      1 / Math.sqrt(Math.max(0.2, q))
+    ), n.uniform1f(j, O), n.uniform3f(
+      X,
+      U.dodge[0],
+      U.dodge[1],
+      U.dodge[2]
+    ), n.uniform3f(
+      z,
+      U.screen[0],
+      U.screen[1],
+      U.screen[2]
+    ), n.uniform3f(
+      $,
+      U.mix[0],
+      U.mix[1],
+      U.mix[2]
+    );
+    for (let F = 0; F < Math.min(P.length, 16); F++)
+      n.uniform3f(R[F], P[F].cx, P[F].cy, P[F].t0);
+    n.drawArrays(n.TRIANGLE_STRIP, 0, 4), x = requestAnimationFrame(ne);
+  }, ce = async (o, _) => {
+    if (Y) return;
+    const D = J(o), W = J(_);
+    !v && !V && await he();
+    const F = performance.now() / 1e3;
+    P.push({ cx: D, cy: W, t0: F }), P.length > 16 && P.shift(), N && !v && (v = !0, cancelAnimationFrame(x), x = requestAnimationFrame(ne));
+  }, pe = async (o) => {
+    if (!(o instanceof MouseEvent) || o.button !== 0) return;
+    const _ = T ? { left: 0, top: 0, width: innerWidth, height: innerHeight } : r.getBoundingClientRect(), D = (o.clientX - _.left) / _.width, W = (o.clientY - _.top) / _.height;
+    await ce(D, W);
+  };
+  return b.forEach((o) => o.addEventListener("click", pe, !0)), {
+    destroy() {
+      Y = !0, cancelAnimationFrame(x), b.forEach((o) => o.removeEventListener("click", pe, !0)), M.remove();
+    },
+    trigger(o) {
+      const _ = (o == null ? void 0 : o.x) ?? 0.5, D = (o == null ? void 0 : o.y) ?? 0.5;
+      ce(_, D);
+    },
+    update(o) {
+      o.amplitude !== void 0 && (L = o.amplitude), o.frequency !== void 0 && (B = o.frequency), o.speed !== void 0 && (G = o.speed), o.damping !== void 0 && (oe = o.damping), o.decay !== void 0 && (k = o.decay), o.duration !== void 0 && (w = o.duration / 1e3), o.chromatic !== void 0 && (te = o.chromatic), o.chromaticIntensity !== void 0 && (K = o.chromaticIntensity), o.shimmer !== void 0 && (o.shimmer ? (Q = ve(o.shimmer), Z = 1) : Z = 0), o.shimmerWidth !== void 0 && (q = o.shimmerWidth), o.shimmerDuration !== void 0 && (O = o.shimmerDuration / 1e3), o.shimmerGlowColor !== void 0 && (re = o.shimmerGlowColor), (o.shimmer !== void 0 || o.shimmerGlowColor !== void 0) && (U = ie());
+    }
+  };
+}
+export {
+  Be as attachRipple
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "ripppl",
+  "version": "0.1.0",
+  "description": "Ripple displacement effect over the real DOM (WebGL + screen capture)",
+  "keywords": [
+    "ripple",
+    "webgl",
+    "dom",
+    "effect",
+    "animation",
+    "canvas"
+  ],
+  "license": "MIT",
+  "author": "Arman Luthra",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Arman-Luthra/ripyl.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Arman-Luthra/ripyl/issues"
+  },
+  "homepage": "https://github.com/Arman-Luthra/ripyl#readme",
+  "type": "module",
+  "main": "./dist/ripyl.js",
+  "module": "./dist/ripyl.js",
+  "types": "./dist/ripyl.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/ripyl.d.ts",
+      "import": "./dist/ripyl.js",
+      "default": "./dist/ripyl.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "culori": "^4.0.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
+  },
+  "dependencies": {
+    "dom-to-image-more": "^3.7.2"
+  }
+}