@marcosdemik/liquidglass 1.0.0

package/README.md

@@ -0,0 +1,188 @@
+# @marcosdemik/liquidglass
+
+[![npm version](https://img.shields.io/npm/v/@marcosdemik/liquidglass.svg)](https://www.npmjs.com/package/@marcosdemik/liquidglass)
+[![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.
+
+Built with SVG filters and WebGL displacement maps.
+
+[GitHub](https://github.com/MarcosDemik/liquidglass)
+
+---
+
+## Install
+
+```bash
+# npm
+npm install @marcosdemik/liquidglass
+
+# yarn
+yarn add @marcosdemik/liquidglass
+
+# pnpm
+pnpm add @marcosdemik/liquidglass
+```
+
+## Quick Start
+
+```tsx
+import { LiquidGlassButton } from "@marcosdemik/liquidglass";
+
+function App() {
+  return (
+    <LiquidGlassButton width={320} height={60} radius={60} chroma={3}>
+      Click me
+    </LiquidGlassButton>
+  );
+}
+```
+
+## Works With
+
+- Next.js (App Router & Pages Router)
+- Vite + React
+- Remix
+- Gatsby
+- Any React 18+ project
+
+The component includes a `"use client"` directive, so it works out of the box with Server Components.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number` | `300` | Button width in pixels |
+| `height` | `number` | `56` | Button height in pixels |
+| `radius` | `number` | `60` | Border radius in pixels |
+| `edgeSize` | `number` | `40` | Size of the glass edge refraction zone |
+| `intensity` | `number` | `1.0` | Refraction intensity multiplier |
+| `smoothness` | `number` | `1.0` | Blur applied to the displacement map (softens edges) |
+| `distortion` | `number` | `15.0` | Normal map distortion scale |
+| `chroma` | `number` | `3` | Chromatic aberration strength (RGB channel offset) |
+| `glassColor` | `string` | `"rgba(255,255,255,0.05)"` | Background tint color of the glass |
+| `className` | `string` | | Additional CSS classes |
+| `style` | `CSSProperties` | | Inline styles merged onto the button |
+| `ref` | `Ref<HTMLButtonElement>` | | Forwarded ref to the underlying button |
+
+All standard `<button>` HTML attributes (`onClick`, `disabled`, `aria-label`, etc.) are also supported.
+
+## Examples
+
+### Pill Button
+
+```tsx
+<LiquidGlassButton width={320} height={60} radius={60}>
+  Get Started
+</LiquidGlassButton>
+```
+
+### Square Icon Button
+
+```tsx
+<LiquidGlassButton width={60} height={60} radius={16} className="text-xl">
+  +
+</LiquidGlassButton>
+```
+
+### Circle Button
+
+```tsx
+<LiquidGlassButton width={80} height={80} radius={9999}>
+  Play
+</LiquidGlassButton>
+```
+
+### Wide Navigation Bar
+
+```tsx
+<LiquidGlassButton width={400} height={48} radius={24}>
+  Navigation
+</LiquidGlassButton>
+```
+
+### High Distortion
+
+```tsx
+<LiquidGlassButton
+  width={320}
+  height={60}
+  radius={60}
+  distortion={30}
+  chroma={8}
+  intensity={2}
+>
+  Distorted
+</LiquidGlassButton>
+```
+
+### Subtle Glass
+
+```tsx
+<LiquidGlassButton
+  width={320}
+  height={60}
+  radius={60}
+  distortion={5}
+  chroma={1}
+  smoothness={3}
+>
+  Subtle
+</LiquidGlassButton>
+```
+
+### With onClick Handler
+
+```tsx
+<LiquidGlassButton
+  width={200}
+  height={50}
+  radius={30}
+  onClick={() => console.log("clicked!")}
+>
+  Click me
+</LiquidGlassButton>
+```
+
+### Custom Glass Color
+
+```tsx
+<LiquidGlassButton
+  width={320}
+  height={60}
+  radius={60}
+  glassColor="rgba(0, 150, 255, 0.1)"
+>
+  Blue Glass
+</LiquidGlassButton>
+```
+
+## How It Works
+
+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.
+
+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"`.
+
+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.
+
+## Accessibility
+
+- Respects `prefers-reduced-motion` - all animations are automatically disabled
+- Semantic `<button>` element - fully keyboard navigable
+- Supports all ARIA attributes via standard button props
+
+## Requirements
+
+- React 18+ (uses `useId` hook)
+- Browser with WebGL support
+
+## Acknowledgments
+
+The core glass refraction concept is inspired by [rahuldotdev](https://github.com/rahuldotdev)'s liquid glass button implementation.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,311 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LiquidGlassButton: () => LiquidGlassButton,
+  cn: () => cn,
+  generateGlassMaps: () => generateGlassMaps
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/liquid-glass-button.tsx
+var import_react = require("react");
+var import_gsap = __toESM(require("gsap"), 1);
+
+// src/utils.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/generate-displacement-map.ts
+var VERT = `attribute vec4 position; void main(){ gl_Position = position; }`;
+var FRAG = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uRadius;
+uniform float uEdgeSize;
+uniform float uIntensity;
+uniform float uDistortion;
+
+float sdRoundedBox(vec2 p, vec2 b, float r){
+  r = min(r, min(b.x, b.y));
+  vec2 q = abs(p) - b + 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);
+}
+
+void main(){
+  vec2 p = gl_FragCoord.xy - uRes * 0.5;
+  p.y = -p.y;
+
+  // --- 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);
+
+  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);
+}
+`;
+function compile(gl, type, src) {
+  const s = gl.createShader(type);
+  gl.shaderSource(s, src);
+  gl.compileShader(s);
+  return s;
+}
+var _cachedProgram = null;
+function getGL() {
+  if (_cachedProgram) return _cachedProgram;
+  const canvas = document.createElement("canvas");
+  const gl = canvas.getContext("webgl", { preserveDrawingBuffer: true, premultipliedAlpha: false });
+  const vs = compile(gl, gl.VERTEX_SHADER, VERT);
+  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG);
+  const program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  gl.useProgram(program);
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  const pos = gl.getAttribLocation(program, "position");
+  gl.enableVertexAttribArray(pos);
+  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+  _cachedProgram = { gl, program, canvas };
+  return _cachedProgram;
+}
+function render(width, height, radius, edgeSize, intensity, distortion) {
+  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.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.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 r = Math.min(radius, width / 2, height / 2);
+  return {
+    displacement: render(width, height, r, edgeSize, intensity, distortion)
+  };
+}
+
+// src/liquid-glass-button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CONFIG = {
+  initial: { scale: 1, displacement: 35, blur: 2, chroma: 3 },
+  hover: { scale: 1.05, displacement: 65, blur: 4, chroma: 10 },
+  click: { scaleDown: 0.95, scaleUp: 1.05 },
+  duration: { hover: 0.4, clickDown: 0.1, clickUp: 0.3 },
+  ease: {
+    hover: "power3.out",
+    hoverOut: "power2.out",
+    clickDown: "power2.in",
+    clickUp: "back.out(2)"
+  }
+};
+var PADDING = 60;
+var LiquidGlassButton = (0, import_react.forwardRef)(
+  function LiquidGlassButton2(_a, ref) {
+    var _b = _a, { children, className, width = 300, height = 56, radius = 60, edgeSize, intensity, smoothness = 1, distortion, chroma = 3, glassColor = "rgba(255,255,255,0.05)", style } = _b, props = __objRest(_b, ["children", "className", "width", "height", "radius", "edgeSize", "intensity", "smoothness", "distortion", "chroma", "glassColor", "style"]);
+    const internalRef = (0, import_react.useRef)(null);
+    const buttonRef = ref != null ? ref : internalRef;
+    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)(() => {
+      const result = generateGlassMaps({ width, height, radius, edgeSize, intensity, distortion });
+      setMaps(result);
+    }, [width, height, radius, edgeSize, intensity, distortion]);
+    (0, import_react.useEffect)(() => {
+      const button = buttonRef.current;
+      if (!button || !blurRef.current) return;
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+      const fx = {
+        displacement: CONFIG.initial.displacement,
+        blur: CONFIG.initial.blur,
+        chroma
+      };
+      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());
+      };
+      sync();
+      const onEnter = () => {
+        import_gsap.default.killTweensOf([fx, button]);
+        import_gsap.default.to(fx, {
+          displacement: CONFIG.hover.displacement,
+          blur: CONFIG.hover.blur,
+          chroma: chroma * 2.5,
+          duration: CONFIG.duration.hover,
+          ease: CONFIG.ease.hover,
+          onUpdate: sync
+        });
+        import_gsap.default.to(button, { scale: CONFIG.hover.scale, duration: CONFIG.duration.hover, ease: CONFIG.ease.hover });
+      };
+      const onLeave = () => {
+        import_gsap.default.killTweensOf([fx, button]);
+        import_gsap.default.to(fx, {
+          displacement: CONFIG.initial.displacement,
+          blur: CONFIG.initial.blur,
+          chroma,
+          duration: CONFIG.duration.hover,
+          ease: CONFIG.ease.hoverOut,
+          onUpdate: sync
+        });
+        import_gsap.default.to(button, { scale: CONFIG.initial.scale, duration: CONFIG.duration.hover, ease: CONFIG.ease.hoverOut });
+      };
+      const onClick = () => {
+        import_gsap.default.killTweensOf(button);
+        const cur = import_gsap.default.getProperty(button, "scale");
+        import_gsap.default.timeline().to(button, { scale: cur * CONFIG.click.scaleDown, duration: CONFIG.duration.clickDown, ease: CONFIG.ease.clickDown }).to(button, { scale: CONFIG.click.scaleUp, duration: CONFIG.duration.clickUp, ease: CONFIG.ease.clickUp });
+      };
+      button.addEventListener("pointerenter", onEnter);
+      button.addEventListener("pointerleave", onLeave);
+      button.addEventListener("click", onClick);
+      return () => {
+        button.removeEventListener("pointerenter", onEnter);
+        button.removeEventListener("pointerleave", onLeave);
+        button.removeEventListener("click", onClick);
+        import_gsap.default.killTweensOf([button, fx]);
+      };
+    }, [buttonRef, maps, chroma]);
+    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),
+          style: __spreadValues({ width, height, borderRadius: radius, border: "none", background: glassColor }, style)
+        }, props), {
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "absolute z-0",
+                style: {
+                  top: -PADDING,
+                  left: -PADDING,
+                  right: -PADDING,
+                  bottom: -PADDING,
+                  backdropFilter: `url(#${filterId})`,
+                  WebkitBackdropFilter: `url(#${filterId})`
+                }
+              }
+            ),
+            /* @__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)("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: "0", y: "0", width: "100%", height: "100%", colorInterpolationFilters: "sRGB", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { ref: blurRef, in: "SourceGraphic", stdDeviation: CONFIG.initial.blur, result: "blurred_bg", edgeMode: "duplicate" }),
+        maps && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feImage", { href: maps.displacement, result: "disp_map", x: PADDING, y: PADDING, width, height, 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: CONFIG.initial.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: CONFIG.initial.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: CONFIG.initial.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: "1.2", result: "final" })
+        ] })
+      ] }) }) })
+    ] });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LiquidGlassButton,
+  cn,
+  generateGlassMaps
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/liquid-glass-button.tsx","../src/utils.ts","../src/generate-displacement-map.ts"],"sourcesContent":["export { LiquidGlassButton } from \"./liquid-glass-button\";\nexport type { LiquidGlassButtonProps } from \"./liquid-glass-button\";\nexport { generateGlassMaps } from \"./generate-displacement-map\";\nexport type { MapOptions } from \"./generate-displacement-map\";\nexport { cn } from \"./utils\";\n","import React, { useRef, useEffect, useState, useId, forwardRef } from \"react\";\nimport gsap from \"gsap\";\nimport { cn } from \"./utils\";\nimport { generateGlassMaps } from \"./generate-displacement-map\";\n\nconst CONFIG = {\n  initial: { scale: 1, displacement: 35, blur: 2, chroma: 3 },\n  hover: { scale: 1.05, displacement: 65, blur: 4, chroma: 10 },\n  click: { scaleDown: 0.95, scaleUp: 1.05 },\n  duration: { hover: 0.4, clickDown: 0.1, clickUp: 0.3 },\n  ease: {\n    hover: \"power3.out\",\n    hoverOut: \"power2.out\",\n    clickDown: \"power2.in\",\n    clickUp: \"back.out(2)\",\n  },\n} as const;\n\nconst PADDING = 60;\n\nexport interface LiquidGlassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  width?: number;\n  height?: number;\n  radius?: number;\n  edgeSize?: number;\n  intensity?: number;\n  smoothness?: number;\n  distortion?: number;\n  chroma?: number;\n  glassColor?: string;\n}\n\nexport const LiquidGlassButton = forwardRef<HTMLButtonElement, LiquidGlassButtonProps>(\n  function LiquidGlassButton({ children, className, width = 300, height = 56, radius = 60, edgeSize, intensity, smoothness = 1, distortion, chroma = 3, glassColor = \"rgba(255,255,255,0.05)\", style, ...props }, ref) {\n    const internalRef = useRef<HTMLButtonElement>(null);\n    const buttonRef = (ref as React.RefObject<HTMLButtonElement>) ?? internalRef;\n\n    const blurRef = useRef<SVGFEGaussianBlurElement>(null);\n    const displacerR = useRef<SVGFEDisplacementMapElement>(null);\n    const displacerG = useRef<SVGFEDisplacementMapElement>(null);\n    const displacerB = useRef<SVGFEDisplacementMapElement>(null);\n\n    const filterId = \"lg\" + useId().replace(/:/g, \"\");\n\n    const [maps, setMaps] = useState<{ displacement: string } | null>(null);\n\n    useEffect(() => {\n      const result = generateGlassMaps({ width, height, radius, edgeSize, intensity, distortion });\n      setMaps(result);\n    }, [width, height, radius, edgeSize, intensity, distortion]);\n\n    useEffect(() => {\n      const button = buttonRef.current;\n      if (!button || !blurRef.current) return;\n\n      if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n\n      const fx = {\n        displacement: CONFIG.initial.displacement,\n        blur: CONFIG.initial.blur,\n        chroma: chroma\n      };\n\n      const sync = () => {\n        displacerR.current?.setAttribute(\"scale\", (fx.displacement + fx.chroma).toString());\n        displacerG.current?.setAttribute(\"scale\", fx.displacement.toString());\n        displacerB.current?.setAttribute(\"scale\", (fx.displacement - fx.chroma).toString());\n        blurRef.current?.setAttribute(\"stdDeviation\", fx.blur.toString());\n      };\n\n      sync();\n\n      const onEnter = () => {\n        gsap.killTweensOf([fx, button]);\n        gsap.to(fx, {\n          displacement: CONFIG.hover.displacement,\n          blur: CONFIG.hover.blur,\n          chroma: chroma * 2.5,\n          duration: CONFIG.duration.hover,\n          ease: CONFIG.ease.hover,\n          onUpdate: sync\n        });\n        gsap.to(button, { scale: CONFIG.hover.scale, duration: CONFIG.duration.hover, ease: CONFIG.ease.hover });\n      };\n\n      const onLeave = () => {\n        gsap.killTweensOf([fx, button]);\n        gsap.to(fx, {\n          displacement: CONFIG.initial.displacement,\n          blur: CONFIG.initial.blur,\n          chroma: chroma,\n          duration: CONFIG.duration.hover,\n          ease: CONFIG.ease.hoverOut,\n          onUpdate: sync\n        });\n        gsap.to(button, { scale: CONFIG.initial.scale, duration: CONFIG.duration.hover, ease: CONFIG.ease.hoverOut });\n      };\n\n      const onClick = () => {\n        gsap.killTweensOf(button);\n        const cur = gsap.getProperty(button, \"scale\") as number;\n        gsap.timeline()\n          .to(button, { scale: cur * CONFIG.click.scaleDown, duration: CONFIG.duration.clickDown, ease: CONFIG.ease.clickDown })\n          .to(button, { scale: CONFIG.click.scaleUp, duration: CONFIG.duration.clickUp, ease: CONFIG.ease.clickUp });\n      };\n\n      button.addEventListener(\"pointerenter\", onEnter);\n      button.addEventListener(\"pointerleave\", onLeave);\n      button.addEventListener(\"click\", onClick);\n\n      return () => {\n        button.removeEventListener(\"pointerenter\", onEnter);\n        button.removeEventListener(\"pointerleave\", onLeave);\n        button.removeEventListener(\"click\", onClick);\n        gsap.killTweensOf([button, fx]);\n      };\n    }, [buttonRef, maps, chroma]);\n\n    return (\n      <>\n        <button\n          ref={buttonRef}\n          className={cn(\"relative overflow-hidden shadow-2xl shadow-black/20 cursor-pointer\", className)}\n          style={{ width, height, borderRadius: radius, border: \"none\", background: glassColor, ...style }}\n          {...props}\n        >\n          <div\n            className=\"absolute z-0\"\n            style={{\n              top: -PADDING, left: -PADDING, right: -PADDING, bottom: -PADDING,\n              backdropFilter: `url(#${filterId})`,\n              WebkitBackdropFilter: `url(#${filterId})`\n            }}\n          />\n          <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\" }}>\n            {children}\n          </div>\n        </button>\n\n        <svg style={{ position: \"absolute\", width: 0, height: 0, pointerEvents: \"none\" }} aria-hidden=\"true\">\n          <defs>\n            <filter id={filterId} x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" colorInterpolationFilters=\"sRGB\">\n              <feGaussianBlur ref={blurRef} in=\"SourceGraphic\" stdDeviation={CONFIG.initial.blur} result=\"blurred_bg\" edgeMode=\"duplicate\" />\n\n              {maps && (\n                <>\n                  <feImage href={maps.displacement} result=\"disp_map\" x={PADDING} y={PADDING} width={width} height={height} preserveAspectRatio=\"none\" />\n\n                  <feGaussianBlur in=\"disp_map\" stdDeviation={smoothness} result=\"disp_blurred\" edgeMode=\"duplicate\" />\n\n                  <feDisplacementMap ref={displacerR} in=\"blurred_bg\" in2=\"disp_blurred\" scale={CONFIG.initial.displacement + chroma} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"displaced_r\" />\n                  <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\" />\n\n                  <feDisplacementMap ref={displacerG} in=\"blurred_bg\" in2=\"disp_blurred\" scale={CONFIG.initial.displacement} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"displaced_g\" />\n                  <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\" />\n\n                  <feDisplacementMap ref={displacerB} in=\"blurred_bg\" in2=\"disp_blurred\" scale={CONFIG.initial.displacement - chroma} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"displaced_b\" />\n                  <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\" />\n\n                  <feBlend in=\"red_channel\" in2=\"green_channel\" mode=\"screen\" result=\"rg_channels\" />\n                  <feBlend in=\"rg_channels\" in2=\"blue_channel\" mode=\"screen\" result=\"rgb_channels\" />\n\n                  <feColorMatrix in=\"rgb_channels\" type=\"saturate\" values=\"1.2\" result=\"final\" />\n                </>\n              )}\n            </filter>\n          </defs>\n        </svg>\n      </>\n    );\n  }\n);\n","export function cn(...classes: (string | undefined | null | false)[]) {\n  return classes.filter(Boolean).join(\" \");\n}\n","export interface MapOptions {\n  width: number;\n  height: number;\n  radius?: number;\n  edgeSize?: number;\n  intensity?: number;\n  distortion?: number;\n}\n\nconst VERT = `attribute vec4 position; void main(){ gl_Position = position; }`;\n\nconst FRAG = `\nprecision mediump float;\nuniform vec2 uRes;\nuniform float uRadius;\nuniform float uEdgeSize;\nuniform float uIntensity;\nuniform float uDistortion;\n\nfloat sdRoundedBox(vec2 p, vec2 b, float r){\n  r = min(r, min(b.x, b.y));\n  vec2 q = abs(p) - b + r;\n  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;\n}\n\nfloat getHeight(vec2 p) {\n    vec2 halfSize = uRes * 0.5 - 2.0;\n\n    // Aumenta o tamanho base do box ligeiramente proporcinal ao edge\n    halfSize += uEdgeSize * 0.2;\n\n    float d = sdRoundedBox(p, halfSize, uRadius);\n\n    float borderSoftness = uEdgeSize * uIntensity;\n    d = max(d, -borderSoftness);\n    return smoothstep(0.0, -borderSoftness, d);\n}\n\nvoid main(){\n  vec2 p = gl_FragCoord.xy - uRes * 0.5;\n  p.y = -p.y;\n\n  // --- Displacement Map ---\n  const vec2 e = vec2(1.0, 0.0);\n  float hx = getHeight(p + e.xy) - getHeight(p - e.xy);\n  float hy = getHeight(p + e.yx) - getHeight(p - e.yx);\n\n  vec2 normal = vec2(-hx, -hy) * uDistortion;\n  vec2 color = clamp(normal * 0.5 + 0.5, 0.0, 1.0);\n\n  gl_FragColor = vec4(color.x, color.y, 0.5, 1.0);\n}\n`;\n\nfunction compile(gl: WebGLRenderingContext, type: number, src: string) {\n  const s = gl.createShader(type)!;\n  gl.shaderSource(s, src);\n  gl.compileShader(s);\n  return s;\n}\n\nlet _cachedProgram: { gl: WebGLRenderingContext; program: WebGLProgram; canvas: HTMLCanvasElement } | null = null;\n\nfunction getGL() {\n  if (_cachedProgram) return _cachedProgram;\n\n  const canvas = document.createElement(\"canvas\");\n  const gl = canvas.getContext(\"webgl\", { preserveDrawingBuffer: true, premultipliedAlpha: false })!;\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT);\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG);\n  const program = gl.createProgram()!;\n  gl.attachShader(program, vs);\n  gl.attachShader(program, fs);\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  const buf = gl.createBuffer();\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);\n  const pos = gl.getAttribLocation(program, \"position\");\n  gl.enableVertexAttribArray(pos);\n  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n\n  _cachedProgram = { gl, program, canvas };\n  return _cachedProgram;\n}\n\nfunction render(width: number, height: number, radius: number, edgeSize: number, intensity: number, distortion: number): string {\n  const { gl, program, canvas } = getGL();\n  canvas.width = width;\n  canvas.height = height;\n  gl.viewport(0, 0, width, height);\n  gl.clearColor(0.5, 0.5, 0.5, 1.0);\n  gl.clear(gl.COLOR_BUFFER_BIT);\n  gl.useProgram(program);\n\n  gl.uniform2f(gl.getUniformLocation(program, \"uRes\"), width, height);\n  gl.uniform1f(gl.getUniformLocation(program, \"uRadius\"), radius);\n  gl.uniform1f(gl.getUniformLocation(program, \"uEdgeSize\"), edgeSize);\n  gl.uniform1f(gl.getUniformLocation(program, \"uIntensity\"), intensity);\n  gl.uniform1f(gl.getUniformLocation(program, \"uDistortion\"), distortion);\n\n  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n  return canvas.toDataURL(\"image/png\");\n}\n\nexport function generateGlassMaps(opts: MapOptions): { displacement: string } {\n  const { width, height, radius = 60, edgeSize = 40, intensity = 1.0, distortion = 15.0 } = opts;\n  const r = Math.min(radius, width / 2, height / 2);\n\n  return {\n    displacement: render(width, height, r, edgeSize, intensity, distortion),\n  };\n}\n"],"mappings":"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","names":["LiquidGlassButton","_a","_b","gsap"]}

package/dist/index.d.cts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface LiquidGlassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    width?: number;
+    height?: number;
+    radius?: number;
+    edgeSize?: number;
+    intensity?: number;
+    smoothness?: number;
+    distortion?: number;
+    chroma?: number;
+    glassColor?: string;
+}
+declare const LiquidGlassButton: React.ForwardRefExoticComponent<LiquidGlassButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface MapOptions {
+    width: number;
+    height: number;
+    radius?: number;
+    edgeSize?: number;
+    intensity?: number;
+    distortion?: number;
+}
+declare function generateGlassMaps(opts: MapOptions): {
+    displacement: string;
+};
+
+declare function cn(...classes: (string | undefined | null | false)[]): string;
+
+export { LiquidGlassButton, type LiquidGlassButtonProps, type MapOptions, cn, generateGlassMaps };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface LiquidGlassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    width?: number;
+    height?: number;
+    radius?: number;
+    edgeSize?: number;
+    intensity?: number;
+    smoothness?: number;
+    distortion?: number;
+    chroma?: number;
+    glassColor?: string;
+}
+declare const LiquidGlassButton: React.ForwardRefExoticComponent<LiquidGlassButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface MapOptions {
+    width: number;
+    height: number;
+    radius?: number;
+    edgeSize?: number;
+    intensity?: number;
+    distortion?: number;
+}
+declare function generateGlassMaps(opts: MapOptions): {
+    displacement: string;
+};
+
+declare function cn(...classes: (string | undefined | null | false)[]): string;
+
+export { LiquidGlassButton, type LiquidGlassButtonProps, type MapOptions, cn, generateGlassMaps };

package/dist/index.js

@@ -0,0 +1,275 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/liquid-glass-button.tsx
+import { useRef, useEffect, useState, useId, forwardRef } from "react";
+import gsap from "gsap";
+
+// src/utils.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/generate-displacement-map.ts
+var VERT = `attribute vec4 position; void main(){ gl_Position = position; }`;
+var FRAG = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uRadius;
+uniform float uEdgeSize;
+uniform float uIntensity;
+uniform float uDistortion;
+
+float sdRoundedBox(vec2 p, vec2 b, float r){
+  r = min(r, min(b.x, b.y));
+  vec2 q = abs(p) - b + 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);
+}
+
+void main(){
+  vec2 p = gl_FragCoord.xy - uRes * 0.5;
+  p.y = -p.y;
+
+  // --- 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);
+
+  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);
+}
+`;
+function compile(gl, type, src) {
+  const s = gl.createShader(type);
+  gl.shaderSource(s, src);
+  gl.compileShader(s);
+  return s;
+}
+var _cachedProgram = null;
+function getGL() {
+  if (_cachedProgram) return _cachedProgram;
+  const canvas = document.createElement("canvas");
+  const gl = canvas.getContext("webgl", { preserveDrawingBuffer: true, premultipliedAlpha: false });
+  const vs = compile(gl, gl.VERTEX_SHADER, VERT);
+  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG);
+  const program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  gl.useProgram(program);
+  const buf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  const pos = gl.getAttribLocation(program, "position");
+  gl.enableVertexAttribArray(pos);
+  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+  _cachedProgram = { gl, program, canvas };
+  return _cachedProgram;
+}
+function render(width, height, radius, edgeSize, intensity, distortion) {
+  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.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.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 r = Math.min(radius, width / 2, height / 2);
+  return {
+    displacement: render(width, height, r, edgeSize, intensity, distortion)
+  };
+}
+
+// src/liquid-glass-button.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CONFIG = {
+  initial: { scale: 1, displacement: 35, blur: 2, chroma: 3 },
+  hover: { scale: 1.05, displacement: 65, blur: 4, chroma: 10 },
+  click: { scaleDown: 0.95, scaleUp: 1.05 },
+  duration: { hover: 0.4, clickDown: 0.1, clickUp: 0.3 },
+  ease: {
+    hover: "power3.out",
+    hoverOut: "power2.out",
+    clickDown: "power2.in",
+    clickUp: "back.out(2)"
+  }
+};
+var PADDING = 60;
+var LiquidGlassButton = forwardRef(
+  function LiquidGlassButton2(_a, ref) {
+    var _b = _a, { children, className, width = 300, height = 56, radius = 60, edgeSize, intensity, smoothness = 1, distortion, chroma = 3, glassColor = "rgba(255,255,255,0.05)", style } = _b, props = __objRest(_b, ["children", "className", "width", "height", "radius", "edgeSize", "intensity", "smoothness", "distortion", "chroma", "glassColor", "style"]);
+    const internalRef = useRef(null);
+    const buttonRef = ref != null ? ref : internalRef;
+    const blurRef = useRef(null);
+    const displacerR = useRef(null);
+    const displacerG = useRef(null);
+    const displacerB = useRef(null);
+    const filterId = "lg" + useId().replace(/:/g, "");
+    const [maps, setMaps] = useState(null);
+    useEffect(() => {
+      const result = generateGlassMaps({ width, height, radius, edgeSize, intensity, distortion });
+      setMaps(result);
+    }, [width, height, radius, edgeSize, intensity, distortion]);
+    useEffect(() => {
+      const button = buttonRef.current;
+      if (!button || !blurRef.current) return;
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+      const fx = {
+        displacement: CONFIG.initial.displacement,
+        blur: CONFIG.initial.blur,
+        chroma
+      };
+      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());
+      };
+      sync();
+      const onEnter = () => {
+        gsap.killTweensOf([fx, button]);
+        gsap.to(fx, {
+          displacement: CONFIG.hover.displacement,
+          blur: CONFIG.hover.blur,
+          chroma: chroma * 2.5,
+          duration: CONFIG.duration.hover,
+          ease: CONFIG.ease.hover,
+          onUpdate: sync
+        });
+        gsap.to(button, { scale: CONFIG.hover.scale, duration: CONFIG.duration.hover, ease: CONFIG.ease.hover });
+      };
+      const onLeave = () => {
+        gsap.killTweensOf([fx, button]);
+        gsap.to(fx, {
+          displacement: CONFIG.initial.displacement,
+          blur: CONFIG.initial.blur,
+          chroma,
+          duration: CONFIG.duration.hover,
+          ease: CONFIG.ease.hoverOut,
+          onUpdate: sync
+        });
+        gsap.to(button, { scale: CONFIG.initial.scale, duration: CONFIG.duration.hover, ease: CONFIG.ease.hoverOut });
+      };
+      const onClick = () => {
+        gsap.killTweensOf(button);
+        const cur = gsap.getProperty(button, "scale");
+        gsap.timeline().to(button, { scale: cur * CONFIG.click.scaleDown, duration: CONFIG.duration.clickDown, ease: CONFIG.ease.clickDown }).to(button, { scale: CONFIG.click.scaleUp, duration: CONFIG.duration.clickUp, ease: CONFIG.ease.clickUp });
+      };
+      button.addEventListener("pointerenter", onEnter);
+      button.addEventListener("pointerleave", onLeave);
+      button.addEventListener("click", onClick);
+      return () => {
+        button.removeEventListener("pointerenter", onEnter);
+        button.removeEventListener("pointerleave", onLeave);
+        button.removeEventListener("click", onClick);
+        gsap.killTweensOf([button, fx]);
+      };
+    }, [buttonRef, maps, chroma]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        __spreadProps(__spreadValues({
+          ref: buttonRef,
+          className: cn("relative overflow-hidden shadow-2xl shadow-black/20 cursor-pointer", className),
+          style: __spreadValues({ width, height, borderRadius: radius, border: "none", background: glassColor }, style)
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute z-0",
+                style: {
+                  top: -PADDING,
+                  left: -PADDING,
+                  right: -PADDING,
+                  bottom: -PADDING,
+                  backdropFilter: `url(#${filterId})`,
+                  WebkitBackdropFilter: `url(#${filterId})`
+                }
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, x: "0", y: "0", width: "100%", height: "100%", colorInterpolationFilters: "sRGB", children: [
+        /* @__PURE__ */ jsx("feGaussianBlur", { ref: blurRef, in: "SourceGraphic", stdDeviation: CONFIG.initial.blur, result: "blurred_bg", edgeMode: "duplicate" }),
+        maps && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("feImage", { href: maps.displacement, result: "disp_map", x: PADDING, y: PADDING, width, height, preserveAspectRatio: "none" }),
+          /* @__PURE__ */ jsx("feGaussianBlur", { in: "disp_map", stdDeviation: smoothness, result: "disp_blurred", edgeMode: "duplicate" }),
+          /* @__PURE__ */ jsx("feDisplacementMap", { ref: displacerR, in: "blurred_bg", in2: "disp_blurred", scale: CONFIG.initial.displacement + chroma, xChannelSelector: "R", yChannelSelector: "G", result: "displaced_r" }),
+          /* @__PURE__ */ 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__ */ jsx("feDisplacementMap", { ref: displacerG, in: "blurred_bg", in2: "disp_blurred", scale: CONFIG.initial.displacement, xChannelSelector: "R", yChannelSelector: "G", result: "displaced_g" }),
+          /* @__PURE__ */ 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__ */ jsx("feDisplacementMap", { ref: displacerB, in: "blurred_bg", in2: "disp_blurred", scale: CONFIG.initial.displacement - chroma, xChannelSelector: "R", yChannelSelector: "G", result: "displaced_b" }),
+          /* @__PURE__ */ 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__ */ jsx("feBlend", { in: "red_channel", in2: "green_channel", mode: "screen", result: "rg_channels" }),
+          /* @__PURE__ */ jsx("feBlend", { in: "rg_channels", in2: "blue_channel", mode: "screen", result: "rgb_channels" }),
+          /* @__PURE__ */ jsx("feColorMatrix", { in: "rgb_channels", type: "saturate", values: "1.2", result: "final" })
+        ] })
+      ] }) }) })
+    ] });
+  }
+);
+export {
+  LiquidGlassButton,
+  cn,
+  generateGlassMaps
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/liquid-glass-button.tsx","../src/utils.ts","../src/generate-displacement-map.ts"],"sourcesContent":["import React, { useRef, useEffect, useState, useId, forwardRef } from \"react\";\nimport gsap from \"gsap\";\nimport { cn } from \"./utils\";\nimport { generateGlassMaps } from \"./generate-displacement-map\";\n\nconst CONFIG = {\n  initial: { scale: 1, displacement: 35, blur: 2, chroma: 3 },\n  hover: { scale: 1.05, displacement: 65, blur: 4, chroma: 10 },\n  click: { scaleDown: 0.95, scaleUp: 1.05 },\n  duration: { hover: 0.4, clickDown: 0.1, clickUp: 0.3 },\n  ease: {\n    hover: \"power3.out\",\n    hoverOut: \"power2.out\",\n    clickDown: \"power2.in\",\n    clickUp: \"back.out(2)\",\n  },\n} as const;\n\nconst PADDING = 60;\n\nexport interface LiquidGlassButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  width?: number;\n  height?: number;\n  radius?: number;\n  edgeSize?: number;\n  intensity?: number;\n  smoothness?: number;\n  distortion?: number;\n  chroma?: number;\n  glassColor?: string;\n}\n\nexport const LiquidGlassButton = forwardRef<HTMLButtonElement, LiquidGlassButtonProps>(\n  function LiquidGlassButton({ children, className, width = 300, height = 56, radius = 60, edgeSize, intensity, smoothness = 1, distortion, chroma = 3, glassColor = \"rgba(255,255,255,0.05)\", style, ...props }, ref) {\n    const internalRef = useRef<HTMLButtonElement>(null);\n    const buttonRef = (ref as React.RefObject<HTMLButtonElement>) ?? internalRef;\n\n    const blurRef = useRef<SVGFEGaussianBlurElement>(null);\n    const displacerR = useRef<SVGFEDisplacementMapElement>(null);\n    const displacerG = useRef<SVGFEDisplacementMapElement>(null);\n    const displacerB = useRef<SVGFEDisplacementMapElement>(null);\n\n    const filterId = \"lg\" + useId().replace(/:/g, \"\");\n\n    const [maps, setMaps] = useState<{ displacement: string } | null>(null);\n\n    useEffect(() => {\n      const result = generateGlassMaps({ width, height, radius, edgeSize, intensity, distortion });\n      setMaps(result);\n    }, [width, height, radius, edgeSize, intensity, distortion]);\n\n    useEffect(() => {\n      const button = buttonRef.current;\n      if (!button || !blurRef.current) return;\n\n      if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n\n      const fx = {\n        displacement: CONFIG.initial.displacement,\n        blur: CONFIG.initial.blur,\n        chroma: chroma\n      };\n\n      const sync = () => {\n        displacerR.current?.setAttribute(\"scale\", (fx.displacement + fx.chroma).toString());\n        displacerG.current?.setAttribute(\"scale\", fx.displacement.toString());\n        displacerB.current?.setAttribute(\"scale\", (fx.displacement - fx.chroma).toString());\n        blurRef.current?.setAttribute(\"stdDeviation\", fx.blur.toString());\n      };\n\n      sync();\n\n      const onEnter = () => {\n        gsap.killTweensOf([fx, button]);\n        gsap.to(fx, {\n          displacement: CONFIG.hover.displacement,\n          blur: CONFIG.hover.blur,\n          chroma: chroma * 2.5,\n          duration: CONFIG.duration.hover,\n          ease: CONFIG.ease.hover,\n          onUpdate: sync\n        });\n        gsap.to(button, { scale: CONFIG.hover.scale, duration: CONFIG.duration.hover, ease: CONFIG.ease.hover });\n      };\n\n      const onLeave = () => {\n        gsap.killTweensOf([fx, button]);\n        gsap.to(fx, {\n          displacement: CONFIG.initial.displacement,\n          blur: CONFIG.initial.blur,\n          chroma: chroma,\n          duration: CONFIG.duration.hover,\n          ease: CONFIG.ease.hoverOut,\n          onUpdate: sync\n        });\n        gsap.to(button, { scale: CONFIG.initial.scale, duration: CONFIG.duration.hover, ease: CONFIG.ease.hoverOut });\n      };\n\n      const onClick = () => {\n        gsap.killTweensOf(button);\n        const cur = gsap.getProperty(button, \"scale\") as number;\n        gsap.timeline()\n          .to(button, { scale: cur * CONFIG.click.scaleDown, duration: CONFIG.duration.clickDown, ease: CONFIG.ease.clickDown })\n          .to(button, { scale: CONFIG.click.scaleUp, duration: CONFIG.duration.clickUp, ease: CONFIG.ease.clickUp });\n      };\n\n      button.addEventListener(\"pointerenter\", onEnter);\n      button.addEventListener(\"pointerleave\", onLeave);\n      button.addEventListener(\"click\", onClick);\n\n      return () => {\n        button.removeEventListener(\"pointerenter\", onEnter);\n        button.removeEventListener(\"pointerleave\", onLeave);\n        button.removeEventListener(\"click\", onClick);\n        gsap.killTweensOf([button, fx]);\n      };\n    }, [buttonRef, maps, chroma]);\n\n    return (\n      <>\n        <button\n          ref={buttonRef}\n          className={cn(\"relative overflow-hidden shadow-2xl shadow-black/20 cursor-pointer\", className)}\n          style={{ width, height, borderRadius: radius, border: \"none\", background: glassColor, ...style }}\n          {...props}\n        >\n          <div\n            className=\"absolute z-0\"\n            style={{\n              top: -PADDING, left: -PADDING, right: -PADDING, bottom: -PADDING,\n              backdropFilter: `url(#${filterId})`,\n              WebkitBackdropFilter: `url(#${filterId})`\n            }}\n          />\n          <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\" }}>\n            {children}\n          </div>\n        </button>\n\n        <svg style={{ position: \"absolute\", width: 0, height: 0, pointerEvents: \"none\" }} aria-hidden=\"true\">\n          <defs>\n            <filter id={filterId} x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" colorInterpolationFilters=\"sRGB\">\n              <feGaussianBlur ref={blurRef} in=\"SourceGraphic\" stdDeviation={CONFIG.initial.blur} result=\"blurred_bg\" edgeMode=\"duplicate\" />\n\n              {maps && (\n                <>\n                  <feImage href={maps.displacement} result=\"disp_map\" x={PADDING} y={PADDING} width={width} height={height} preserveAspectRatio=\"none\" />\n\n                  <feGaussianBlur in=\"disp_map\" stdDeviation={smoothness} result=\"disp_blurred\" edgeMode=\"duplicate\" />\n\n                  <feDisplacementMap ref={displacerR} in=\"blurred_bg\" in2=\"disp_blurred\" scale={CONFIG.initial.displacement + chroma} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"displaced_r\" />\n                  <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\" />\n\n                  <feDisplacementMap ref={displacerG} in=\"blurred_bg\" in2=\"disp_blurred\" scale={CONFIG.initial.displacement} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"displaced_g\" />\n                  <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\" />\n\n                  <feDisplacementMap ref={displacerB} in=\"blurred_bg\" in2=\"disp_blurred\" scale={CONFIG.initial.displacement - chroma} xChannelSelector=\"R\" yChannelSelector=\"G\" result=\"displaced_b\" />\n                  <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\" />\n\n                  <feBlend in=\"red_channel\" in2=\"green_channel\" mode=\"screen\" result=\"rg_channels\" />\n                  <feBlend in=\"rg_channels\" in2=\"blue_channel\" mode=\"screen\" result=\"rgb_channels\" />\n\n                  <feColorMatrix in=\"rgb_channels\" type=\"saturate\" values=\"1.2\" result=\"final\" />\n                </>\n              )}\n            </filter>\n          </defs>\n        </svg>\n      </>\n    );\n  }\n);\n","export function cn(...classes: (string | undefined | null | false)[]) {\n  return classes.filter(Boolean).join(\" \");\n}\n","export interface MapOptions {\n  width: number;\n  height: number;\n  radius?: number;\n  edgeSize?: number;\n  intensity?: number;\n  distortion?: number;\n}\n\nconst VERT = `attribute vec4 position; void main(){ gl_Position = position; }`;\n\nconst FRAG = `\nprecision mediump float;\nuniform vec2 uRes;\nuniform float uRadius;\nuniform float uEdgeSize;\nuniform float uIntensity;\nuniform float uDistortion;\n\nfloat sdRoundedBox(vec2 p, vec2 b, float r){\n  r = min(r, min(b.x, b.y));\n  vec2 q = abs(p) - b + r;\n  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;\n}\n\nfloat getHeight(vec2 p) {\n    vec2 halfSize = uRes * 0.5 - 2.0;\n\n    // Aumenta o tamanho base do box ligeiramente proporcinal ao edge\n    halfSize += uEdgeSize * 0.2;\n\n    float d = sdRoundedBox(p, halfSize, uRadius);\n\n    float borderSoftness = uEdgeSize * uIntensity;\n    d = max(d, -borderSoftness);\n    return smoothstep(0.0, -borderSoftness, d);\n}\n\nvoid main(){\n  vec2 p = gl_FragCoord.xy - uRes * 0.5;\n  p.y = -p.y;\n\n  // --- Displacement Map ---\n  const vec2 e = vec2(1.0, 0.0);\n  float hx = getHeight(p + e.xy) - getHeight(p - e.xy);\n  float hy = getHeight(p + e.yx) - getHeight(p - e.yx);\n\n  vec2 normal = vec2(-hx, -hy) * uDistortion;\n  vec2 color = clamp(normal * 0.5 + 0.5, 0.0, 1.0);\n\n  gl_FragColor = vec4(color.x, color.y, 0.5, 1.0);\n}\n`;\n\nfunction compile(gl: WebGLRenderingContext, type: number, src: string) {\n  const s = gl.createShader(type)!;\n  gl.shaderSource(s, src);\n  gl.compileShader(s);\n  return s;\n}\n\nlet _cachedProgram: { gl: WebGLRenderingContext; program: WebGLProgram; canvas: HTMLCanvasElement } | null = null;\n\nfunction getGL() {\n  if (_cachedProgram) return _cachedProgram;\n\n  const canvas = document.createElement(\"canvas\");\n  const gl = canvas.getContext(\"webgl\", { preserveDrawingBuffer: true, premultipliedAlpha: false })!;\n\n  const vs = compile(gl, gl.VERTEX_SHADER, VERT);\n  const fs = compile(gl, gl.FRAGMENT_SHADER, FRAG);\n  const program = gl.createProgram()!;\n  gl.attachShader(program, vs);\n  gl.attachShader(program, fs);\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  const buf = gl.createBuffer();\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);\n  const pos = gl.getAttribLocation(program, \"position\");\n  gl.enableVertexAttribArray(pos);\n  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n\n  _cachedProgram = { gl, program, canvas };\n  return _cachedProgram;\n}\n\nfunction render(width: number, height: number, radius: number, edgeSize: number, intensity: number, distortion: number): string {\n  const { gl, program, canvas } = getGL();\n  canvas.width = width;\n  canvas.height = height;\n  gl.viewport(0, 0, width, height);\n  gl.clearColor(0.5, 0.5, 0.5, 1.0);\n  gl.clear(gl.COLOR_BUFFER_BIT);\n  gl.useProgram(program);\n\n  gl.uniform2f(gl.getUniformLocation(program, \"uRes\"), width, height);\n  gl.uniform1f(gl.getUniformLocation(program, \"uRadius\"), radius);\n  gl.uniform1f(gl.getUniformLocation(program, \"uEdgeSize\"), edgeSize);\n  gl.uniform1f(gl.getUniformLocation(program, \"uIntensity\"), intensity);\n  gl.uniform1f(gl.getUniformLocation(program, \"uDistortion\"), distortion);\n\n  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n  return canvas.toDataURL(\"image/png\");\n}\n\nexport function generateGlassMaps(opts: MapOptions): { displacement: string } {\n  const { width, height, radius = 60, edgeSize = 40, intensity = 1.0, distortion = 15.0 } = opts;\n  const r = Math.min(radius, width / 2, height / 2);\n\n  return {\n    displacement: render(width, height, r, edgeSize, intensity, distortion),\n  };\n}\n"],"mappings":"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","names":["LiquidGlassButton","_a","_b"]}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@marcosdemik/liquidglass",
+  "version": "1.0.0",
+  "description": "Liquid Glass UI effect for React - glassmorphism refraction with SVG filters, WebGL and GSAP animations",
+  "author": "Marcos Demik <marcosdemik>",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "gsap": "^3.12.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "keywords": [
+    "liquid-glass",
+    "liquidglass",
+    "glassmorphism",
+    "glass",
+    "glass-effect",
+    "refraction",
+    "svg-filter",
+    "webgl",
+    "react",
+    "react-component",
+    "ui",
+    "button",
+    "apple",
+    "ios",
+    "macos",
+    "chromatic-aberration",
+    "gsap",
+    "animation"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MarcosDemik/liquidglass"
+  },
+  "homepage": "https://github.com/MarcosDemik/liquidglass#readme",
+  "bugs": {
+    "url": "https://github.com/MarcosDemik/liquidglass/issues"
+  }
+}