liqvued 0.1.1 → 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
@@ -53,25 +53,35 @@ import { Liqvued } from 'liqvued'
 
 ## Props
 
-| Prop            | Type                | Default    | Description                                                                     |
-|-----------------|---------------------|------------|---------------------------------------------------------------------------------|
-| radius          | number              | 32         | Corner radius in pixels                                                         |
-| bezel           | number              | 22         | Width of the displacement bezel in pixels                                       |
-| thickness       | number              | 42         | Maximum displacement magnitude in pixels                                        |
-| refraction      | number              | 1          | Refraction index multiplier                                                     |
-| 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                                               |
-| glareAngle      | number              | -60        | Light source angle in degrees for specular highlight                            |
-| glassBackground | string              | —          | Glass panel background color (auto-derived from `asProps.color` when available) |
-| as              | string \| Component | `'div'`    | HTML tag or Vue component to render as                                          |
-| asProps         | object              | `{}`       | Props passed to the rendered element/component                                  |
+| Prop            | Type                | Default    | Description                                                                            |
+|-----------------|---------------------|------------|----------------------------------------------------------------------------------------|
+| radius          | number              | 32         | Corner radius in pixels                                                                |
+| borderRadius    | string              | —          | Per-corner border-radius CSS value (e.g. `"10px 20px 10px 20px"`); overrides `radius`  |
+| 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                                                      |
+| glareAngle      | number              | -60        | Light source angle in degrees for specular highlight                                   |
+| glassBackground | string              | —          | Glass panel background color (auto-derived from `asProps.color` when available)        |
+| fallbackOnly    | boolean             | `false`    | When `true`, disables the SVG displacement effect and uses only CSS blur               |
+| as              | string \| Component | `'div'`    | HTML tag or Vue component to render as (rendered as a child of the glass root)         |
+| asProps         | object              | `{}`       | Props passed to the rendered element/component                                         |
 
 ### Surface Types
 
 - `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
 
@@ -96,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-2c1a4b58]{isolation:isolate;position:relative;overflow:hidden}.liquid-glass__svg[data-v-2c1a4b58]{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-2c1a4b58]{-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,35 +1,56 @@
-import { computed as R, createBlock as le, createCommentVNode as ue, createElementBlock as ce, createElementVNode as w, defineComponent as ie, inject as de, mergeProps as fe, nextTick as K, onBeforeUnmount as he, onMounted as pe, openBlock as Q, provide as ve, ref as M, renderSlot as ge, resolveDynamicComponent as me, unref as be, watch as Me, withCtx as _e } from "vue";
-var ye = {
+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"
-}, xe = [
+}, $e = [
   "href",
   "width",
   "height"
-], ke = ["scale"], we = [
+], Ce = ["scale"], qe = [
   "href",
   "width",
   "height"
-], Ie = /* @__PURE__ */ ie({
+], Pe = /* @__PURE__ */ pe({
   __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: 0.82 },
     blur: { default: 0.4 },
     surface: { default: "convex" },
     specularOpacity: { default: 0.45 },
     glareAngle: { default: -60 },
-    glassBackground: { default: void 0 }
+    glassBackground: { default: void 0 },
+    fallbackOnly: {
+      type: Boolean,
+      default: !1
+    }
   },
-  setup(p) {
-    const a = p, v = M(null), _ = M(1), y = M(1), F = M(""), U = M(""), z = M(1), x = CSS.supports?.("backdrop-filter", "url(#x)") && /Chrome/.test(navigator.userAgent), O = `${`lg-${Math.random().toString(36).slice(2)}`}-filter`, T = de("_liqvued", !1);
-    ve("_liqvued", !0);
-    const k = M(!1), A = {
+  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,
@@ -39,91 +60,107 @@ var ye = {
       circle: 9999,
       shaped: 16
     };
-    function W() {
-      return v.value ? v.value instanceof Element ? v.value : v.value.$el ?? null : null;
+    function j() {
+      return s.value;
     }
-    function f(e, t = 0, n = 1) {
+    function i(e, t = 0, n = 1) {
       return Math.max(t, Math.min(n, e));
     }
-    function X(e) {
-      return e = f(e), e * e * e * (e * (e * 6 - 15) + 10);
-    }
-    function I(e) {
-      return Math.pow(1 - Math.pow(1 - f(e), 4), 1 / 4);
-    }
-    function G(e) {
-      if (a.surface === "concave") return 1 - I(e);
-      if (a.surface === "lip") {
-        const t = X(e);
-        return I(e) * (1 - t) + (1 - I(e)) * t;
-      }
-      return I(e);
+    function B(e) {
+      return e = i(e), e * e * e * (e * (e * 6 - 15) + 10);
     }
-    function Y(e) {
-      return (G(e + 1e-3) - G(e - 1e-3)) / (2 * 1e-3);
+    function P(e) {
+      return Math.pow(1 - Math.pow(1 - i(e), 4), 1 / 4);
     }
-    function Z(e) {
-      const s = Math.atan(e), r = 1 / 1.5 * Math.sin(s), g = Math.asin(f(r, -1, 1));
-      return Math.tan(s - g);
+    function te(e, t, n) {
+      return i(e + Math.sin(i(e) * Math.PI * t) * n);
     }
-    function ee(e, t, n, s, r) {
-      const g = f(e, r, n - r), h = f(t, r, s - r), o = e - g, l = t - h, c = Math.hypot(o, l), m = Math.min(e, t, n - e, s - t);
-      return o !== 0 && l !== 0 ? r - c : m;
+    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 te(e, t, n, s, r) {
-      const g = f(e, r, n - r), h = f(t, r, s - r);
-      let o = e - g, l = t - h;
-      if (o === 0 && l === 0) {
-        const m = e, i = n - e, d = t, b = s - t, u = Math.min(m, i, d, b);
-        u === m ? o = -1 : u === i ? o = 1 : u === d ? l = -1 : l = 1;
-      }
-      const c = Math.hypot(o, l) || 1;
+    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: o / c,
-        y: l / c
+        x: (e - v) / p - (e - v),
+        y: (t - g) / p - (t - g)
       };
     }
-    function N(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 q() {
-      const e = Math.max(1, Math.round(_.value)), t = Math.max(1, Math.round(y.value)), n = document.createElement("canvas");
+    function T() {
+      if (a.fallbackOnly) return;
+      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 s = document.createElement("canvas");
-      s.width = e, s.height = t;
-      const r = n.getContext("2d"), g = s.getContext("2d"), h = r.createImageData(e, t), o = g.createImageData(e, t), l = [];
-      let c = 1;
-      const m = {
+      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 i = 0; i < t; i++) for (let d = 0; d < e; d++) {
-        const b = ee(d, i, e, t, S.value), u = f(b / a.bezel);
-        let L = 0, P = 0, H = 0;
-        if (b >= 0 && b < a.bezel) {
-          const C = te(d, i, e, t, S.value), J = Z(Y(u)) * a.thickness * (1 - u) * a.refraction;
-          L = -C.x * J, P = -C.y * J, c = Math.max(c, Math.abs(L), Math.abs(P));
-          const se = f(C.x * m.x + C.y * m.y, 0, 1);
-          H = Math.pow(se, 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;
         }
-        l.push([L, P]);
-        const B = (i * e + d) * 4, oe = Math.round(H * 255);
-        o.data[B] = 255, o.data[B + 1] = 255, o.data[B + 2] = 255, o.data[B + 3] = oe;
+        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;
       }
-      l.forEach(([i, d], b) => {
-        const u = b * 4;
-        h.data[u] = Math.round(128 + i / c * 127), h.data[u + 1] = Math.round(128 + d / c * 127), h.data[u + 2] = 128, h.data[u + 3] = 255;
-      }), r.putImageData(h, 0, 0), g.putImageData(o, 0, 0), F.value = N(n), U.value = N(s), z.value = c;
+      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 V() {
-      const e = W();
-      e && (_.value = Math.max(1, e.offsetWidth), y.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 j = x ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.22)", S = 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 A ? A[e.rounded] : a.radius;
-    }), ae = /* @__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",
@@ -134,107 +171,116 @@ var ye = {
       "surface",
       "background"
     ]);
-    function ne(e, t) {
-      if (ae.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})`) : j;
+      return e.startsWith("rgb") ? e.replace("rgb(", "rgba(").replace(")", `, ${t})`) : Q;
     }
-    const D = R(() => {
+    const A = C(() => {
       if (a.glassBackground !== void 0) return a.glassBackground;
       const e = a.asProps;
-      return typeof e.color == "string" ? ne(e.color, 0.6) : j;
-    }), $ = R(() => x ? `url(#${O}) blur(${a.blur}px)` : "blur(12px)"), re = R(() => ({
-      borderRadius: `${S.value}px`,
-      ...D.value !== void 0 ? { backgroundColor: D.value } : {},
-      ...D.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(", ") } : {},
-      ...k.value && !T ? {
-        backdropFilter: $.value,
-        WebkitBackdropFilter: $.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
       } : {},
-      ...k.value && T && !x ? {
-        backdropFilter: $.value,
-        WebkitBackdropFilter: $.value
+      ...I.value && N && !c ? {
+        backdropFilter: O.value,
+        WebkitBackdropFilter: O.value
       } : {}
     }));
-    let E = null;
-    return pe(async () => {
-      if (await K(), x) {
-        V(), q(), await K(), k.value = !0, E = new ResizeObserver(() => {
-          V(), q(), k.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 && E.observe(e);
-      } else k.value = !0;
-    }), Me(() => [
-      S.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.glareAngle,
+      a.fallbackOnly
     ], () => {
-      x && q(), k.value = !0;
-    }), he(() => {
-      E?.disconnect();
-    }), (e, t) => (Q(), le(me(p.as), fe({
+      c && T(), I.value = !0;
+    }), be(() => {
+      G?.disconnect();
+    }), (e, t) => (W(), Z("div", {
       ref_key: "root",
-      ref: v,
-      class: "liquid-glass"
-    }, p.asProps, { style: re.value }), {
-      default: _e(() => [be(x) ? (Q(), ce("svg", ye, [w("defs", null, [w("filter", {
-        id: O,
-        "color-interpolation-filters": "sRGB",
-        filterUnits: "userSpaceOnUse",
+      ref: s,
+      class: "liquid-glass",
+      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",
+      y: "0",
+      width: "10000",
+      height: "10000"
+    }, [
+      k("feImage", {
+        href: b.value,
+        x: "0",
+        y: "0",
+        width: o.value,
+        height: l.value,
+        result: "displacement_map"
+      }, null, 8, $e),
+      t[0] || (t[0] = k("feGaussianBlur", {
+        in: "displacement_map",
+        stdDeviation: "2",
+        result: "smooth_disp"
+      }, null, -1)),
+      k("feDisplacementMap", {
+        in: "SourceGraphic",
+        in2: "smooth_disp",
+        scale: x.value,
+        xChannelSelector: "R",
+        yChannelSelector: "G",
+        result: "refracted"
+      }, null, 8, Ce),
+      k("feImage", {
+        href: y.value,
         x: "0",
         y: "0",
-        width: "10000",
-        height: "10000"
-      }, [
-        w("feImage", {
-          href: F.value,
-          x: "0",
-          y: "0",
-          width: _.value,
-          height: y.value,
-          result: "displacement_map"
-        }, null, 8, xe),
-        w("feDisplacementMap", {
-          in: "SourceGraphic",
-          in2: "displacement_map",
-          scale: z.value,
-          xChannelSelector: "R",
-          yChannelSelector: "G",
-          result: "refracted"
-        }, null, 8, ke),
-        w("feImage", {
-          href: U.value,
-          x: "0",
-          y: "0",
-          width: _.value,
-          height: y.value,
-          result: "specular"
-        }, null, 8, we),
-        t[0] || (t[0] = w("feBlend", {
-          in: "refracted",
-          in2: "specular",
-          mode: "screen"
-        }, null, -1))
-      ])])])) : ue("", !0), ge(e.$slots, "default", {}, void 0, !0)]),
+        width: o.value,
+        height: l.value,
+        result: "specular"
+      }, null, 8, qe),
+      t[1] || (t[1] = k("feBlend", {
+        in: "refracted",
+        in2: "specular",
+        mode: "screen"
+      }, null, -1))
+    ])])])) : fe("", !0), (W(), he(ke(r.as), me(ve(r.asProps)), {
+      default: Re(() => [_e(e.$slots, "default", {}, void 0, !0)]),
       _: 3
-    }, 16, ["style"]));
+    }, 16))], 4));
   }
-}), Se = (p, a) => {
-  const v = p.__vccOpts || p;
-  for (const [_, y] of a) v[_] = y;
-  return v;
-}, $e = /* @__PURE__ */ Se(Ie, [["__scopeId", "data-v-2c1a4b58"]]), Ce = { install(p) {
-  p.component("Liqvued", $e);
+}), 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 {
-  $e as Liqvued,
-  Ce as default
+  Oe as Liqvued,
+  De as default
 };

package/dist/liqvued.umd.js

@@ -1 +1 @@
-(function(g,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(g=typeof globalThis<"u"?globalThis:g||self,t(g.Liqvued={},g.Vue))})(this,function(g,t){Object.defineProperties(g,{__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},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}},setup(m){const n=m,v=(0,t.ref)(null),y=(0,t.ref)(1),k=(0,t.ref)(1),P=(0,t.ref)(""),V=(0,t.ref)(""),N=(0,t.ref)(1),x=CSS.supports?.("backdrop-filter","url(#x)")&&/Chrome/.test(navigator.userAgent),F=`${`lg-${Math.random().toString(36).slice(2)}`}-filter`,O=(0,t.inject)("_liqvued",!1);(0,t.provide)("_liqvued",!0);const w=(0,t.ref)(!1),U={0:0,sm:4,md:8,lg:12,xl:16,pill:9999,circle:9999,shaped:16};function z(){return v.value?v.value instanceof Element?v.value:v.value.$el??null:null}function h(e,a=0,r=1){return Math.max(a,Math.min(r,e))}function ae(e){return e=h(e),e*e*e*(e*(e*6-15)+10)}function S(e){return Math.pow(1-Math.pow(1-h(e),4),1/4)}function A(e){if(n.surface==="concave")return 1-S(e);if(n.surface==="lip"){const a=ae(e);return S(e)*(1-a)+(1-S(e))*a}return S(e)}function ne(e){return(A(e+.001)-A(e-.001))/(2*.001)}function re(e){const s=Math.atan(e),o=1/1.5*Math.sin(s),b=Math.asin(h(o,-1,1));return Math.tan(s-b)}function oe(e,a,r,s,o){const b=h(e,o,r-o),p=h(a,o,s-o),l=e-b,c=a-p,u=Math.hypot(l,c),M=Math.min(e,a,r-e,s-a);return l!==0&&c!==0?o-u:M}function le(e,a,r,s,o){const b=h(e,o,r-o),p=h(a,o,s-o);let l=e-b,c=a-p;if(l===0&&c===0){const M=e,d=r-e,f=a,_=s-a,i=Math.min(M,d,f,_);i===M?l=-1:i===d?l=1:i===f?c=-1:c=1}const u=Math.hypot(l,c)||1;return{x:l/u,y:c/u}}function W(e){return e.toDataURL("image/png")}function E(){const e=Math.max(1,Math.round(y.value)),a=Math.max(1,Math.round(k.value)),r=document.createElement("canvas");r.width=e,r.height=a;const s=document.createElement("canvas");s.width=e,s.height=a;const o=r.getContext("2d"),b=s.getContext("2d"),p=o.createImageData(e,a),l=b.createImageData(e,a),c=[];let u=1;const M={x:Math.cos(n.glareAngle*Math.PI/180),y:Math.sin(n.glareAngle*Math.PI/180)};for(let d=0;d<a;d++)for(let f=0;f<e;f++){const _=oe(f,d,e,a,I.value),i=h(_/n.bezel);let T=0,D=0,H=0;if(_>=0&&_<n.bezel){const q=le(f,d,e,a,I.value),J=re(ne(i))*n.thickness*(1-i)*n.refraction;T=-q.x*J,D=-q.y*J,u=Math.max(u,Math.abs(T),Math.abs(D));const de=h(q.x*M.x+q.y*M.y,0,1);H=Math.pow(de,18)*n.specularOpacity}c.push([T,D]);const $=(d*e+f)*4,ue=Math.round(H*255);l.data[$]=255,l.data[$+1]=255,l.data[$+2]=255,l.data[$+3]=ue}c.forEach(([d,f],_)=>{const i=_*4;p.data[i]=Math.round(128+d/u*127),p.data[i+1]=Math.round(128+f/u*127),p.data[i+2]=128,p.data[i+3]=255}),o.putImageData(p,0,0),b.putImageData(l,0,0),P.value=W(r),V.value=W(s),N.value=u}function j(){const e=z();e&&(y.value=Math.max(1,e.offsetWidth),k.value=Math.max(1,e.offsetHeight))}const G=x?"rgba(255, 255, 255, 0.08)":"rgba(255, 255, 255, 0.22)",I=(0,t.computed)(()=>{if(n.radius!==32)return n.radius;const e=n.asProps;return typeof e.rounded=="string"&&e.rounded in U?U[e.rounded]:n.radius}),se=new Set(["primary","secondary","accent","info","warning","error","success","surface","background"]);function ce(e,a){if(se.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})`):G}const C=(0,t.computed)(()=>{if(n.glassBackground!==void 0)return n.glassBackground;const e=n.asProps;return typeof e.color=="string"?ce(e.color,.6):G}),B=(0,t.computed)(()=>x?`url(#${F}) blur(${n.blur}px)`:"blur(12px)"),ie=(0,t.computed)(()=>({borderRadius:`${I.value}px`,...C.value!==void 0?{backgroundColor:C.value}:{},...C.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(", ")}:{},...w.value&&!O?{backdropFilter:B.value,WebkitBackdropFilter:B.value}:{},...w.value&&O&&!x?{backdropFilter:B.value,WebkitBackdropFilter:B.value}:{}}));let R=null;return(0,t.onMounted)(async()=>{if(await(0,t.nextTick)(),x){j(),E(),await(0,t.nextTick)(),w.value=!0,R=new ResizeObserver(()=>{j(),E(),w.value=!0});const e=z();e&&R.observe(e)}else w.value=!0}),(0,t.watch)(()=>[I.value,n.bezel,n.thickness,n.refraction,n.surface,n.specularOpacity,n.glareAngle],()=>{x&&E(),w.value=!0}),(0,t.onBeforeUnmount)(()=>{R?.disconnect()}),(e,a)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(m.as),(0,t.mergeProps)({ref_key:"root",ref:v,class:"liquid-glass"},m.asProps,{style:ie.value}),{default:(0,t.withCtx)(()=>[(0,t.unref)(x)?((0,t.openBlock)(),(0,t.createElementBlock)("svg",K,[(0,t.createElementVNode)("defs",null,[(0,t.createElementVNode)("filter",{id:F,"color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse",x:"0",y:"0",width:"10000",height:"10000"},[(0,t.createElementVNode)("feImage",{href:P.value,x:"0",y:"0",width:y.value,height:k.value,result:"displacement_map"},null,8,Q),(0,t.createElementVNode)("feDisplacementMap",{in:"SourceGraphic",in2:"displacement_map",scale:N.value,xChannelSelector:"R",yChannelSelector:"G",result:"refracted"},null,8,X),(0,t.createElementVNode)("feImage",{href:V.value,x:"0",y:"0",width:y.value,height:k.value,result:"specular"},null,8,Y),a[0]||(a[0]=(0,t.createElementVNode)("feBlend",{in:"refracted",in2:"specular",mode:"screen"},null,-1))])])])):(0,t.createCommentVNode)("",!0),(0,t.renderSlot)(e.$slots,"default",{},void 0,!0)]),_:3},16,["style"]))}}),ee=(m,n)=>{const v=m.__vccOpts||m;for(const[y,k]of n)v[y]=k;return v},L=ee(Z,[["__scopeId","data-v-2c1a4b58"]]),te={install(m){m.component("Liqvued",L)}};g.Liqvued=L,g.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.1",
+  "version": "0.2.0",
   "description": "Liquid-glass for Vue",
   "exports": {
     ".": {

package/src/Liqvued.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import {
   type Component,
-  type ComponentPublicInstance,
   computed,
   inject,
   nextTick,
@@ -11,27 +10,35 @@ import {
   ref,
   watch,
 } from 'vue'
+import { distanceToRoundedRectEdge, normalFromRoundedRect } from './shape'
 import type { Surface } from './types'
 
 const props = withDefaults(defineProps<{
   as?: string | Component
   asProps?: object
   radius?: number
+  borderRadius?: string
   bezel?: number
   thickness?: number
   refraction?: number
+  magnification?: number
+  magnificationFocus?: number
   blur?: number
   surface?: Surface
   specularOpacity?: number
   glareAngle?: number
   glassBackground?: string
+  fallbackOnly?: boolean
 }>(), {
   as: 'div',
   asProps: () => ({}),
+  fallbackOnly: false,
   radius: 32,
   bezel: 22,
   thickness: 42,
   refraction: 1,
+  magnification: 0,
+  magnificationFocus: 0.82,
   blur: 0.4,
   surface: 'convex',
   specularOpacity: 0.45,
@@ -39,7 +46,7 @@ const props = withDefaults(defineProps<{
   glassBackground: undefined,
 })
 
-const root = ref<HTMLElement | ComponentPublicInstance | null>(null)
+const root = ref<HTMLElement | null>(null)
 
 const width = ref(1)
 const height = ref(1)
@@ -47,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)
 
@@ -54,6 +63,11 @@ const id = `lg-${Math.random().toString(36).slice(2)}`
 const filterId = `${id}-filter`
 const isNested = inject('_liqvued', false)
 provide('_liqvued', true)
+
+if (import.meta.env.DEV && typeof props.as !== 'string') {
+  console.warn('[Liqvued] `as` prop should be a string (HTML tag name). For Vue components, use Liqvued as a wrapper instead of `as`.')
+}
+
 const glassReady = ref(false)
 
 const roundedMap: Record<string, number> = {
@@ -68,9 +82,7 @@ const roundedMap: Record<string, number> = {
 }
 
 function getRootEl(): HTMLElement | null {
-  if (!root.value) return null
-  if (root.value instanceof Element) return root.value as HTMLElement
-  return (root.value as ComponentPublicInstance).$el ?? null
+  return root.value
 }
 
 function clamp(v: number, min = 0, max = 1) {
@@ -86,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) {
@@ -113,68 +179,15 @@ function refractSlope(slope: number) {
   return Math.tan(theta1 - theta2)
 }
 
-function distanceToRoundedRectEdge(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number,
-) {
-  const cx = clamp(x, r, w - r)
-  const cy = clamp(y, r, h - r)
-
-  const dx = x - cx
-  const dy = y - cy
-
-  const cornerDistance = Math.hypot(dx, dy)
-  const edgeDistance = Math.min(x, y, w - x, h - y)
-
-  if (dx !== 0 && dy !== 0) {
-    return r - cornerDistance
-  }
-
-  return edgeDistance
-}
-
-function normalFromRoundedRect(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number,
-) {
-  const cx = clamp(x, r, w - r)
-  const cy = clamp(y, r, h - r)
-
-  let nx = x - cx
-  let ny = y - cy
-
-  if (nx === 0 && ny === 0) {
-    const left = x
-    const right = w - x
-    const top = y
-    const bottom = h - y
-    const m = Math.min(left, right, top, bottom)
-
-    if (m === left) nx = -1
-    else if (m === right) nx = 1
-    else if (m === top) ny = -1
-    else ny = 1
-  }
-
-  const len = Math.hypot(nx, ny) || 1
-
-  return {
-    x: nx / len,
-    y: ny / len,
-  }
-}
-
 function canvasToUrl(canvas: HTMLCanvasElement) {
   return canvas.toDataURL('image/png')
 }
 
 function buildMaps() {
+  if (props.fallbackOnly) {
+    return
+  }
+
   const w = Math.max(1, Math.round(width.value))
   const h = Math.max(1, Math.round(height.value))
 
@@ -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) {
+      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
 
@@ -276,6 +313,10 @@ const resolvedRadius = computed(() => {
   return props.radius
 })
 
+const borderRadios = computed(() => {
+  return props.borderRadius || `${resolvedRadius.value}px`
+})
+
 const vuetifyThemeColors = new Set([
   'primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success',
   'surface', 'background',
@@ -308,14 +349,14 @@ const glassBgValue = computed(() => {
 })
 
 const backdropFilter = computed(() => {
-  if (supportsLiquidGlass) {
-    return `url(#${filterId}) blur(${props.blur}px)`
+  if (props.fallbackOnly || !supportsLiquidGlass) {
+    return 'blur(12px)'
   }
-  return 'blur(12px)'
+  return `url(#${filterId}) blur(${props.blur}px)`
 })
 
 const rootStyle = computed(() => ({
-  borderRadius: `${resolvedRadius.value}px`,
+  borderRadius: `${borderRadios.value}`,
   ...(glassBgValue.value !== undefined
     ? { backgroundColor: glassBgValue.value }
     : {}),
@@ -371,9 +412,12 @@ watch(
     props.bezel,
     props.thickness,
     props.refraction,
+    props.magnification,
+    props.magnificationFocus,
     props.surface,
     props.specularOpacity,
     props.glareAngle,
+    props.fallbackOnly,
   ],
   () => {
     if (supportsLiquidGlass) {
@@ -386,15 +430,12 @@ watch(
 onBeforeUnmount(() => {
   ro?.disconnect()
 })
-
 </script>
 
 <template>
-  <component
-    :is="as"
+  <div
     ref="root"
     class="liquid-glass"
-    v-bind="asProps"
     :style="rootStyle"
   >
     <svg
@@ -421,9 +462,15 @@ onBeforeUnmount(() => {
             result="displacement_map"
           />
 
+          <feGaussianBlur
+            in="displacement_map"
+            stdDeviation="2"
+            result="smooth_disp"
+          />
+
           <feDisplacementMap
             in="SourceGraphic"
-            in2="displacement_map"
+            in2="smooth_disp"
             :scale="scale"
             xChannelSelector="R"
             yChannelSelector="G"
@@ -444,8 +491,13 @@ onBeforeUnmount(() => {
       </defs>
     </svg>
 
-    <slot />
-  </component>
+    <component
+      :is="as"
+      v-bind="asProps"
+    >
+      <slot />
+    </component>
+  </div>
 </template>
 
 <style scoped>

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'