liqvued 0.1.2 → 0.2.0

package/README.md

@@ -15,8 +15,8 @@ Inspired by [Liquid Glass CSS/SVG](https://kube.io/blog/liquid-glass-css-svg/)
 ## Features
 
 - **Real-time SVG filter generation** — displacement maps computed via Canvas API
-- **Multiple surface types** — convex, concave, lip
-- **Configurable optics** — bezel width, corner radius, displacement thickness, refraction index, glare angle
+- **Multiple surface types** — convex, concave, lip, bowl, bevel, saddle, ripple, noise, asymmetric
+- **Configurable optics** — bezel width, corner radius, displacement thickness, refraction, magnification, focus, glare angle
 - **Built-in glassmorphism styling** — gradient backgrounds, inset shadows, highlight overlays
 - **TypeScript** — full type definitions
 - **Lightweight** — minimal runtime dependencies beyond Vue
@@ -60,6 +60,8 @@ import { Liqvued } from 'liqvued'
 | bezel           | number              | 22         | Width of the displacement bezel in pixels                                              |
 | thickness       | number              | 42         | Maximum displacement magnitude in pixels                                               |
 | refraction      | number              | 1          | Refraction index multiplier                                                            |
+| magnification   | number              | 0          | Center magnification amount. Positive values enlarge, negative values shrink           |
+| magnificationFocus | number           | 0.82       | Focus radius of the magnification area. Lower values concentrate the effect near center |
 | blur            | number              | 0.4        | CSS backdrop-filter blur amount                                                        |
 | surface         | string              | `'convex'` | Glass surface profile shape                                                            |
 | specularOpacity | number              | 0.45       | Opacity of the specular highlight                                                      |
@@ -74,6 +76,12 @@ import { Liqvued } from 'liqvued'
 - `convex` — squircle convex profile — soft pill-like edges
 - `concave` — inverted convex — inward-curving dish-like refraction
 - `lip` — smooth transition from convex at center to concave at edge
+- `bowl` — deeper concave profile with a more even inward pull
+- `bevel` — linear edge ramp for harder, cleaner refraction
+- `saddle` — mirrored S-curve that shifts direction through the middle
+- `ripple` — small wave modulation across the edge band
+- `noise` — irregular organic edge distortion
+- `asymmetric` — biased profile with more weight toward one side of the edge band
 
 ## Dynamic Element Rendering
 
@@ -98,7 +106,7 @@ The fallback applies `backdrop-filter: blur(12px)` with a subtle border and shad
 
 ## How It Works
 
-The component generates a per-pixel displacement map as an RGBA PNG (red/green channels encode X/Y displacement vectors), injects it into an SVG `<feDisplacementMap>` filter, and applies it via `backdrop-filter` combined with CSS blur. The surface profile functions (`convex`, `concave`, `lip`) define the slope at each point along the bezel, which determines the displacement magnitude. A separate specular highlight map is generated and composited via `feBlend` to simulate surface lighting.
+The component generates a per-pixel displacement map as an RGBA PNG (red/green channels encode X/Y displacement vectors), injects it into an SVG `<feDisplacementMap>` filter, and applies it via `backdrop-filter` combined with CSS blur. The surface profile functions define the edge refraction slope along the bezel, while `magnification` and `magnificationFocus` control an optional center lens effect. A separate specular highlight map is generated and composited via `feBlend` to simulate surface lighting.
 
 ## License
 

package/dist/liqvued.css

@@ -1,2 +1,2 @@
-.liquid-glass[data-v-01d40041]{isolation:isolate;position:relative;overflow:hidden}.liquid-glass__svg[data-v-01d40041]{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}@supports not ((-webkit-backdrop-filter:url("#x")) or (backdrop-filter:url("#x"))){.liquid-glass[data-v-01d40041]{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
+.liquid-glass[data-v-56a7fa97]{isolation:isolate;position:relative;overflow:hidden}.liquid-glass__svg[data-v-56a7fa97]{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}@supports not ((-webkit-backdrop-filter:url("#x")) or (backdrop-filter:url("#x"))){.liquid-glass[data-v-56a7fa97]{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
 /*$vite$:1*/

package/dist/liqvued.mjs

@@ -1,17 +1,31 @@
-import { computed as R, createBlock as ie, createCommentVNode as ce, createElementBlock as Q, createElementVNode as v, defineComponent as de, guardReactiveProps as he, inject as fe, nextTick as X, normalizeProps as pe, normalizeStyle as ve, onBeforeUnmount as ge, onMounted as me, openBlock as L, provide as Me, ref as g, renderSlot as be, resolveDynamicComponent as ye, unref as _e, watch as xe, withCtx as ke } from "vue";
-var we = {
+import { computed as C, createBlock as he, createCommentVNode as fe, createElementBlock as Z, createElementVNode as k, defineComponent as pe, guardReactiveProps as ve, inject as ge, nextTick as ee, normalizeProps as me, normalizeStyle as Me, onBeforeUnmount as be, onMounted as ye, openBlock as W, provide as xe, ref as w, renderSlot as _e, resolveDynamicComponent as ke, unref as we, watch as Ie, withCtx as Re } from "vue";
+function q(r, a, s, o, l) {
+  const b = Math.min(l, Math.min(s, o) / 2), y = s / 2 - b, x = o / 2 - b, c = Math.abs(r - s / 2) - y, S = Math.abs(a - o / 2) - x;
+  return -(Math.min(Math.max(c, S), 0) + Math.hypot(Math.max(c, 0), Math.max(S, 0)) - b);
+}
+function Se(r, a, s, o, l) {
+  const y = q(r - 1.5, a, s, o, l) - q(r + 1.5, a, s, o, l), x = q(r, a - 1.5, s, o, l) - q(r, a + 1.5, s, o, l), c = Math.hypot(y, x);
+  return c < 1e-10 ? {
+    x: 0,
+    y: -1
+  } : {
+    x: y / c,
+    y: x / c
+  };
+}
+var Be = {
   key: 0,
   class: "liquid-glass__svg",
   "aria-hidden": "true"
-}, Re = [
+}, $e = [
   "href",
   "width",
   "height"
-], Be = ["scale"], Ie = [
+], Ce = ["scale"], qe = [
   "href",
   "width",
   "height"
-], Se = /* @__PURE__ */ de({
+], Pe = /* @__PURE__ */ pe({
   __name: "Liqvued",
   props: {
     as: { default: "div" },
@@ -21,6 +35,8 @@ var we = {
     bezel: { default: 22 },
     thickness: { default: 42 },
     refraction: { default: 1 },
+    magnification: { default: 0 },
+    magnificationFocus: { default: 0.82 },
     blur: { default: 0.4 },
     surface: { default: "convex" },
     specularOpacity: { default: 0.45 },
@@ -31,10 +47,10 @@ var we = {
       default: !1
     }
   },
-  setup(d) {
-    const a = d, x = g(null), m = g(1), M = g(1), E = g(""), F = g(""), U = g(1), b = CSS.supports?.("backdrop-filter", "url(#x)") && /Chrome/.test(navigator.userAgent), T = `${`lg-${Math.random().toString(36).slice(2)}`}-filter`, A = fe("_liqvued", !1);
-    Me("_liqvued", !0);
-    const y = g(!1), G = {
+  setup(r) {
+    const a = r, s = w(null), o = w(1), l = w(1), b = w(""), y = w(""), x = w(1), c = typeof CSS < "u" && typeof navigator < "u" && CSS.supports?.("backdrop-filter", "url(#x)") && /Chrome/.test(navigator.userAgent), S = `${`lg-${Math.random().toString(36).slice(2)}`}-filter`, N = ge("_liqvued", !1);
+    xe("_liqvued", !0);
+    const I = w(!1), V = {
       0: 0,
       sm: 4,
       md: 8,
@@ -44,92 +60,107 @@ var we = {
       circle: 9999,
       shaped: 16
     };
-    function W() {
-      return x.value;
+    function j() {
+      return s.value;
     }
-    function k(e, t = 0, n = 1) {
+    function i(e, t = 0, n = 1) {
       return Math.max(t, Math.min(n, e));
     }
-    function Y(e) {
-      return e = k(e), e * e * e * (e * (e * 6 - 15) + 10);
-    }
     function B(e) {
-      return Math.pow(1 - Math.pow(1 - k(e), 4), 1 / 4);
-    }
-    function N(e) {
-      if (a.surface === "concave") return 1 - B(e);
-      if (a.surface === "lip") {
-        const t = Y(e);
-        return B(e) * (1 - t) + (1 - B(e)) * t;
-      }
-      return B(e);
+      return e = i(e), e * e * e * (e * (e * 6 - 15) + 10);
     }
-    function Z(e) {
-      return (N(e + 1e-3) - N(e - 1e-3)) / (2 * 1e-3);
+    function P(e) {
+      return Math.pow(1 - Math.pow(1 - i(e), 4), 1 / 4);
     }
-    function ee(e) {
-      const r = Math.atan(e), c = 1 / 1.5 * Math.sin(r), l = Math.asin(k(c, -1, 1));
-      return Math.tan(r - l);
+    function te(e, t, n) {
+      return i(e + Math.sin(i(e) * Math.PI * t) * n);
     }
-    function te(e, t, n, r, c) {
-      const l = Math.min(c, Math.min(n, r) / 2), s = n / 2 - l, u = r / 2 - l, i = Math.abs(e - n / 2) - s, o = Math.abs(t - r / 2) - u;
-      return -(Math.min(Math.max(i, o), 0) + Math.hypot(Math.max(i, 0), Math.max(o, 0)) - l);
+    function ae(e) {
+      const t = i(e);
+      return i(t + Math.sin(t * 39.1) * 0.06 + Math.sin(t * 91.7) * 0.035);
     }
-    function ae(e, t, n, r) {
-      const c = Math.min(e, n - 1 - e), l = Math.min(t, r - 1 - t), s = 4, u = Math.pow(c, s) + Math.pow(l, s);
-      let i, o;
-      u > 1e-10 ? (i = (e > n / 2 ? 1 : -1) * (Math.pow(l, s) / u), o = (t > r / 2 ? 1 : -1) * (Math.pow(c, s) / u)) : (i = e > n / 2 ? 1 : -1, o = t > r / 2 ? 1 : -1);
-      const _ = Math.hypot(i, o);
-      return _ < 1e-10 ? {
-        x: 0,
-        y: -1
-      } : {
-        x: i / _,
-        y: o / _
+    function ne(e, t, n, f, m, R) {
+      const v = n / 2, g = f / 2, $ = Math.max(1, n / 2), M = Math.max(1, f / 2), z = (e - v) / $, D = (t - g) / M, u = Math.hypot(z, D), d = i(R, 0.2, 1.4), h = Math.pow(B(1 - i(u / d)), 1.6), p = m >= 0 ? 1 + m * h : 1 / (1 + Math.abs(m) * h);
+      return {
+        x: (e - v) / p - (e - v),
+        y: (t - g) / p - (t - g)
       };
     }
-    function V(e) {
+    function H(e) {
+      const t = i(e);
+      switch (a.surface) {
+        case "concave":
+        case "bowl":
+          return 1 - P(t);
+        case "lip":
+          return P(t) * (1 - B(t)) + (1 - P(t)) * B(t);
+        case "bevel":
+          return t;
+        case "saddle":
+          return 0.5 + Math.sin((t - 0.5) * Math.PI) * 0.5;
+        case "ripple":
+          return te(t, 3, 0.12);
+        case "noise":
+          return ae(t);
+        case "asymmetric":
+          return i(Math.pow(t, 0.65) * 0.65 + B(t) * 0.35);
+        case "convex":
+          return P(t);
+      }
+    }
+    function re(e) {
+      return (H(e + 1e-3) - H(e - 1e-3)) / (2 * 1e-3);
+    }
+    function oe(e) {
+      const f = Math.atan(e), m = 1 / 1.5 * Math.sin(f), R = Math.asin(i(m, -1, 1));
+      return Math.tan(f - R);
+    }
+    function J(e) {
       return e.toDataURL("image/png");
     }
-    function C() {
+    function T() {
       if (a.fallbackOnly) return;
-      const e = Math.max(1, Math.round(m.value)), t = Math.max(1, Math.round(M.value)), n = document.createElement("canvas");
+      const e = Math.max(1, Math.round(o.value)), t = Math.max(1, Math.round(l.value)), n = document.createElement("canvas");
       n.width = e, n.height = t;
-      const r = document.createElement("canvas");
-      r.width = e, r.height = t;
-      const c = n.getContext("2d"), l = r.getContext("2d"), s = c.createImageData(e, t), u = l.createImageData(e, t), i = [];
-      let o = 1;
-      const _ = {
+      const f = document.createElement("canvas");
+      f.width = e, f.height = t;
+      const m = n.getContext("2d"), R = f.getContext("2d"), v = m.createImageData(e, t), g = R.createImageData(e, t), $ = [];
+      let M = 1;
+      const z = {
         x: Math.cos(a.glareAngle * Math.PI / 180),
         y: Math.sin(a.glareAngle * Math.PI / 180)
-      };
-      for (let h = 0; h < t; h++) for (let f = 0; f < e; f++) {
-        const w = te(f, h, e, t, q.value), p = k(w / a.bezel);
-        let z = 0, D = 0, J = 0;
-        if (w >= 0 && w < a.bezel) {
-          const $ = ae(f, h, e, t), K = ee(Z(p)) * a.thickness * (1 - p) * a.refraction;
-          z = -$.x * K, D = -$.y * K, o = Math.max(o, Math.abs(z), Math.abs(D));
-          const ue = k($.x * _.x + $.y * _.y, 0, 1);
-          J = Math.pow(ue, 18) * a.specularOpacity;
+      }, D = Math.max(1, Math.min(a.bezel, Math.min(e, t) * 0.28));
+      for (let u = 0; u < t; u++) for (let d = 0; d < e; d++) {
+        const h = q(d, u, e, t, F.value), p = i(h / D);
+        let L = 0, E = 0, X = 0;
+        if (h >= 0 && h < D) {
+          const _ = Se(d, u, e, t, F.value), Y = oe(re(p)) * a.thickness * B(1 - p) * a.refraction;
+          L = -_.x * Y, E = -_.y * Y, M = Math.max(M, Math.abs(L), Math.abs(E));
+          const de = i(_.x * z.x + _.y * z.y, 0, 1);
+          X = Math.pow(de, 18) * a.specularOpacity;
         }
-        i.push([z, D]);
-        const S = (h * e + f) * 4, le = Math.round(J * 255);
-        u.data[S] = 255, u.data[S + 1] = 255, u.data[S + 2] = 255, u.data[S + 3] = le;
+        if (a.magnification !== 0 && h >= 0) {
+          const _ = ne(d, u, e, t, a.magnification, a.magnificationFocus);
+          L += _.x, E += _.y;
+        }
+        $.push([L, E]);
+        const U = (u * e + d) * 4, ue = Math.round(X * 255);
+        g.data[U] = 255, g.data[U + 1] = 255, g.data[U + 2] = 255, g.data[U + 3] = ue;
       }
-      i.forEach(([h, f], w) => {
-        const p = w * 4;
-        s.data[p] = Math.round(128 + h / o * 127), s.data[p + 1] = Math.round(128 + f / o * 127), s.data[p + 2] = 128, s.data[p + 3] = 255;
-      }), c.putImageData(s, 0, 0), l.putImageData(u, 0, 0), E.value = V(n), F.value = V(r), U.value = o;
+      M = $.reduce((u, [d, h]) => Math.max(u, Math.abs(d), Math.abs(h)), 1), $.forEach(([u, d], h) => {
+        const p = h * 4;
+        v.data[p] = Math.round(128 + u / M * 127), v.data[p + 1] = Math.round(128 + d / M * 127), v.data[p + 2] = 128, v.data[p + 3] = 255;
+      }), m.putImageData(v, 0, 0), R.putImageData(g, 0, 0), b.value = J(n), y.value = J(f), x.value = M;
     }
-    function j() {
-      const e = W();
-      e && (m.value = Math.max(1, e.offsetWidth), M.value = Math.max(1, e.offsetHeight));
+    function K() {
+      const e = j();
+      e && (o.value = Math.max(1, e.offsetWidth), l.value = Math.max(1, e.offsetHeight));
     }
-    const H = b ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.22)", q = R(() => {
+    const Q = c ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.22)", F = C(() => {
       if (a.radius !== 32) return a.radius;
       const e = a.asProps;
-      return typeof e.rounded == "string" && e.rounded in G ? G[e.rounded] : a.radius;
-    }), ne = R(() => a.borderRadius || `${q.value}px`), re = /* @__PURE__ */ new Set([
+      return typeof e.rounded == "string" && e.rounded in V ? V[e.rounded] : a.radius;
+    }), se = C(() => a.borderRadius || `${F.value}px`), le = /* @__PURE__ */ new Set([
       "primary",
       "secondary",
       "accent",
@@ -140,60 +171,62 @@ var we = {
       "surface",
       "background"
     ]);
-    function oe(e, t) {
-      if (re.has(e)) return `rgba(var(--v-theme-${e}), ${t})`;
+    function ce(e, t) {
+      if (le.has(e)) return `rgba(var(--v-theme-${e}), ${t})`;
       if (e.startsWith("#")) {
         const n = e.replace("#", "");
         return `rgba(${parseInt(n.slice(0, 2), 16)}, ${parseInt(n.slice(2, 4), 16)}, ${parseInt(n.slice(4, 6), 16)}, ${t})`;
       }
-      return e.startsWith("rgb") ? e.replace("rgb(", "rgba(").replace(")", `, ${t})`) : H;
+      return e.startsWith("rgb") ? e.replace("rgb(", "rgba(").replace(")", `, ${t})`) : Q;
     }
-    const O = R(() => {
+    const A = C(() => {
       if (a.glassBackground !== void 0) return a.glassBackground;
       const e = a.asProps;
-      return typeof e.color == "string" ? oe(e.color, 0.6) : H;
-    }), I = R(() => a.fallbackOnly || !b ? "blur(12px)" : `url(#${T}) blur(${a.blur}px)`), se = R(() => ({
-      borderRadius: `${ne.value}`,
-      ...O.value !== void 0 ? { backgroundColor: O.value } : {},
-      ...O.value !== void 0 ? { boxShadow: ["inset 0 0 0 1px rgba(255, 255, 255, 0.28)", "0 18px 48px rgba(0, 0, 0, 0.18)"].join(", ") } : {},
-      ...y.value && !A ? {
-        backdropFilter: I.value,
-        WebkitBackdropFilter: I.value
+      return typeof e.color == "string" ? ce(e.color, 0.6) : Q;
+    }), O = C(() => a.fallbackOnly || !c ? "blur(12px)" : `url(#${S}) blur(${a.blur}px)`), ie = C(() => ({
+      borderRadius: `${se.value}`,
+      ...A.value !== void 0 ? { backgroundColor: A.value } : {},
+      ...A.value !== void 0 ? { boxShadow: ["inset 0 0 0 1px rgba(255, 255, 255, 0.28)", "0 18px 48px rgba(0, 0, 0, 0.18)"].join(", ") } : {},
+      ...I.value && !N ? {
+        backdropFilter: O.value,
+        WebkitBackdropFilter: O.value
       } : {},
-      ...y.value && A && !b ? {
-        backdropFilter: I.value,
-        WebkitBackdropFilter: I.value
+      ...I.value && N && !c ? {
+        backdropFilter: O.value,
+        WebkitBackdropFilter: O.value
       } : {}
     }));
-    let P = null;
-    return me(async () => {
-      if (await X(), b) {
-        j(), C(), await X(), y.value = !0, P = new ResizeObserver(() => {
-          j(), C(), y.value = !0;
+    let G = null;
+    return ye(async () => {
+      if (await ee(), c) {
+        K(), T(), await ee(), I.value = !0, G = new ResizeObserver(() => {
+          K(), T(), I.value = !0;
         });
-        const e = W();
-        e && P.observe(e);
-      } else y.value = !0;
-    }), xe(() => [
-      q.value,
+        const e = j();
+        e && G.observe(e);
+      } else I.value = !0;
+    }), Ie(() => [
+      F.value,
       a.bezel,
       a.thickness,
       a.refraction,
+      a.magnification,
+      a.magnificationFocus,
       a.surface,
       a.specularOpacity,
       a.glareAngle,
       a.fallbackOnly
     ], () => {
-      b && C(), y.value = !0;
-    }), ge(() => {
-      P?.disconnect();
-    }), (e, t) => (L(), Q("div", {
+      c && T(), I.value = !0;
+    }), be(() => {
+      G?.disconnect();
+    }), (e, t) => (W(), Z("div", {
       ref_key: "root",
-      ref: x,
+      ref: s,
       class: "liquid-glass",
-      style: ve(se.value)
-    }, [_e(b) ? (L(), Q("svg", we, [v("defs", null, [v("filter", {
-      id: T,
+      style: Me(ie.value)
+    }, [we(c) ? (W(), Z("svg", Be, [k("defs", null, [k("filter", {
+      id: S,
       "color-interpolation-filters": "sRGB",
       filterUnits: "userSpaceOnUse",
       x: "0",
@@ -201,53 +234,53 @@ var we = {
       width: "10000",
       height: "10000"
     }, [
-      v("feImage", {
-        href: E.value,
+      k("feImage", {
+        href: b.value,
         x: "0",
         y: "0",
-        width: m.value,
-        height: M.value,
+        width: o.value,
+        height: l.value,
         result: "displacement_map"
-      }, null, 8, Re),
-      t[0] || (t[0] = v("feGaussianBlur", {
+      }, null, 8, $e),
+      t[0] || (t[0] = k("feGaussianBlur", {
         in: "displacement_map",
         stdDeviation: "2",
         result: "smooth_disp"
       }, null, -1)),
-      v("feDisplacementMap", {
+      k("feDisplacementMap", {
         in: "SourceGraphic",
         in2: "smooth_disp",
-        scale: U.value,
+        scale: x.value,
         xChannelSelector: "R",
         yChannelSelector: "G",
         result: "refracted"
-      }, null, 8, Be),
-      v("feImage", {
-        href: F.value,
+      }, null, 8, Ce),
+      k("feImage", {
+        href: y.value,
         x: "0",
         y: "0",
-        width: m.value,
-        height: M.value,
+        width: o.value,
+        height: l.value,
         result: "specular"
-      }, null, 8, Ie),
-      t[1] || (t[1] = v("feBlend", {
+      }, null, 8, qe),
+      t[1] || (t[1] = k("feBlend", {
         in: "refracted",
         in2: "specular",
         mode: "screen"
       }, null, -1))
-    ])])])) : ce("", !0), (L(), ie(ye(d.as), pe(he(d.asProps)), {
-      default: ke(() => [be(e.$slots, "default", {}, void 0, !0)]),
+    ])])])) : fe("", !0), (W(), he(ke(r.as), me(ve(r.asProps)), {
+      default: Re(() => [_e(e.$slots, "default", {}, void 0, !0)]),
       _: 3
     }, 16))], 4));
   }
-}), $e = (d, a) => {
-  const x = d.__vccOpts || d;
-  for (const [m, M] of a) x[m] = M;
-  return x;
-}, Ce = /* @__PURE__ */ $e(Se, [["__scopeId", "data-v-01d40041"]]), Oe = { install(d) {
-  d.component("Liqvued", Ce);
+}), Fe = (r, a) => {
+  const s = r.__vccOpts || r;
+  for (const [o, l] of a) s[o] = l;
+  return s;
+}, Oe = /* @__PURE__ */ Fe(Pe, [["__scopeId", "data-v-56a7fa97"]]), De = { install(r) {
+  r.component("Liqvued", Oe);
 } };
 export {
-  Ce as Liqvued,
-  Oe as default
+  Oe as Liqvued,
+  De as default
 };

package/dist/liqvued.umd.js

@@ -1 +1 @@
-(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.Liqvued={},f.Vue))})(this,function(f,t){Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var K={key:0,class:"liquid-glass__svg","aria-hidden":"true"},Q=["href","width","height"],X=["scale"],Y=["href","width","height"],Z=(0,t.defineComponent)({__name:"Liqvued",props:{as:{default:"div"},asProps:{default:()=>({})},radius:{default:32},borderRadius:{},bezel:{default:22},thickness:{default:42},refraction:{default:1},blur:{default:.4},surface:{default:"convex"},specularOpacity:{default:.45},glareAngle:{default:-60},glassBackground:{default:void 0},fallbackOnly:{type:Boolean,default:!1}},setup(h){const n=h,k=(0,t.ref)(null),v=(0,t.ref)(1),M=(0,t.ref)(1),V=(0,t.ref)(""),L=(0,t.ref)(""),N=(0,t.ref)(1),b=CSS.supports?.("backdrop-filter","url(#x)")&&/Chrome/.test(navigator.userAgent),z=`${`lg-${Math.random().toString(36).slice(2)}`}-filter`,D=(0,t.inject)("_liqvued",!1);(0,t.provide)("_liqvued",!0);const y=(0,t.ref)(!1),F={0:0,sm:4,md:8,lg:12,xl:16,pill:9999,circle:9999,shaped:16};function U(){return k.value}function x(e,a=0,r=1){return Math.max(a,Math.min(r,e))}function ae(e){return e=x(e),e*e*e*(e*(e*6-15)+10)}function B(e){return Math.pow(1-Math.pow(1-x(e),4),1/4)}function A(e){if(n.surface==="concave")return 1-B(e);if(n.surface==="lip"){const a=ae(e);return B(e)*(1-a)+(1-B(e))*a}return B(e)}function ne(e){return(A(e+.001)-A(e-.001))/(2*.001)}function re(e){const o=Math.atan(e),d=1/1.5*Math.sin(o),i=Math.asin(x(d,-1,1));return Math.tan(o-i)}function oe(e,a,r,o,d){const i=Math.min(d,Math.min(r,o)/2),s=r/2-i,c=o/2-i,u=Math.abs(e-r/2)-s,l=Math.abs(a-o/2)-c;return-(Math.min(Math.max(u,l),0)+Math.hypot(Math.max(u,0),Math.max(l,0))-i)}function le(e,a,r,o){const d=Math.min(e,r-1-e),i=Math.min(a,o-1-a),s=4,c=Math.pow(d,s)+Math.pow(i,s);let u,l;c>1e-10?(u=(e>r/2?1:-1)*(Math.pow(i,s)/c),l=(a>o/2?1:-1)*(Math.pow(d,s)/c)):(u=e>r/2?1:-1,l=a>o/2?1:-1);const _=Math.hypot(u,l);return _<1e-10?{x:0,y:-1}:{x:u/_,y:l/_}}function G(e){return e.toDataURL("image/png")}function E(){if(n.fallbackOnly)return;const e=Math.max(1,Math.round(v.value)),a=Math.max(1,Math.round(M.value)),r=document.createElement("canvas");r.width=e,r.height=a;const o=document.createElement("canvas");o.width=e,o.height=a;const d=r.getContext("2d"),i=o.getContext("2d"),s=d.createImageData(e,a),c=i.createImageData(e,a),u=[];let l=1;const _={x:Math.cos(n.glareAngle*Math.PI/180),y:Math.sin(n.glareAngle*Math.PI/180)};for(let p=0;p<a;p++)for(let m=0;m<e;m++){const w=oe(m,p,e,a,$.value),g=x(w/n.bezel);let O=0,P=0,H=0;if(w>=0&&w<n.bezel){const I=le(m,p,e,a),J=re(ne(g))*n.thickness*(1-g)*n.refraction;O=-I.x*J,P=-I.y*J,l=Math.max(l,Math.abs(O),Math.abs(P));const fe=x(I.x*_.x+I.y*_.y,0,1);H=Math.pow(fe,18)*n.specularOpacity}u.push([O,P]);const R=(p*e+m)*4,de=Math.round(H*255);c.data[R]=255,c.data[R+1]=255,c.data[R+2]=255,c.data[R+3]=de}u.forEach(([p,m],w)=>{const g=w*4;s.data[g]=Math.round(128+p/l*127),s.data[g+1]=Math.round(128+m/l*127),s.data[g+2]=128,s.data[g+3]=255}),d.putImageData(s,0,0),i.putImageData(c,0,0),V.value=G(r),L.value=G(o),N.value=l}function W(){const e=U();e&&(v.value=Math.max(1,e.offsetWidth),M.value=Math.max(1,e.offsetHeight))}const j=b?"rgba(255, 255, 255, 0.08)":"rgba(255, 255, 255, 0.22)",$=(0,t.computed)(()=>{if(n.radius!==32)return n.radius;const e=n.asProps;return typeof e.rounded=="string"&&e.rounded in F?F[e.rounded]:n.radius}),se=(0,t.computed)(()=>n.borderRadius||`${$.value}px`),ie=new Set(["primary","secondary","accent","info","warning","error","success","surface","background"]);function ce(e,a){if(ie.has(e))return`rgba(var(--v-theme-${e}), ${a})`;if(e.startsWith("#")){const r=e.replace("#","");return`rgba(${parseInt(r.slice(0,2),16)}, ${parseInt(r.slice(2,4),16)}, ${parseInt(r.slice(4,6),16)}, ${a})`}return e.startsWith("rgb")?e.replace("rgb(","rgba(").replace(")",`, ${a})`):j}const q=(0,t.computed)(()=>{if(n.glassBackground!==void 0)return n.glassBackground;const e=n.asProps;return typeof e.color=="string"?ce(e.color,.6):j}),S=(0,t.computed)(()=>n.fallbackOnly||!b?"blur(12px)":`url(#${z}) blur(${n.blur}px)`),ue=(0,t.computed)(()=>({borderRadius:`${se.value}`,...q.value!==void 0?{backgroundColor:q.value}:{},...q.value!==void 0?{boxShadow:["inset 0 0 0 1px rgba(255, 255, 255, 0.28)","0 18px 48px rgba(0, 0, 0, 0.18)"].join(", ")}:{},...y.value&&!D?{backdropFilter:S.value,WebkitBackdropFilter:S.value}:{},...y.value&&D&&!b?{backdropFilter:S.value,WebkitBackdropFilter:S.value}:{}}));let C=null;return(0,t.onMounted)(async()=>{if(await(0,t.nextTick)(),b){W(),E(),await(0,t.nextTick)(),y.value=!0,C=new ResizeObserver(()=>{W(),E(),y.value=!0});const e=U();e&&C.observe(e)}else y.value=!0}),(0,t.watch)(()=>[$.value,n.bezel,n.thickness,n.refraction,n.surface,n.specularOpacity,n.glareAngle,n.fallbackOnly],()=>{b&&E(),y.value=!0}),(0,t.onBeforeUnmount)(()=>{C?.disconnect()}),(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{ref_key:"root",ref:k,class:"liquid-glass",style:(0,t.normalizeStyle)(ue.value)},[(0,t.unref)(b)?((0,t.openBlock)(),(0,t.createElementBlock)("svg",K,[(0,t.createElementVNode)("defs",null,[(0,t.createElementVNode)("filter",{id:z,"color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse",x:"0",y:"0",width:"10000",height:"10000"},[(0,t.createElementVNode)("feImage",{href:V.value,x:"0",y:"0",width:v.value,height:M.value,result:"displacement_map"},null,8,Q),a[0]||(a[0]=(0,t.createElementVNode)("feGaussianBlur",{in:"displacement_map",stdDeviation:"2",result:"smooth_disp"},null,-1)),(0,t.createElementVNode)("feDisplacementMap",{in:"SourceGraphic",in2:"smooth_disp",scale:N.value,xChannelSelector:"R",yChannelSelector:"G",result:"refracted"},null,8,X),(0,t.createElementVNode)("feImage",{href:L.value,x:"0",y:"0",width:v.value,height:M.value,result:"specular"},null,8,Y),a[1]||(a[1]=(0,t.createElementVNode)("feBlend",{in:"refracted",in2:"specular",mode:"screen"},null,-1))])])])):(0,t.createCommentVNode)("",!0),((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(h.as),(0,t.normalizeProps)((0,t.guardReactiveProps)(h.asProps)),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,"default",{},void 0,!0)]),_:3},16))],4))}}),ee=(h,n)=>{const k=h.__vccOpts||h;for(const[v,M]of n)k[v]=M;return k},T=ee(Z,[["__scopeId","data-v-01d40041"]]),te={install(h){h.component("Liqvued",T)}};f.Liqvued=T,f.default=te});
+(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v.Liqvued={},v.Vue))})(this,function(v,t){Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function I(o,n,c,s,l){const x=Math.min(l,Math.min(c,s)/2),_=c/2-x,k=s/2-x,i=Math.abs(o-c/2)-_,R=Math.abs(n-s/2)-k;return-(Math.min(Math.max(i,R),0)+Math.hypot(Math.max(i,0),Math.max(R,0))-x)}function Y(o,n,c,s,l){const _=I(o-1.5,n,c,s,l)-I(o+1.5,n,c,s,l),k=I(o,n-1.5,c,s,l)-I(o,n+1.5,c,s,l),i=Math.hypot(_,k);return i<1e-10?{x:0,y:-1}:{x:_/i,y:k/i}}var Z={key:0,class:"liquid-glass__svg","aria-hidden":"true"},ee=["href","width","height"],te=["scale"],ae=["href","width","height"],ne=(0,t.defineComponent)({__name:"Liqvued",props:{as:{default:"div"},asProps:{default:()=>({})},radius:{default:32},borderRadius:{},bezel:{default:22},thickness:{default:42},refraction:{default:1},magnification:{default:0},magnificationFocus:{default:.82},blur:{default:.4},surface:{default:"convex"},specularOpacity:{default:.45},glareAngle:{default:-60},glassBackground:{default:void 0},fallbackOnly:{type:Boolean,default:!1}},setup(o){const n=o,c=(0,t.ref)(null),s=(0,t.ref)(1),l=(0,t.ref)(1),x=(0,t.ref)(""),_=(0,t.ref)(""),k=(0,t.ref)(1),i=typeof CSS<"u"&&typeof navigator<"u"&&CSS.supports?.("backdrop-filter","url(#x)")&&/Chrome/.test(navigator.userAgent),R=`${`lg-${Math.random().toString(36).slice(2)}`}-filter`,A=(0,t.inject)("_liqvued",!1);(0,t.provide)("_liqvued",!0);const B=(0,t.ref)(!1),G={0:0,sm:4,md:8,lg:12,xl:16,pill:9999,circle:9999,shaped:16};function W(){return c.value}function u(e,a=0,r=1){return Math.max(a,Math.min(r,e))}function E(e){return e=u(e),e*e*e*(e*(e*6-15)+10)}function q(e){return Math.pow(1-Math.pow(1-u(e),4),1/4)}function se(e,a,r){return u(e+Math.sin(u(e)*Math.PI*a)*r)}function ce(e){const a=u(e);return u(a+Math.sin(a*39.1)*.06+Math.sin(a*91.7)*.035)}function le(e,a,r,p,b,S){const g=r/2,M=p/2,$=Math.max(1,r/2),y=Math.max(1,p/2),O=(e-g)/$,V=(a-M)/y,d=Math.hypot(O,V),f=u(S,.2,1.4),h=Math.pow(E(1-u(d/f)),1.6),m=b>=0?1+b*h:1/(1+Math.abs(b)*h);return{x:(e-g)/m-(e-g),y:(a-M)/m-(a-M)}}function j(e){const a=u(e);switch(n.surface){case"concave":case"bowl":return 1-q(a);case"lip":return q(a)*(1-E(a))+(1-q(a))*E(a);case"bevel":return a;case"saddle":return .5+Math.sin((a-.5)*Math.PI)*.5;case"ripple":return se(a,3,.12);case"noise":return ce(a);case"asymmetric":return u(Math.pow(a,.65)*.65+E(a)*.35);case"convex":return q(a)}}function ie(e){return(j(e+.001)-j(e-.001))/(2*.001)}function ue(e){const p=Math.atan(e),b=1/1.5*Math.sin(p),S=Math.asin(u(b,-1,1));return Math.tan(p-S)}function H(e){return e.toDataURL("image/png")}function L(){if(n.fallbackOnly)return;const e=Math.max(1,Math.round(s.value)),a=Math.max(1,Math.round(l.value)),r=document.createElement("canvas");r.width=e,r.height=a;const p=document.createElement("canvas");p.width=e,p.height=a;const b=r.getContext("2d"),S=p.getContext("2d"),g=b.createImageData(e,a),M=S.createImageData(e,a),$=[];let y=1;const O={x:Math.cos(n.glareAngle*Math.PI/180),y:Math.sin(n.glareAngle*Math.PI/180)},V=Math.max(1,Math.min(n.bezel,Math.min(e,a)*.28));for(let d=0;d<a;d++)for(let f=0;f<e;f++){const h=I(f,d,e,a,C.value),m=u(h/V);let F=0,N=0,Q=0;if(h>=0&&h<V){const w=Y(f,d,e,a,C.value),X=ue(ie(m))*n.thickness*E(1-m)*n.refraction;F=-w.x*X,N=-w.y*X,y=Math.max(y,Math.abs(F),Math.abs(N));const ge=u(w.x*O.x+w.y*O.y,0,1);Q=Math.pow(ge,18)*n.specularOpacity}if(n.magnification!==0&&h>=0){const w=le(f,d,e,a,n.magnification,n.magnificationFocus);F+=w.x,N+=w.y}$.push([F,N]);const T=(d*e+f)*4,me=Math.round(Q*255);M.data[T]=255,M.data[T+1]=255,M.data[T+2]=255,M.data[T+3]=me}y=$.reduce((d,[f,h])=>Math.max(d,Math.abs(f),Math.abs(h)),1),$.forEach(([d,f],h)=>{const m=h*4;g.data[m]=Math.round(128+d/y*127),g.data[m+1]=Math.round(128+f/y*127),g.data[m+2]=128,g.data[m+3]=255}),b.putImageData(g,0,0),S.putImageData(M,0,0),x.value=H(r),_.value=H(p),k.value=y}function J(){const e=W();e&&(s.value=Math.max(1,e.offsetWidth),l.value=Math.max(1,e.offsetHeight))}const K=i?"rgba(255, 255, 255, 0.08)":"rgba(255, 255, 255, 0.22)",C=(0,t.computed)(()=>{if(n.radius!==32)return n.radius;const e=n.asProps;return typeof e.rounded=="string"&&e.rounded in G?G[e.rounded]:n.radius}),de=(0,t.computed)(()=>n.borderRadius||`${C.value}px`),fe=new Set(["primary","secondary","accent","info","warning","error","success","surface","background"]);function he(e,a){if(fe.has(e))return`rgba(var(--v-theme-${e}), ${a})`;if(e.startsWith("#")){const r=e.replace("#","");return`rgba(${parseInt(r.slice(0,2),16)}, ${parseInt(r.slice(2,4),16)}, ${parseInt(r.slice(4,6),16)}, ${a})`}return e.startsWith("rgb")?e.replace("rgb(","rgba(").replace(")",`, ${a})`):K}const z=(0,t.computed)(()=>{if(n.glassBackground!==void 0)return n.glassBackground;const e=n.asProps;return typeof e.color=="string"?he(e.color,.6):K}),P=(0,t.computed)(()=>n.fallbackOnly||!i?"blur(12px)":`url(#${R}) blur(${n.blur}px)`),pe=(0,t.computed)(()=>({borderRadius:`${de.value}`,...z.value!==void 0?{backgroundColor:z.value}:{},...z.value!==void 0?{boxShadow:["inset 0 0 0 1px rgba(255, 255, 255, 0.28)","0 18px 48px rgba(0, 0, 0, 0.18)"].join(", ")}:{},...B.value&&!A?{backdropFilter:P.value,WebkitBackdropFilter:P.value}:{},...B.value&&A&&!i?{backdropFilter:P.value,WebkitBackdropFilter:P.value}:{}}));let D=null;return(0,t.onMounted)(async()=>{if(await(0,t.nextTick)(),i){J(),L(),await(0,t.nextTick)(),B.value=!0,D=new ResizeObserver(()=>{J(),L(),B.value=!0});const e=W();e&&D.observe(e)}else B.value=!0}),(0,t.watch)(()=>[C.value,n.bezel,n.thickness,n.refraction,n.magnification,n.magnificationFocus,n.surface,n.specularOpacity,n.glareAngle,n.fallbackOnly],()=>{i&&L(),B.value=!0}),(0,t.onBeforeUnmount)(()=>{D?.disconnect()}),(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)("div",{ref_key:"root",ref:c,class:"liquid-glass",style:(0,t.normalizeStyle)(pe.value)},[(0,t.unref)(i)?((0,t.openBlock)(),(0,t.createElementBlock)("svg",Z,[(0,t.createElementVNode)("defs",null,[(0,t.createElementVNode)("filter",{id:R,"color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse",x:"0",y:"0",width:"10000",height:"10000"},[(0,t.createElementVNode)("feImage",{href:x.value,x:"0",y:"0",width:s.value,height:l.value,result:"displacement_map"},null,8,ee),a[0]||(a[0]=(0,t.createElementVNode)("feGaussianBlur",{in:"displacement_map",stdDeviation:"2",result:"smooth_disp"},null,-1)),(0,t.createElementVNode)("feDisplacementMap",{in:"SourceGraphic",in2:"smooth_disp",scale:k.value,xChannelSelector:"R",yChannelSelector:"G",result:"refracted"},null,8,te),(0,t.createElementVNode)("feImage",{href:_.value,x:"0",y:"0",width:s.value,height:l.value,result:"specular"},null,8,ae),a[1]||(a[1]=(0,t.createElementVNode)("feBlend",{in:"refracted",in2:"specular",mode:"screen"},null,-1))])])])):(0,t.createCommentVNode)("",!0),((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(o.as),(0,t.normalizeProps)((0,t.guardReactiveProps)(o.asProps)),{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,"default",{},void 0,!0)]),_:3},16))],4))}}),re=(o,n)=>{const c=o.__vccOpts||o;for(const[s,l]of n)c[s]=l;return c},U=re(ne,[["__scopeId","data-v-56a7fa97"]]),oe={install(o){o.component("Liqvued",U)}};v.Liqvued=U,v.default=oe});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "liqvued",
   "types": "./index.d.ts",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Liquid-glass for Vue",
   "exports": {
     ".": {

package/src/Liqvued.vue

@@ -10,6 +10,7 @@ import {
   ref,
   watch,
 } from 'vue'
+import { distanceToRoundedRectEdge, normalFromRoundedRect } from './shape'
 import type { Surface } from './types'
 
 const props = withDefaults(defineProps<{
@@ -20,6 +21,8 @@ const props = withDefaults(defineProps<{
   bezel?: number
   thickness?: number
   refraction?: number
+  magnification?: number
+  magnificationFocus?: number
   blur?: number
   surface?: Surface
   specularOpacity?: number
@@ -34,6 +37,8 @@ const props = withDefaults(defineProps<{
   bezel: 22,
   thickness: 42,
   refraction: 1,
+  magnification: 0,
+  magnificationFocus: 0.82,
   blur: 0.4,
   surface: 'convex',
   specularOpacity: 0.45,
@@ -49,6 +54,8 @@ const mapUrl = ref('')
 const specularUrl = ref('')
 const scale = ref(1)
 const supportsLiquidGlass =
+  typeof CSS !== 'undefined' &&
+  typeof navigator !== 'undefined' &&
   CSS.supports?.('backdrop-filter', 'url(#x)') &&
   /Chrome/.test(navigator.userAgent)
 
@@ -91,13 +98,67 @@ function convex(x: number) {
   return Math.pow(1 - Math.pow(1 - clamp(x), 4), 1 / 4)
 }
 
+function wave(x: number, frequency: number, amplitude: number) {
+  return clamp(x + Math.sin(clamp(x) * Math.PI * frequency) * amplitude)
+}
+
+function deterministicNoise(x: number) {
+  const t = clamp(x)
+  return clamp(t + Math.sin(t * 39.1) * 0.06 + Math.sin(t * 91.7) * 0.035)
+}
+
+function magnificationVector(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  magnification: number,
+  magnificationFocus: number,
+) {
+  const cx = w / 2
+  const cy = h / 2
+  const rx = Math.max(1, w / 2)
+  const ry = Math.max(1, h / 2)
+  const dx = (x - cx) / rx
+  const dy = (y - cy) / ry
+  const radius = Math.hypot(dx, dy)
+  const focusRadius = clamp(magnificationFocus, 0.2, 1.4)
+  const focus = Math.pow(
+    smootherStep(1 - clamp(radius / focusRadius)),
+    1.6,
+  )
+  const zoom = magnification >= 0
+    ? 1 + magnification * focus
+    : 1 / (1 + Math.abs(magnification) * focus)
+
+  return {
+    x: (x - cx) / zoom - (x - cx),
+    y: (y - cy) / zoom - (y - cy),
+  }
+}
+
 function surfaceFn(x: number) {
-  if (props.surface === 'concave') return 1 - convex(x)
-  if (props.surface === 'lip') {
-    const t = smootherStep(x)
-    return convex(x) * (1 - t) + (1 - convex(x)) * t
+  const t = clamp(x)
+
+  switch (props.surface) {
+    case 'concave':
+    case 'bowl':
+      return 1 - convex(t)
+    case 'lip':
+      return convex(t) * (1 - smootherStep(t)) + (1 - convex(t)) * smootherStep(t)
+    case 'bevel':
+      return t
+    case 'saddle':
+      return 0.5 + Math.sin((t - 0.5) * Math.PI) * 0.5
+    case 'ripple':
+      return wave(t, 3, 0.12)
+    case 'noise':
+      return deterministicNoise(t)
+    case 'asymmetric':
+      return clamp(Math.pow(t, 0.65) * 0.65 + smootherStep(t) * 0.35)
+    case 'convex':
+      return convex(t)
   }
-  return convex(x)
 }
 
 function derivative(x: number) {
@@ -118,54 +179,6 @@ function refractSlope(slope: number) {
   return Math.tan(theta1 - theta2)
 }
 
-function distanceToRoundedRectEdge(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number,
-) {
-  const hr = Math.min(r, Math.min(w, h) / 2)
-  const hw = w / 2 - hr
-  const hh = h / 2 - hr
-  const ax = Math.abs(x - w / 2) - hw
-  const ay = Math.abs(y - h / 2) - hh
-
-  const outsidePart = Math.hypot(Math.max(ax, 0), Math.max(ay, 0))
-  const insidePart = Math.min(Math.max(ax, ay), 0)
-
-  return -(insidePart + outsidePart - hr)
-}
-
-function normalFromRoundedRect(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-) {
-  const dx = Math.min(x, w - 1 - x)
-  const dy = Math.min(y, h - 1 - y)
-
-  const p = 4
-  const wsum = Math.pow(dx, p) + Math.pow(dy, p)
-
-  let nx: number
-  let ny: number
-
-  if (wsum > 1e-10) {
-    nx = (x > w / 2 ? 1 : -1) * (Math.pow(dy, p) / wsum)
-    ny = (y > h / 2 ? 1 : -1) * (Math.pow(dx, p) / wsum)
-  } else {
-    nx = x > w / 2 ? 1 : -1
-    ny = y > h / 2 ? 1 : -1
-  }
-
-  const len = Math.hypot(nx, ny)
-  if (len < 1e-10) return { x: 0, y: -1 }
-
-  return { x: nx / len, y: ny / len }
-}
-
 function canvasToUrl(canvas: HTMLCanvasElement) {
   return canvas.toDataURL('image/png')
 }
@@ -199,23 +212,30 @@ function buildMaps() {
     x: Math.cos((props.glareAngle * Math.PI) / 180),
     y: Math.sin((props.glareAngle * Math.PI) / 180),
   }
+  const edgeBand = Math.max(
+    1,
+    Math.min(props.bezel, Math.min(w, h) * 0.28),
+  )
 
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
       const dist = distanceToRoundedRectEdge(x, y, w, h, resolvedRadius.value)
-      const t = clamp(dist / props.bezel)
+      const t = clamp(dist / edgeBand)
 
       let vx = 0
       let vy = 0
       let spec = 0
 
-      if (dist >= 0 && dist < props.bezel) {
-        const n = normalFromRoundedRect(x, y, w, h)
+      if (dist >= 0 && dist < edgeBand) {
+        const n = normalFromRoundedRect(x, y, w, h, resolvedRadius.value)
         const slope = derivative(t)
         const bend = refractSlope(slope)
 
         const amount =
-          bend * props.thickness * (1 - t) * props.refraction
+          bend *
+          props.thickness *
+          smootherStep(1 - t) *
+          props.refraction
 
         vx = -n.x * amount
         vy = -n.y * amount
@@ -226,6 +246,19 @@ function buildMaps() {
         spec = Math.pow(facing, 18) * props.specularOpacity
       }
 
+      if (props.magnification !== 0 && dist >= 0) {
+        const lens = magnificationVector(
+          x,
+          y,
+          w,
+          h,
+          props.magnification,
+          props.magnificationFocus,
+        )
+        vx += lens.x
+        vy += lens.y
+      }
+
       vectors.push([vx, vy])
 
       const hi = (y * w + x) * 4
@@ -238,6 +271,10 @@ function buildMaps() {
     }
   }
 
+  max = vectors.reduce((currentMax, [vx, vy]) => {
+    return Math.max(currentMax, Math.abs(vx), Math.abs(vy))
+  }, 1)
+
   vectors.forEach(([vx, vy], index) => {
     const i = index * 4
 
@@ -375,6 +412,8 @@ watch(
     props.bezel,
     props.thickness,
     props.refraction,
+    props.magnification,
+    props.magnificationFocus,
     props.surface,
     props.specularOpacity,
     props.glareAngle,

package/src/shape.test.ts

@@ -0,0 +1,54 @@
+import { strict as assert } from 'node:assert'
+import { normalFromRoundedRect } from './shape'
+
+function closeTo(actual: number, expected: number, tolerance = 0.001) {
+  assert.ok(
+    Math.abs(actual - expected) <= tolerance,
+    `Expected ${actual} to be within ${tolerance} of ${expected}`,
+  )
+}
+
+function assertUnitNormal(point: [number, number]) {
+  const normal = normalFromRoundedRect(point[0], point[1], 200, 120, 40)
+  const length = Math.hypot(normal.x, normal.y)
+
+  closeTo(length, 1)
+}
+
+function dot(a: [number, number], b: [number, number]) {
+  return a[0] * b[0] + a[1] * b[1]
+}
+
+function normalAt(point: [number, number]): [number, number] {
+  const normal = normalFromRoundedRect(point[0], point[1], 200, 120, 40)
+  return [normal.x, normal.y]
+}
+
+assertUnitNormal([20, 30])
+assertUnitNormal([180, 30])
+assertUnitNormal([20, 90])
+assertUnitNormal([180, 90])
+
+const topLeft = normalAt([20, 30])
+const topRight = normalAt([180, 30])
+const bottomLeft = normalAt([20, 90])
+const bottomRight = normalAt([180, 90])
+
+closeTo(topLeft[0], -topRight[0])
+closeTo(topLeft[1], topRight[1])
+closeTo(topLeft[0], bottomLeft[0])
+closeTo(topLeft[1], -bottomLeft[1])
+closeTo(topLeft[0], -bottomRight[0])
+closeTo(topLeft[1], -bottomRight[1])
+
+assert.ok(
+  dot(normalAt([39, 10]), normalAt([40, 10])) > 0.99,
+  'Expected top edge to top-right corner transition to be smooth',
+)
+
+assert.ok(
+  dot(normalAt([39, 10]), normalAt([41, 10])) > 0.98,
+  'Expected rounded corner seam to remain visually continuous',
+)
+
+console.log('shape geometry tests passed')

package/src/shape.ts

@@ -0,0 +1,42 @@
+export interface Point {
+  x: number
+  y: number
+}
+
+export function distanceToRoundedRectEdge(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+) {
+  const hr = Math.min(r, Math.min(w, h) / 2)
+  const hw = w / 2 - hr
+  const hh = h / 2 - hr
+  const ax = Math.abs(x - w / 2) - hw
+  const ay = Math.abs(y - h / 2) - hh
+
+  const outsidePart = Math.hypot(Math.max(ax, 0), Math.max(ay, 0))
+  const insidePart = Math.min(Math.max(ax, ay), 0)
+
+  return -(insidePart + outsidePart - hr)
+}
+
+export function normalFromRoundedRect(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+): Point {
+  const delta = 1.5
+  const nx = distanceToRoundedRectEdge(x - delta, y, w, h, r)
+    - distanceToRoundedRectEdge(x + delta, y, w, h, r)
+  const ny = distanceToRoundedRectEdge(x, y - delta, w, h, r)
+    - distanceToRoundedRectEdge(x, y + delta, w, h, r)
+
+  const len = Math.hypot(nx, ny)
+  if (len < 1e-10) return { x: 0, y: -1 }
+
+  return { x: nx / len, y: ny / len }
+}

package/src/surfaces.ts

@@ -0,0 +1,13 @@
+import type { Surface } from './types'
+
+export const surfaceOptions = [
+  'convex',
+  'concave',
+  'lip',
+  'bowl',
+  'bevel',
+  'saddle',
+  'ripple',
+  'noise',
+  'asymmetric',
+] as const satisfies readonly Surface[]

package/src/types.ts

@@ -1 +1,10 @@
-export type Surface = 'convex' | 'concave' | 'lip'
+export type Surface =
+  | 'convex'
+  | 'concave'
+  | 'lip'
+  | 'bowl'
+  | 'bevel'
+  | 'saddle'
+  | 'ripple'
+  | 'noise'
+  | 'asymmetric'