@marcosdemik/liquidglass 1.1.1 → 2.0.1

package/README.md

@@ -4,7 +4,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/@marcosdemik/liquidglass.svg)](https://www.npmjs.com/package/@marcosdemik/liquidglass)
 [![license](https://img.shields.io/npm/l/@marcosdemik/liquidglass.svg)](https://github.com/MarcosDemik/liquidglass/blob/main/LICENSE)
 
-A React component that creates a **Liquid Glass** UI effect - glassmorphism with real-time refraction, chromatic aberration, and smooth GSAP animations.
+A React component that creates a **Liquid Glass** UI effect with real-time refraction, specular highlights, and smooth GSAP animations.
 
 Built with SVG filters and WebGL displacement maps.
 
@@ -32,7 +32,7 @@ import { LiquidGlassButton } from "@marcosdemik/liquidglass";
 
 function App() {
   return (
-    <LiquidGlassButton width={320} height={60} radius={60} chroma={3}>
+    <LiquidGlassButton width={320} height={60} radius={60}>
       Click me
     </LiquidGlassButton>
   );
@@ -58,30 +58,28 @@ The component includes a `"use client"` directive, so it works out of the box wi
 | `width` | `number` | `300` | Button width in pixels |
 | `height` | `number` | `56` | Button height in pixels |
 | `radius` | `number` | `60` | Border radius in pixels |
-| `glassColor` | `string` | `"rgba(255,255,255,0.05)"` | Background tint color of the glass |
+| `glassColor` | `string` | `"transparent"` | Background tint color of the glass |
 
 ### Glass Effect
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `displacement` | `number` | `35` | How much the background refracts (feDisplacementMap scale) |
-| `blur` | `number` | `2` | Gaussian blur applied to the background |
-| `chroma` | `number` | `3` | Chromatic aberration strength (RGB channel offset) |
-| `saturation` | `number` | `1.2` | Saturation boost on the final result (1 = normal) |
-| `distortion` | `number` | `15` | Normal map distortion scale in the shader |
-| `intensity` | `number` | `1.0` | Refraction intensity at the glass edge |
-| `edgeSize` | `number` | `40` | Thickness of the glass edge refraction zone |
-| `smoothness` | `number` | `1.0` | Blur on the displacement map (softens transitions) |
+| `displacement` | `number` | `55` | How much the background refracts (feDisplacementMap scale) |
+| `blur` | `number` | `1` | Gaussian blur applied to the background |
+| `saturation` | `number` | `150` | Color saturation of the refracted result (feColorMatrix saturate value) |
+| `brightness` | `number` | `1.1` | Brightness boost on the backdrop-filter (1 = normal) |
+| `intensity` | `number` | `0.7` | Refraction intensity at the glass edge (0-1) |
+| `edgeSize` | `number` | `30` | Thickness of the glass edge refraction zone in pixels |
+| `specularWidth` | `number` | `0.02` | Specular rim thickness relative to the smallest dimension (0-1) |
 
 ### Hover Animation
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `hoverScale` | `number` | `1.05` | Scale multiplier on hover |
-| `hoverDisplacement` | `number` | `65` | Displacement scale on hover |
+| `hoverScale` | `number` | `1.08` | Scale multiplier on hover |
+| `hoverDisplacement` | `number` | `125` | Displacement scale on hover |
 | `hoverBlur` | `number` | `4` | Blur amount on hover |
-| `hoverChromaMultiplier` | `number` | `2.5` | Multiplier applied to `chroma` on hover |
-| `hoverDuration` | `number` | `0.4` | Duration of hover animation in seconds |
+| `hoverDuration` | `number` | `0.25` | Duration of hover animation in seconds |
 | `disableAnimation` | `boolean` | `false` | Disable all GSAP animations |
 
 ### Standard HTML
@@ -112,17 +110,17 @@ All standard `<button>` HTML attributes (`onClick`, `disabled`, `aria-label`, et
 </LiquidGlassButton>
 ```
 
-### High Distortion
+### High Refraction
 
 ```tsx
 <LiquidGlassButton
   width={320}
   height={60}
   radius={60}
-  displacement={60}
-  distortion={30}
-  chroma={8}
-  intensity={2}
+  displacement={100}
+  intensity={1}
+  edgeSize={50}
+  saturation={200}
 >
   Distorted
 </LiquidGlassButton>
@@ -135,11 +133,11 @@ All standard `<button>` HTML attributes (`onClick`, `disabled`, `aria-label`, et
   width={320}
   height={60}
   radius={60}
-  displacement={15}
+  displacement={25}
   blur={1}
-  distortion={5}
-  chroma={1}
-  smoothness={3}
+  intensity={0.4}
+  edgeSize={15}
+  saturation={120}
 >
   Subtle
 </LiquidGlassButton>
@@ -165,11 +163,10 @@ All standard `<button>` HTML attributes (`onClick`, `disabled`, `aria-label`, et
   width={320}
   height={60}
   radius={60}
-  hoverScale={1.1}
-  hoverDisplacement={100}
+  hoverScale={1.12}
+  hoverDisplacement={150}
   hoverBlur={6}
-  hoverChromaMultiplier={4}
-  hoverDuration={0.6}
+  hoverDuration={0.4}
 >
   Strong Hover
 </LiquidGlassButton>
@@ -192,11 +189,27 @@ All standard `<button>` HTML attributes (`onClick`, `disabled`, `aria-label`, et
 
 The effect is built from three layers:
 
-1. **WebGL Displacement Map** - A GLSL fragment shader computes a displacement map from a signed distance field (SDF) of a rounded rectangle. The shader runs on an offscreen canvas and outputs a PNG data URL. The WebGL context is cached as a singleton for performance.
+1. **WebGL Displacement + Specular Maps** - A GLSL fragment shader computes a displacement map and a specular highlight map from a signed distance field (SDF) of a rounded rectangle. 3D surface normals are derived from the SDF to create realistic light refraction at the edges. Both maps are rendered on an offscreen canvas and output as PNG data URLs. The WebGL context is cached as a singleton.
 
-2. **SVG Filter Chain** - The displacement map feeds into an SVG `<filter>` that applies per-channel (R/G/B) `feDisplacementMap` at slightly different scales, producing chromatic aberration. Channels are recombined with `feBlend mode="screen"`.
+2. **SVG Filter Chain** - The displacement map feeds into an SVG `<filter>` with `feDisplacementMap` for background refraction, `feColorMatrix` for saturation control, and `feBlend` to composite the specular highlight layer on top. A `brightness()` function in the backdrop-filter adds a subtle glow.
 
-3. **GSAP Animations** - Pointer events drive GSAP tweens that animate displacement scale, blur, chromatic separation, and button scale. Filter attributes are mutated directly each frame for maximum performance.
+3. **GSAP Animations** - Pointer events drive GSAP tweens that animate displacement scale, blur, and button scale. Filter attributes are mutated directly each frame for maximum performance.
+
+## Migration from v1.x
+
+v2.0.0 replaced the chromatic aberration pipeline with a specular highlight pipeline for a more realistic glass effect. The following props were removed:
+
+- `chroma` - removed (no more chromatic aberration)
+- `distortion` - removed (shader normals are now computed from the SDF)
+- `smoothness` - removed (displacement map blur is no longer needed)
+- `hoverChromaMultiplier` - removed
+
+New props added:
+
+- `brightness` - controls backdrop brightness (default `1.1`)
+- `specularWidth` - controls the specular rim thickness (default `0.02`)
+
+Changed defaults: `displacement` (35 -> 55), `blur` (2 -> 1), `saturation` (1.2 -> 150), `hoverScale` (1.05 -> 1.08), `hoverDisplacement` (65 -> 125), `hoverDuration` (0.4 -> 0.25), `glassColor` ("rgba(255,255,255,0.05)" -> "transparent").
 
 ## Visibility Note
 

package/dist/index.cjs

@@ -81,9 +81,9 @@ var FRAG = `
 precision mediump float;
 uniform vec2 uRes;
 uniform float uRadius;
-uniform float uEdgeSize;
-uniform float uIntensity;
-uniform float uDistortion;
+uniform float uBorderSoftness;
+uniform float uSpecularWidth;
+uniform int uMode; // 0 = displacement, 1 = specular
 
 float sdRoundedBox(vec2 p, vec2 b, float r){
   r = min(r, min(b.x, b.y));
@@ -91,32 +91,36 @@ float sdRoundedBox(vec2 p, vec2 b, float r){
   return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
 }
 
-float getHeight(vec2 p) {
-    vec2 halfSize = uRes * 0.5 - 2.0;
-
-    // Aumenta o tamanho base do box ligeiramente proporcinal ao edge
-    halfSize += uEdgeSize * 0.2;
-
-    float d = sdRoundedBox(p, halfSize, uRadius);
-
-    float borderSoftness = uEdgeSize * uIntensity;
-    d = max(d, -borderSoftness);
-    return smoothstep(0.0, -borderSoftness, d);
+vec3 calcNormal(vec2 p, vec2 b, float r){
+  const float e = 1.0;
+  vec2 h = vec2(e, 0.0);
+  return normalize(vec3(
+    sdRoundedBox(p+h.xy, b, r) - sdRoundedBox(p-h.xy, b, r),
+    sdRoundedBox(p+h.yx, b, r) - sdRoundedBox(p-h.yx, b, r),
+    -e * 2.0
+  ));
 }
 
 void main(){
   vec2 p = gl_FragCoord.xy - uRes * 0.5;
-  p.y = -p.y;
+  vec2 halfSize = uRes * 0.5 - 1.0;
+  float d = sdRoundedBox(p, halfSize, uRadius);
 
-  // --- Displacement Map ---
-  const vec2 e = vec2(1.0, 0.0);
-  float hx = getHeight(p + e.xy) - getHeight(p - e.xy);
-  float hy = getHeight(p + e.yx) - getHeight(p - e.yx);
+  if(d > 0.0){ gl_FragColor = vec4(0.0); return; }
 
-  vec2 normal = vec2(-hx, -hy) * uDistortion;
-  vec2 color = clamp(normal * 0.5 + 0.5, 0.0, 1.0);
-
-  gl_FragColor = vec4(color.x, color.y, 0.5, 1.0);
+  if(uMode == 0){
+    vec3 n = calcNormal(p, halfSize, uRadius);
+    vec3 nc = n * 0.5 + 0.5;
+    float border = smoothstep(-uBorderSoftness, 0.0, d);
+    vec3 flat_ = vec3(0.5, 0.5, 1.0);
+    gl_FragColor = vec4(mix(flat_, nc, border), 1.0);
+  } else {
+    float rim = smoothstep(-uSpecularWidth - 2.0, -uSpecularWidth, d)
+              * (1.0 - smoothstep(-2.0, 0.0, d));
+    float glow = smoothstep(-uBorderSoftness, 0.0, d) * 0.1;
+    float s = clamp(rim + glow, 0.0, 1.0);
+    gl_FragColor = vec4(vec3(s), s);
+  }
 }
 `;
 function compile(gl, type, src) {
@@ -146,33 +150,42 @@ function getGL() {
   _cachedProgram = { gl, program, canvas };
   return _cachedProgram;
 }
-function render(width, height, radius, edgeSize, intensity, distortion) {
+function render(width, height, radius, borderSoftness, specularWidth, mode) {
   const { gl, program, canvas } = getGL();
   canvas.width = width;
   canvas.height = height;
   gl.viewport(0, 0, width, height);
-  gl.clearColor(0.5, 0.5, 0.5, 1);
+  gl.clearColor(0, 0, 0, 0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.useProgram(program);
   gl.uniform2f(gl.getUniformLocation(program, "uRes"), width, height);
   gl.uniform1f(gl.getUniformLocation(program, "uRadius"), radius);
-  gl.uniform1f(gl.getUniformLocation(program, "uEdgeSize"), edgeSize);
-  gl.uniform1f(gl.getUniformLocation(program, "uIntensity"), intensity);
-  gl.uniform1f(gl.getUniformLocation(program, "uDistortion"), distortion);
+  gl.uniform1f(gl.getUniformLocation(program, "uBorderSoftness"), borderSoftness);
+  gl.uniform1f(gl.getUniformLocation(program, "uSpecularWidth"), specularWidth);
+  gl.uniform1i(gl.getUniformLocation(program, "uMode"), mode);
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
   return canvas.toDataURL("image/png");
 }
 function generateGlassMaps(opts) {
-  const { width, height, radius = 60, edgeSize = 40, intensity = 1, distortion = 15 } = opts;
+  const {
+    width,
+    height,
+    radius = 60,
+    edgeSize = 30,
+    intensity = 0.7,
+    specularWidth = 0.02
+  } = opts;
   const r = Math.min(radius, width / 2, height / 2);
+  const borderSoftness = edgeSize * intensity;
+  const specPx = specularWidth * Math.min(width, height);
   return {
-    displacement: render(width, height, r, edgeSize, intensity, distortion)
+    displacement: render(width, height, r, borderSoftness, specPx, 0),
+    specular: render(width, height, r, borderSoftness, specPx, 1)
   };
 }
 
 // src/liquid-glass-button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var PADDING_PCT = 50;
 var LiquidGlassButton = (0, import_react.forwardRef)(
   function LiquidGlassButton2(_a, ref) {
     var _b = _a, {
@@ -182,20 +195,18 @@ var LiquidGlassButton = (0, import_react.forwardRef)(
       width = 300,
       height = 56,
       radius = 60,
-      edgeSize,
-      intensity,
-      smoothness = 1,
-      distortion,
-      chroma = 3,
-      glassColor = "rgba(255,255,255,0.05)",
-      displacement = 35,
-      blur = 2,
-      saturation = 1.2,
-      hoverScale = 1.05,
-      hoverDisplacement = 65,
+      edgeSize = 30,
+      intensity = 0.7,
+      specularWidth = 0.02,
+      displacement = 55,
+      blur = 1,
+      saturation = 150,
+      brightness = 1.1,
+      glassColor = "transparent",
+      hoverScale = 1.08,
+      hoverDisplacement = 125,
       hoverBlur = 4,
-      hoverChromaMultiplier = 2.5,
-      hoverDuration = 0.4,
+      hoverDuration = 0.25,
       disableAnimation = false
     } = _b, props = __objRest(_b, [
       "children",
@@ -206,55 +217,55 @@ var LiquidGlassButton = (0, import_react.forwardRef)(
       "radius",
       "edgeSize",
       "intensity",
-      "smoothness",
-      "distortion",
-      "chroma",
-      "glassColor",
+      "specularWidth",
       "displacement",
       "blur",
       "saturation",
+      "brightness",
+      "glassColor",
       "hoverScale",
       "hoverDisplacement",
       "hoverBlur",
-      "hoverChromaMultiplier",
       "hoverDuration",
       "disableAnimation"
     ]);
     const internalRef = (0, import_react.useRef)(null);
     const buttonRef = ref != null ? ref : internalRef;
+    const displacerRef = (0, import_react.useRef)(null);
     const blurRef = (0, import_react.useRef)(null);
-    const displacerR = (0, import_react.useRef)(null);
-    const displacerG = (0, import_react.useRef)(null);
-    const displacerB = (0, import_react.useRef)(null);
     const filterId = "lg" + (0, import_react.useId)().replace(/:/g, "");
     const [maps, setMaps] = (0, import_react.useState)(null);
     (0, import_react.useEffect)(() => {
       let cancelled = false;
-      const m = generateGlassMaps({ width, height, radius, edgeSize, intensity, distortion });
-      const img = new Image();
-      img.onload = () => {
-        if (!cancelled) setMaps(m);
+      const m = generateGlassMaps({ width, height, radius, edgeSize, intensity, specularWidth });
+      let loaded = 0;
+      const onLoad = () => {
+        loaded++;
+        if (loaded === 2 && !cancelled) setMaps(m);
       };
-      img.src = m.displacement;
+      const img1 = new Image();
+      img1.onload = onLoad;
+      img1.src = m.displacement;
+      const img2 = new Image();
+      img2.onload = onLoad;
+      img2.src = m.specular;
       return () => {
         cancelled = true;
       };
-    }, [width, height, radius, edgeSize, intensity, distortion]);
+    }, [width, height, radius, edgeSize, intensity, specularWidth]);
     (0, import_react.useEffect)(() => {
       const button = buttonRef.current;
-      if (!button || !blurRef.current || disableAnimation) return;
+      const displacer = displacerRef.current;
+      const blurEl = blurRef.current;
+      if (!button || !displacer || !blurEl || disableAnimation) return;
       if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
       const fx = {
         displacement,
-        blur,
-        chroma
+        blur
       };
       const sync = () => {
-        var _a2, _b2, _c, _d;
-        (_a2 = displacerR.current) == null ? void 0 : _a2.setAttribute("scale", (fx.displacement + fx.chroma).toString());
-        (_b2 = displacerG.current) == null ? void 0 : _b2.setAttribute("scale", fx.displacement.toString());
-        (_c = displacerB.current) == null ? void 0 : _c.setAttribute("scale", (fx.displacement - fx.chroma).toString());
-        (_d = blurRef.current) == null ? void 0 : _d.setAttribute("stdDeviation", fx.blur.toString());
+        displacer.setAttribute("scale", fx.displacement.toString());
+        blurEl.setAttribute("stdDeviation", fx.blur.toString());
       };
       sync();
       const onEnter = () => {
@@ -262,29 +273,35 @@ var LiquidGlassButton = (0, import_react.forwardRef)(
         import_gsap.default.to(fx, {
           displacement: hoverDisplacement,
           blur: hoverBlur,
-          chroma: chroma * hoverChromaMultiplier,
           duration: hoverDuration,
-          ease: "power3.out",
+          ease: "back.out(1.4)",
           onUpdate: sync
         });
-        import_gsap.default.to(button, { scale: hoverScale, duration: hoverDuration, ease: "power3.out" });
+        import_gsap.default.to(button, {
+          scale: hoverScale,
+          duration: hoverDuration,
+          ease: "back.out(1.4)"
+        });
       };
       const onLeave = () => {
         import_gsap.default.killTweensOf([fx, button]);
         import_gsap.default.to(fx, {
           displacement,
           blur,
-          chroma,
           duration: hoverDuration,
           ease: "power2.out",
           onUpdate: sync
         });
-        import_gsap.default.to(button, { scale: 1, duration: hoverDuration, ease: "power2.out" });
+        import_gsap.default.to(button, {
+          scale: 1,
+          duration: hoverDuration,
+          ease: "power2.out"
+        });
       };
       const onClick = () => {
         import_gsap.default.killTweensOf(button);
         const cur = import_gsap.default.getProperty(button, "scale");
-        import_gsap.default.timeline().to(button, { scale: cur * 0.95, duration: 0.1, ease: "power2.in" }).to(button, { scale: hoverScale, duration: 0.3, ease: "back.out(2)" });
+        import_gsap.default.timeline().to(button, { scale: cur * 0.92, duration: 0.08, ease: "power2.in" }).to(button, { scale: hoverScale, duration: 0.25, ease: "back.out(2)" });
       };
       button.addEventListener("pointerenter", onEnter);
       button.addEventListener("pointerleave", onLeave);
@@ -295,48 +312,128 @@ var LiquidGlassButton = (0, import_react.forwardRef)(
         button.removeEventListener("click", onClick);
         import_gsap.default.killTweensOf([button, fx]);
       };
-    }, [buttonRef, maps, chroma, displacement, blur, hoverScale, hoverDisplacement, hoverBlur, hoverChromaMultiplier, hoverDuration, disableAnimation]);
+    }, [buttonRef, maps, displacement, blur, hoverScale, hoverDisplacement, hoverBlur, hoverDuration, disableAnimation]);
     if (!maps) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "button",
         __spreadProps(__spreadValues({
           ref: buttonRef,
-          className: cn("relative overflow-hidden shadow-2xl shadow-black/20 cursor-pointer", className),
+          className: cn("relative overflow-hidden shadow-lg cursor-pointer", className),
           style: __spreadValues({ width, height, borderRadius: radius, border: "none", background: glassColor }, style)
         }, props), {
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
-                className: "absolute inset-0 z-0",
+                className: "absolute inset-0",
                 style: {
+                  backdropFilter: `url(#${filterId}) brightness(${brightness * 100}%)`,
+                  WebkitBackdropFilter: `url(#${filterId}) brightness(${brightness * 100}%)`,
                   borderRadius: "inherit",
-                  backdropFilter: `url(#${filterId})`,
-                  WebkitBackdropFilter: `url(#${filterId})`,
                   willChange: "backdrop-filter",
                   transform: "translateZ(0)"
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 z-10 flex items-center justify-center font-bold text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)]", style: { background: "linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.0) 100%)", borderRadius: "inherit" }, children })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "absolute inset-0 inline-flex items-center justify-center font-bold text-white",
+                style: { background: "hsl(0 100% 100% / 15%)", borderRadius: "inherit" },
+                children
+              }
+            )
           ]
         })
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" }, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("filter", { id: filterId, x: `-${PADDING_PCT}%`, y: `-${PADDING_PCT}%`, width: `${100 + PADDING_PCT * 2}%`, height: `${100 + PADDING_PCT * 2}%`, colorInterpolationFilters: "sRGB", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { ref: blurRef, in: "SourceGraphic", stdDeviation: blur, result: "blurred_bg", edgeMode: "duplicate" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feImage", { href: maps.displacement, result: "disp_map", x: `${PADDING_PCT}%`, y: `${PADDING_PCT}%`, width: `${100}%`, height: `${100}%`, preserveAspectRatio: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { in: "disp_map", stdDeviation: smoothness, result: "disp_blurred", edgeMode: "duplicate" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feDisplacementMap", { ref: displacerR, in: "blurred_bg", in2: "disp_blurred", scale: displacement + chroma, xChannelSelector: "R", yChannelSelector: "G", result: "displaced_r" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { in: "displaced_r", type: "matrix", values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0", result: "red_channel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feDisplacementMap", { ref: displacerG, in: "blurred_bg", in2: "disp_blurred", scale: displacement, xChannelSelector: "R", yChannelSelector: "G", result: "displaced_g" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { in: "displaced_g", type: "matrix", values: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0", result: "green_channel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feDisplacementMap", { ref: displacerB, in: "blurred_bg", in2: "disp_blurred", scale: displacement - chroma, xChannelSelector: "R", yChannelSelector: "G", result: "displaced_b" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { in: "displaced_b", type: "matrix", values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0", result: "blue_channel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feBlend", { in: "red_channel", in2: "green_channel", mode: "screen", result: "rg_channels" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feBlend", { in: "rg_channels", in2: "blue_channel", mode: "screen", result: "rgb_channels" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { in: "rgb_channels", type: "saturate", values: saturation.toString(), result: "final" })
-      ] }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          colorInterpolationFilters: "sRGB",
+          style: { position: "absolute", width: 0, height: 0, overflow: "hidden" },
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("filter", { id: filterId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "feGaussianBlur",
+              {
+                ref: blurRef,
+                in: "SourceGraphic",
+                stdDeviation: blur,
+                result: "blurred_source"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "feImage",
+              {
+                href: maps.displacement,
+                x: "0",
+                y: "0",
+                width,
+                height,
+                result: "displacement_map"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "feDisplacementMap",
+              {
+                ref: displacerRef,
+                in: "blurred_source",
+                in2: "displacement_map",
+                scale: displacement,
+                xChannelSelector: "R",
+                yChannelSelector: "G",
+                result: "displaced"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "feColorMatrix",
+              {
+                in: "displaced",
+                type: "saturate",
+                result: "displaced_saturated",
+                values: saturation.toString()
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "feImage",
+              {
+                href: maps.specular,
+                x: "0",
+                y: "0",
+                width,
+                height,
+                result: "specular_layer"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "feGaussianBlur",
+              {
+                in: "specular_layer",
+                stdDeviation: "1",
+                result: "blurred_specular_layer"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "feComposite",
+              {
+                in: "displaced_saturated",
+                in2: "blurred_specular_layer",
+                operator: "in",
+                result: "final_specular_layer"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "feBlend",
+              {
+                in: "final_specular_layer",
+                in2: "displaced",
+                mode: "normal"
+              }
+            )
+          ] }) })
+        }
+      )
     ] });
   }
 );