liquid-glass-canvas 0.1.0

package/README.md

@@ -0,0 +1,169 @@
+# Liquid Glass Canvas
+
+A high-performance, WebGL-native liquid glass refraction library for HTML5 Canvas and WebGL sources.
+
+> [!IMPORTANT]
+> **This library is designed specifically to refract Canvas (2D/WebGL) content.** It does not refract arbitrary HTML DOM elements (such as text, images, or standard divs) that are outside the canvas source.
+
+---
+
+## Why Liquid Glass Canvas?
+
+Traditional glassmorphism effects on the web rely on CSS `backdrop-filter: blur()`, SVG `<feDisplacementMap>`, or DOM-cloning techniques. While these work well for static or standard HTML content, they fail when dealing with **dynamic canvas animations** (e.g., interactive particle systems, Three.js scenes, PixiJS renderers, or canvas game loops):
+1. **SVG Displacement Maps** are extremely slow and CPU-bound in many browsers.
+2. **Canvas `toDataURL` or `getImageData`** approaches require copying pixel buffers back to the CPU, destroying performance and causing frame drops.
+3. **`backdrop-filter`** does not provide custom lens-based optical refraction (e.g., normal-based displacement, chromatic aberration, or custom edge curves).
+
+**Liquid Glass Canvas** solves this by performing native WebGL-based refraction directly in the GPU. It captures a source canvas as a WebGL texture, calculates precise rounded-rectangle Signed Distance Field (SDF) lenses, and renders high-performance refraction overlays or quads at 60 FPS.
+
+---
+
+## Features
+
+- **Rounded Rectangle SDF Lenses:** Clean, mathematical shapes with adjustable corner radii.
+- **Edge Normal Displacement:** Realistic lens refraction based on edge normals and customizable falloff curves.
+- **Chromatic Aberration:** Simulated glass dispersion by sampling color channels with slight offsets.
+- **Layered Aesthetics:** Combined refraction core, tint overlay (supporting RGBA/hex/CSS color strings), and dynamic specular glint.
+- **Dual Modes:**
+  - **Overlay Mode:** Ideal for standard web apps. It places a transparent WebGL canvas over your background canvas and automatically aligns glass lenses with floating DOM elements (like cards or menus).
+  - **Pass Mode:** Ideal for custom graphics pipelines. Render the refraction step directly inside an existing WebGL context or render loop.
+- **Performance Optimized:** No expensive blur shaders, smart DPR handling, and low-quality fallbacks for mobile/lower-end devices.
+
+---
+
+## Installation
+
+```bash
+npm install liquid-glass-canvas
+```
+
+---
+
+## Quick Start
+
+### 1. Overlay Mode (Aligning with DOM Elements)
+
+In Overlay Mode, the library places an overlay WebGL canvas on top of a source canvas and automatically tracks DOM elements to apply refraction.
+
+```html
+<div id="container" style="position: relative; width: 100vw; height: 100vh;">
+  <!-- Your dynamic background (e.g., Three.js, 2D Canvas particles) -->
+  <canvas id="bg-canvas" style="width: 100%; height: 100%;"></canvas>
+  
+  <!-- A standard DOM element you want to turn into a glass lens -->
+  <div id="glass-card" style="position: absolute; width: 300px; height: 200px; border-radius: 24px;">
+    <h2>Refracted Card</h2>
+  </div>
+</div>
+```
+
+```typescript
+import { createCanvasLiquidGlass } from 'liquid-glass-canvas';
+
+// Initialize the overlay
+const glass = createCanvasLiquidGlass({
+  source: document.getElementById('bg-canvas') as HTMLCanvasElement,
+  container: document.getElementById('container') as HTMLElement,
+  dpr: 'auto', // Matches device pixel ratio automatically
+});
+
+// Register the DOM element as a lens
+glass.registerLens(document.getElementById('glass-card')!, {
+  radius: 24,           // Match CSS border-radius
+  depth: 80,            // Strength of refraction displacement
+  feather: 16,          // Feather distance in pixels at the lens edge
+  curve: 2.0,           // Falloff curve exponent (higher = sharper edge)
+  chroma: 0.05,         // Chromatic aberration intensity
+  tint: 'rgba(255, 255, 255, 0.06)', // Glass tint color
+  glint: 0.4            // Specular highlight brightness on top-left edge
+});
+
+// Start the requestAnimationFrame rendering loop
+glass.start();
+```
+
+### 2. Pass Mode (Custom WebGL Pipeline Integration)
+
+For projects with their own WebGL contexts (like custom Three.js/PixiJS post-processing passes), Pass Mode renders the liquid glass quads directly into your active framebuffer.
+
+```typescript
+import { createLiquidGlassPass } from 'liquid-glass-canvas';
+
+// 1. Initialize the pass with a WebGL context
+const pass = createLiquidGlassPass(gl, { maxLenses: 16 });
+
+// 2. In your render loop:
+function render() {
+  // ... Draw background scene to a texture (sourceTexture) ...
+
+  // Render refraction quads
+  pass.render({
+    sourceTexture: mySceneTexture,
+    resolution: [viewportWidth, viewportHeight],
+    lenses: [
+      {
+        x: 100,
+        y: 150,
+        width: 300,
+        height: 200,
+        radius: 24,
+        depth: 80,
+        feather: 16,
+        curve: 2.0,
+        chroma: 0.05,
+        tint: [1.0, 1.0, 1.0, 0.06], // Normalized RGBA [r, g, b, a]
+        glint: 0.4
+      }
+    ]
+  });
+}
+```
+
+---
+
+## API Reference
+
+### `createCanvasLiquidGlass(options)`
+
+Initializes an Overlay Mode instance.
+
+- **Options:**
+  - `source`: `HTMLCanvasElement` (The underlying canvas containing background graphics)
+  - `container`: `HTMLElement` (The common parent containing the source canvas and the DOM overlay lenses)
+  - `dpr`: `number | 'auto'` (Default: `'auto'`. Output resolution scaling factor)
+  - `quality`: `'auto' | 'high' | 'low'` (Default: `'auto'`. High quality enables chromatic aberration; low quality disables it for better performance)
+
+#### Instance Methods:
+
+- **`glass.registerLens(target, options)`**
+  Tracks a DOM element as a lens. Matches layout positions relative to the container.
+- **`glass.registerRectLens(rect, options)`**
+  Creates a static lens defined by manual coordinates `{ x, y, width, height }`. Returns a unique `symbol` ID.
+- **`glass.unregisterLens(target)`**
+  Removes a registered element or static rect lens (using its `symbol` ID).
+- **`glass.updateLens(target, options)`**
+  Updates settings dynamically for a registered element or rect lens.
+- **`glass.start()`**
+  Starts the automatic requestAnimationFrame loop to render overlays and track layouts.
+- **`glass.tick()`**
+  Manually triggers a single frame render. Useful if you want to drive the rendering using your own animation loop.
+- **`glass.stop()`**
+  Pauses the automatic rendering loop.
+- **`glass.destroy()`**
+  Stops rendering, detaches resize listeners, deletes internal WebGL resources, and removes the overlay canvas from the DOM.
+
+---
+
+## Performance & Technical Tradeoffs
+
+### 1. No Blur Effects
+Typical "frosted glass" effects require Gaussian Blur or Box Blur, which involve multiple texture lookups and render passes. Doing this in real-time as an overlay synchronized with complex background canvases is highly resource-intensive (especially on mobile). By prioritizing crisp optical refraction, normal-based displacement, tinting, and glints, Liquid Glass Canvas delivers a premium glass aesthetic at a fraction of the performance cost.
+
+### 2. CORS and Canvas Tainting
+Because this library uploads the source canvas to WebGL using `texImage2D`, the source canvas must not be **tainted**. If your source canvas draws images or videos from a different origin, ensure those resources are served with appropriate CORS headers (`Access-Control-Allow-Origin`) and loaded with `crossOrigin = "anonymous"`.
+
+---
+
+## License
+
+MIT

package/dist/adapters/overlay.d.ts

@@ -0,0 +1,2 @@
+import { CanvasLiquidGlassOptions, LiquidGlassInstance } from '../types';
+export declare function createCanvasLiquidGlass(options: CanvasLiquidGlassOptions): LiquidGlassInstance;

package/dist/adapters/pass.d.ts

@@ -0,0 +1,2 @@
+import { PassOptions, LiquidGlassPassInstance } from '../types';
+export declare function createLiquidGlassPass(gl: WebGLRenderingContext, _options?: PassOptions): LiquidGlassPassInstance;

package/dist/core/LensRegistry.d.ts

@@ -0,0 +1,15 @@
+import { LensOptions, RectLensDef } from '../types';
+export declare class LensRegistry {
+    private elementLenses;
+    private rectLenses;
+    registerElement(element: HTMLElement, options?: LensOptions): void;
+    registerRect(rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } & LensOptions): symbol;
+    unregister(target: HTMLElement | symbol): void;
+    update(target: HTMLElement | symbol, options: Partial<LensOptions>): void;
+    getActiveLenses(container: HTMLElement): RectLensDef[];
+}

package/dist/core/defaults.d.ts

@@ -0,0 +1,2 @@
+import { LensOptions } from '../types';
+export declare const DEFAULT_LENS_OPTIONS: Required<LensOptions>;

package/dist/core/measure.d.ts

@@ -0,0 +1,8 @@
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function measureElement(element: HTMLElement, container: HTMLElement): Rect;
+export declare function parseColor(color: string | [number, number, number, number]): [number, number, number, number];

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export { createCanvasLiquidGlass } from './adapters/overlay';
+export { createLiquidGlassPass } from './adapters/pass';

package/dist/liquid-glass-canvas.css

@@ -0,0 +1,2 @@
+.liquid-glass-overlay{pointer-events:none;z-index:5;transform-origin:0 0;position:absolute;top:0;left:0}
+/*$vite$:1*/

package/dist/liquid-glass-canvas.mjs

@@ -0,0 +1,332 @@
+//#region src/core/defaults.ts
+var e = {
+	radius: 16,
+	depth: 50,
+	feather: 16,
+	curve: 2,
+	chroma: 0,
+	tint: [
+		1,
+		1,
+		1,
+		.05
+	],
+	glint: .2
+};
+//#endregion
+//#region src/core/measure.ts
+function t(e, t) {
+	let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+	return {
+		x: n.left - r.left,
+		y: n.top - r.top,
+		width: n.width,
+		height: n.height
+	};
+}
+var n = /* @__PURE__ */ new Map();
+function r(e) {
+	if (Array.isArray(e)) return e;
+	let t = n.get(e);
+	if (t) return t;
+	let r = document.createElement("div");
+	r.style.color = e, r.style.display = "none", document.body.appendChild(r);
+	let i = getComputedStyle(r).color;
+	document.body.removeChild(r);
+	let a = i.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/);
+	if (a) {
+		let t = [
+			parseInt(a[1], 10) / 255,
+			parseInt(a[2], 10) / 255,
+			parseInt(a[3], 10) / 255,
+			a[4] === void 0 ? 1 : parseFloat(a[4])
+		];
+		return n.set(e, t), t;
+	}
+	let o = [
+		1,
+		1,
+		1,
+		1
+	];
+	return n.set(e, o), o;
+}
+//#endregion
+//#region src/core/LensRegistry.ts
+var i = class {
+	elementLenses = /* @__PURE__ */ new Map();
+	rectLenses = /* @__PURE__ */ new Map();
+	registerElement(t, n) {
+		this.elementLenses.set(t, {
+			...e,
+			...n
+		});
+	}
+	registerRect(t) {
+		let n = Symbol(), i = {
+			...e,
+			...t
+		};
+		return this.rectLenses.set(n, {
+			x: t.x,
+			y: t.y,
+			width: t.width,
+			height: t.height,
+			radius: i.radius,
+			depth: i.depth,
+			feather: i.feather,
+			curve: i.curve,
+			chroma: i.chroma,
+			tint: r(i.tint),
+			glint: i.glint
+		}), n;
+	}
+	unregister(e) {
+		typeof e == "symbol" ? this.rectLenses.delete(e) : this.elementLenses.delete(e);
+	}
+	update(e, t) {
+		if (typeof e == "symbol") {
+			let n = this.rectLenses.get(e);
+			if (n) {
+				let i = t.tint ? r(t.tint) : n.tint;
+				this.rectLenses.set(e, {
+					...n,
+					...t,
+					tint: i
+				});
+			}
+		} else {
+			let n = this.elementLenses.get(e);
+			n && this.elementLenses.set(e, {
+				...n,
+				...t
+			});
+		}
+	}
+	getActiveLenses(e) {
+		let n = [];
+		for (let [i, a] of this.elementLenses.entries()) {
+			let o = t(i, e);
+			n.push({
+				x: o.x,
+				y: o.y,
+				width: o.width,
+				height: o.height,
+				radius: a.radius,
+				depth: a.depth,
+				feather: a.feather,
+				curve: a.curve,
+				chroma: a.chroma,
+				tint: r(a.tint),
+				glint: a.glint
+			});
+		}
+		for (let e of this.rectLenses.values()) n.push(e);
+		return n;
+	}
+};
+//#endregion
+//#region src/webgl/createContext.ts
+function a(e) {
+	let t = e.getContext("webgl", {
+		alpha: !0,
+		depth: !1,
+		stencil: !1,
+		antialias: !1,
+		premultipliedAlpha: !0,
+		preserveDrawingBuffer: !1
+	}) || e.getContext("experimental-webgl");
+	if (!t) throw Error("WebGL not supported");
+	return t;
+}
+//#endregion
+//#region src/webgl/TextureSource.ts
+var o = class {
+	gl;
+	texture;
+	constructor(e) {
+		this.gl = e;
+		let t = e.createTexture();
+		if (!t) throw Error("Could not create texture");
+		this.texture = t, e.bindTexture(e.TEXTURE_2D, this.texture), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.LINEAR), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.LINEAR), e.bindTexture(e.TEXTURE_2D, null);
+	}
+	update(e) {
+		let t = this.gl;
+		t.bindTexture(t.TEXTURE_2D, this.texture), t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL, !0), t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, e), t.bindTexture(t.TEXTURE_2D, null);
+	}
+	getTexture() {
+		return this.texture;
+	}
+	destroy() {
+		this.gl.deleteTexture(this.texture);
+	}
+};
+//#endregion
+//#region src/webgl/createProgram.ts
+function s(e, t, n) {
+	let r = e.createShader(t);
+	if (!r) throw Error("Could not create shader");
+	if (e.shaderSource(r, n), e.compileShader(r), !e.getShaderParameter(r, e.COMPILE_STATUS)) {
+		let t = e.getShaderInfoLog(r);
+		throw e.deleteShader(r), Error(`Shader compilation failed: ${t}`);
+	}
+	return r;
+}
+function c(e, t, n) {
+	let r = s(e, e.VERTEX_SHADER, t), i = s(e, e.FRAGMENT_SHADER, n), a = e.createProgram();
+	if (!a) throw Error("Could not create program");
+	if (e.attachShader(a, r), e.attachShader(a, i), e.linkProgram(a), !e.getProgramParameter(a, e.LINK_STATUS)) {
+		let t = e.getProgramInfoLog(a);
+		throw e.deleteProgram(a), Error(`Program linking failed: ${t}`);
+	}
+	return e.deleteShader(r), e.deleteShader(i), a;
+}
+//#endregion
+//#region src/webgl/createQuad.ts
+function l(e, t) {
+	let n = new Float32Array([
+		-1,
+		-1,
+		1,
+		-1,
+		-1,
+		1,
+		-1,
+		1,
+		1,
+		-1,
+		1,
+		1
+	]), r = e.createBuffer();
+	if (!r) throw Error("Could not create buffer");
+	e.bindBuffer(e.ARRAY_BUFFER, r), e.bufferData(e.ARRAY_BUFFER, n, e.STATIC_DRAW);
+	let i = e.getExtension("OES_vertex_array_object"), a = null, o = e.getAttribLocation(t, "a_position");
+	return i && (a = i.createVertexArrayOES(), i.bindVertexArrayOES(a), e.bindBuffer(e.ARRAY_BUFFER, r), e.enableVertexAttribArray(o), e.vertexAttribPointer(o, 2, e.FLOAT, !1, 0, 0), i.bindVertexArrayOES(null)), {
+		buffer: r,
+		vao: a,
+		draw: () => {
+			i && a ? (i.bindVertexArrayOES(a), e.drawArrays(e.TRIANGLES, 0, 6), i.bindVertexArrayOES(null)) : (e.bindBuffer(e.ARRAY_BUFFER, r), e.enableVertexAttribArray(o), e.vertexAttribPointer(o, 2, e.FLOAT, !1, 0, 0), e.drawArrays(e.TRIANGLES, 0, 6));
+		},
+		destroy: () => {
+			e.deleteBuffer(r), i && a && i.deleteVertexArrayOES(a);
+		}
+	};
+}
+//#endregion
+//#region src/shaders/liquidGlass.vert.ts
+var u = "\nattribute vec2 a_position;\nvarying vec2 v_uv;\n\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  // flip Y since WebGL textures have origin at bottom-left, but DOM uses top-left\n  // Actually, we'll handle the flip when we upload the texture via gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n", d = "\nprecision mediump float;\n\nvarying vec2 v_uv;\n\nuniform sampler2D u_source;\nuniform vec2 u_resolution;\nuniform vec4 u_lensRect;    // x, y, width, height (in pixels)\nuniform vec4 u_lensParams1; // radius, depth, feather, curve\nuniform vec4 u_lensParams2; // chroma, glint, unused, unused\nuniform vec4 u_lensTint;    // r, g, b, a\n\n// Rounded rectangle SDF\nfloat sdRoundRect(vec2 p, vec2 b, float r) {\n  vec2 d = abs(p) - b + vec2(r);\n  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;\n}\n\n// Get outward normal from rounded rectangle\nvec2 getNormal(vec2 p, vec2 b, float r) {\n  vec2 d = abs(p) - b + vec2(r);\n  if (d.x <= 0.0 && d.y <= 0.0) return vec2(0.0);\n  return sign(p) * normalize(max(d, 0.0));\n}\n\nvoid main() {\n  vec2 fragCoord = v_uv * u_resolution;\n  // flip Y back since fragCoord Y is 0 at bottom, but our DOM coordinates are 0 at top.\n  // Wait, if we flip Y during texture upload and the canvas is fullscreen, \n  // v_uv is bottom-up (0,0 bottom-left).\n  // u_lensRect uses top-left as origin (DOM coords).\n  // So we must convert DOM Y to GL Y:\n  float glY = u_resolution.y - fragCoord.y;\n  vec2 pxCoords = vec2(fragCoord.x, glY);\n\n  // Center of the lens\n  vec2 lensCenter = u_lensRect.xy + u_lensRect.zw * 0.5;\n  vec2 p = pxCoords - lensCenter;\n  \n  // Half extents\n  vec2 b = u_lensRect.zw * 0.5;\n  \n  float radius = u_lensParams1.x;\n  float depth = u_lensParams1.y;\n  float feather = u_lensParams1.z;\n  float curve = u_lensParams1.w;\n  \n  float chroma = u_lensParams2.x;\n  float glint = u_lensParams2.y;\n\n  // Compute SDF\n  float dist = sdRoundRect(p, b, radius);\n  \n  // Discard fragments outside the rounded rect\n  if (dist > 0.0) {\n    discard;\n  }\n\n  // Calculate edge effect amount\n  // dist goes from -b to 0 at the edge. \n  // We want the effect to happen within 'feather' pixels from the edge.\n  // So when dist is -feather, edge=0. When dist is 0, edge=1.\n  float edge = clamp((dist + feather) / feather, 0.0, 1.0);\n  \n  // Apply curve. \n  float amount = pow(edge, curve);\n\n  // Normal for displacement\n  vec2 normal = getNormal(p, b, radius);\n  \n  // Notice we must map the pixel normal back to UV space for offset.\n  // We negate the Y normal because UV Y goes up, but DOM Y goes down.\n  vec2 uvOffset = vec2(normal.x, -normal.y) * amount * (depth / u_resolution);\n  vec2 sampleUv = v_uv - uvOffset;\n\n  vec4 color;\n  if (chroma > 0.0) {\n    float cOffset = chroma * amount;\n    // slightly different offsets for RGB\n    vec2 offsetR = vec2(normal.x, -normal.y) * amount * ((depth + cOffset) / u_resolution);\n    vec2 offsetG = uvOffset;\n    vec2 offsetB = vec2(normal.x, -normal.y) * amount * ((depth - cOffset) / u_resolution);\n    \n    float rColor = texture2D(u_source, v_uv - offsetR).r;\n    float gColor = texture2D(u_source, v_uv - offsetG).g;\n    float bColor = texture2D(u_source, v_uv - offsetB).b;\n    float aColor = texture2D(u_source, sampleUv).a;\n    color = vec4(rColor, gColor, bColor, aColor);\n  } else {\n    color = texture2D(u_source, sampleUv);\n  }\n\n  // Apply tint\n  color.rgb = mix(color.rgb, u_lensTint.rgb, u_lensTint.a);\n\n  // Apply glint (simple specular-like highlight on the top-left edge)\n  // We can use the normal and dot product with a light vector\n  vec2 lightDir = normalize(vec2(-1.0, -1.0)); // coming from top-left in DOM space\n  float specular = max(dot(normal, lightDir), 0.0);\n  // sharpen specular\n  specular = pow(specular, 4.0) * amount;\n  \n  color.rgb += vec3(specular * glint);\n\n  gl_FragColor = color;\n}\n", f = class {
+	gl;
+	program;
+	quad;
+	locations;
+	constructor(e) {
+		this.gl = e, this.program = c(e, u, d), this.quad = l(e, this.program), this.locations = {
+			u_source: e.getUniformLocation(this.program, "u_source"),
+			u_resolution: e.getUniformLocation(this.program, "u_resolution"),
+			u_lensRect: e.getUniformLocation(this.program, "u_lensRect"),
+			u_lensParams1: e.getUniformLocation(this.program, "u_lensParams1"),
+			u_lensParams2: e.getUniformLocation(this.program, "u_lensParams2"),
+			u_lensTint: e.getUniformLocation(this.program, "u_lensTint")
+		};
+	}
+	render(e) {
+		let t = this.gl;
+		t.useProgram(this.program), t.viewport(0, 0, e.resolution[0], e.resolution[1]), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, e.sourceTexture), this.locations.u_source && t.uniform1i(this.locations.u_source, 0), this.locations.u_resolution && t.uniform2f(this.locations.u_resolution, e.resolution[0], e.resolution[1]), t.enable(t.BLEND), t.blendFunc(t.ONE, t.ONE_MINUS_SRC_ALPHA);
+		for (let n of e.lenses) this.locations.u_lensRect && t.uniform4f(this.locations.u_lensRect, n.x, n.y, n.width, n.height), this.locations.u_lensParams1 && t.uniform4f(this.locations.u_lensParams1, n.radius, n.depth, n.feather, n.curve), this.locations.u_lensParams2 && t.uniform4f(this.locations.u_lensParams2, n.chroma, n.glint, 0, 0), this.locations.u_lensTint && t.uniform4f(this.locations.u_lensTint, n.tint[0], n.tint[1], n.tint[2], n.tint[3]), this.quad.draw();
+		t.disable(t.BLEND);
+	}
+	destroy() {
+		this.quad.destroy(), this.gl.deleteProgram(this.program);
+	}
+}, p = class {
+	overlay;
+	gl;
+	textureSource;
+	pass;
+	registry = new i();
+	source;
+	container;
+	dpr;
+	quality;
+	rafId = 0;
+	isRunning = !1;
+	constructor(e) {
+		this.source = e.source, this.container = e.container, this.dpr = e.dpr || "auto", this.quality = e.quality || "auto", this.overlay = document.createElement("canvas"), this.overlay.className = "liquid-glass-overlay", this.overlay.style.position = "absolute", this.overlay.style.top = "0", this.overlay.style.left = "0", this.overlay.style.pointerEvents = "none", getComputedStyle(this.container).position === "static" && (this.container.style.position = "relative"), this.container.appendChild(this.overlay), this.gl = a(this.overlay), this.textureSource = new o(this.gl), this.pass = new f(this.gl), this.resize = this.resize.bind(this), window.addEventListener("resize", this.resize), this.resize();
+	}
+	getActiveQuality() {
+		let e = this.quality;
+		return e === "auto" && (e = typeof navigator < "u" && /Mobi|Android|iPhone/i.test(navigator.userAgent) ? "low" : "high"), e;
+	}
+	resize() {
+		let e = this.container.getBoundingClientRect(), t = this.getActiveQuality(), n = this.dpr === "auto" ? window.devicePixelRatio || 1 : this.dpr;
+		n = t === "low" ? Math.min(n, 1) : Math.min(n, 2), this.overlay.width = e.width * n, this.overlay.height = e.height * n, this.overlay.style.width = `${e.width}px`, this.overlay.style.height = `${e.height}px`;
+	}
+	registerLens(e, t) {
+		this.registry.registerElement(e, t);
+	}
+	registerRectLens(e, t) {
+		return this.registry.registerRect({
+			...e,
+			...t
+		});
+	}
+	unregisterLens(e) {
+		this.registry.unregister(e);
+	}
+	updateLens(e, t) {
+		this.registry.update(e, t);
+	}
+	start() {
+		if (this.isRunning) return;
+		this.isRunning = !0;
+		let e = () => {
+			this.tick(), this.isRunning && (this.rafId = requestAnimationFrame(e));
+		};
+		e();
+	}
+	stop() {
+		this.isRunning = !1, cancelAnimationFrame(this.rafId);
+	}
+	tick() {
+		let e = this.registry.getActiveLenses(this.container);
+		if (e.length === 0) {
+			this.gl.clearColor(0, 0, 0, 0), this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+			return;
+		}
+		let t = this.getActiveQuality(), n = t === "low" ? 4 : 16;
+		e.length > n && (e = e.slice(0, n)), this.textureSource.update(this.source);
+		let r = this.dpr === "auto" ? window.devicePixelRatio || 1 : this.dpr;
+		r = t === "low" ? Math.min(r, 1) : Math.min(r, 2);
+		let i = e.map((e) => ({
+			...e,
+			x: e.x * r,
+			y: e.y * r,
+			width: e.width * r,
+			height: e.height * r,
+			radius: e.radius * r,
+			feather: e.feather * r,
+			depth: e.depth * r,
+			chroma: t === "low" ? 0 : e.chroma
+		}));
+		this.gl.clearColor(0, 0, 0, 0), this.gl.clear(this.gl.COLOR_BUFFER_BIT), this.pass.render({
+			sourceTexture: this.textureSource.getTexture(),
+			resolution: [this.overlay.width, this.overlay.height],
+			lenses: i
+		});
+	}
+	destroy() {
+		this.stop(), window.removeEventListener("resize", this.resize), this.pass.destroy(), this.textureSource.destroy(), this.overlay.parentNode && this.overlay.parentNode.removeChild(this.overlay);
+	}
+};
+//#endregion
+//#region src/adapters/overlay.ts
+function m(e) {
+	return new p(e);
+}
+//#endregion
+//#region src/adapters/pass.ts
+function h(e, t) {
+	return new f(e);
+}
+//#endregion
+export { m as createCanvasLiquidGlass, h as createLiquidGlassPass };

package/dist/liquid-glass-canvas.umd.js

@@ -0,0 +1,117 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.LiquidGlassCanvas={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={radius:16,depth:50,feather:16,curve:2,chroma:0,tint:[1,1,1,.05],glint:.2};function n(e,t){let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:n.left-r.left,y:n.top-r.top,width:n.width,height:n.height}}var r=new Map;function i(e){if(Array.isArray(e))return e;let t=r.get(e);if(t)return t;let n=document.createElement(`div`);n.style.color=e,n.style.display=`none`,document.body.appendChild(n);let i=getComputedStyle(n).color;document.body.removeChild(n);let a=i.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/);if(a){let t=[parseInt(a[1],10)/255,parseInt(a[2],10)/255,parseInt(a[3],10)/255,a[4]===void 0?1:parseFloat(a[4])];return r.set(e,t),t}let o=[1,1,1,1];return r.set(e,o),o}var a=class{elementLenses=new Map;rectLenses=new Map;registerElement(e,n){this.elementLenses.set(e,{...t,...n})}registerRect(e){let n=Symbol(),r={...t,...e};return this.rectLenses.set(n,{x:e.x,y:e.y,width:e.width,height:e.height,radius:r.radius,depth:r.depth,feather:r.feather,curve:r.curve,chroma:r.chroma,tint:i(r.tint),glint:r.glint}),n}unregister(e){typeof e==`symbol`?this.rectLenses.delete(e):this.elementLenses.delete(e)}update(e,t){if(typeof e==`symbol`){let n=this.rectLenses.get(e);if(n){let r=t.tint?i(t.tint):n.tint;this.rectLenses.set(e,{...n,...t,tint:r})}}else{let n=this.elementLenses.get(e);n&&this.elementLenses.set(e,{...n,...t})}}getActiveLenses(e){let t=[];for(let[r,a]of this.elementLenses.entries()){let o=n(r,e);t.push({x:o.x,y:o.y,width:o.width,height:o.height,radius:a.radius,depth:a.depth,feather:a.feather,curve:a.curve,chroma:a.chroma,tint:i(a.tint),glint:a.glint})}for(let e of this.rectLenses.values())t.push(e);return t}};function o(e){let t=e.getContext(`webgl`,{alpha:!0,depth:!1,stencil:!1,antialias:!1,premultipliedAlpha:!0,preserveDrawingBuffer:!1})||e.getContext(`experimental-webgl`);if(!t)throw Error(`WebGL not supported`);return t}var s=class{gl;texture;constructor(e){this.gl=e;let t=e.createTexture();if(!t)throw Error(`Could not create texture`);this.texture=t,e.bindTexture(e.TEXTURE_2D,this.texture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.bindTexture(e.TEXTURE_2D,null)}update(e){let t=this.gl;t.bindTexture(t.TEXTURE_2D,this.texture),t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL,!0),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,e),t.bindTexture(t.TEXTURE_2D,null)}getTexture(){return this.texture}destroy(){this.gl.deleteTexture(this.texture)}};function c(e,t,n){let r=e.createShader(t);if(!r)throw Error(`Could not create shader`);if(e.shaderSource(r,n),e.compileShader(r),!e.getShaderParameter(r,e.COMPILE_STATUS)){let t=e.getShaderInfoLog(r);throw e.deleteShader(r),Error(`Shader compilation failed: ${t}`)}return r}function l(e,t,n){let r=c(e,e.VERTEX_SHADER,t),i=c(e,e.FRAGMENT_SHADER,n),a=e.createProgram();if(!a)throw Error(`Could not create program`);if(e.attachShader(a,r),e.attachShader(a,i),e.linkProgram(a),!e.getProgramParameter(a,e.LINK_STATUS)){let t=e.getProgramInfoLog(a);throw e.deleteProgram(a),Error(`Program linking failed: ${t}`)}return e.deleteShader(r),e.deleteShader(i),a}function u(e,t){let n=new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),r=e.createBuffer();if(!r)throw Error(`Could not create buffer`);e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,n,e.STATIC_DRAW);let i=e.getExtension(`OES_vertex_array_object`),a=null,o=e.getAttribLocation(t,`a_position`);return i&&(a=i.createVertexArrayOES(),i.bindVertexArrayOES(a),e.bindBuffer(e.ARRAY_BUFFER,r),e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,0,0),i.bindVertexArrayOES(null)),{buffer:r,vao:a,draw:()=>{i&&a?(i.bindVertexArrayOES(a),e.drawArrays(e.TRIANGLES,0,6),i.bindVertexArrayOES(null)):(e.bindBuffer(e.ARRAY_BUFFER,r),e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,0,0),e.drawArrays(e.TRIANGLES,0,6))},destroy:()=>{e.deleteBuffer(r),i&&a&&i.deleteVertexArrayOES(a)}}}var d=`
+attribute vec2 a_position;
+varying vec2 v_uv;
+
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  // flip Y since WebGL textures have origin at bottom-left, but DOM uses top-left
+  // Actually, we'll handle the flip when we upload the texture via gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`,f=`
+precision mediump float;
+
+varying vec2 v_uv;
+
+uniform sampler2D u_source;
+uniform vec2 u_resolution;
+uniform vec4 u_lensRect;    // x, y, width, height (in pixels)
+uniform vec4 u_lensParams1; // radius, depth, feather, curve
+uniform vec4 u_lensParams2; // chroma, glint, unused, unused
+uniform vec4 u_lensTint;    // r, g, b, a
+
+// Rounded rectangle SDF
+float sdRoundRect(vec2 p, vec2 b, float r) {
+  vec2 d = abs(p) - b + vec2(r);
+  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;
+}
+
+// Get outward normal from rounded rectangle
+vec2 getNormal(vec2 p, vec2 b, float r) {
+  vec2 d = abs(p) - b + vec2(r);
+  if (d.x <= 0.0 && d.y <= 0.0) return vec2(0.0);
+  return sign(p) * normalize(max(d, 0.0));
+}
+
+void main() {
+  vec2 fragCoord = v_uv * u_resolution;
+  // flip Y back since fragCoord Y is 0 at bottom, but our DOM coordinates are 0 at top.
+  // Wait, if we flip Y during texture upload and the canvas is fullscreen, 
+  // v_uv is bottom-up (0,0 bottom-left).
+  // u_lensRect uses top-left as origin (DOM coords).
+  // So we must convert DOM Y to GL Y:
+  float glY = u_resolution.y - fragCoord.y;
+  vec2 pxCoords = vec2(fragCoord.x, glY);
+
+  // Center of the lens
+  vec2 lensCenter = u_lensRect.xy + u_lensRect.zw * 0.5;
+  vec2 p = pxCoords - lensCenter;
+  
+  // Half extents
+  vec2 b = u_lensRect.zw * 0.5;
+  
+  float radius = u_lensParams1.x;
+  float depth = u_lensParams1.y;
+  float feather = u_lensParams1.z;
+  float curve = u_lensParams1.w;
+  
+  float chroma = u_lensParams2.x;
+  float glint = u_lensParams2.y;
+
+  // Compute SDF
+  float dist = sdRoundRect(p, b, radius);
+  
+  // Discard fragments outside the rounded rect
+  if (dist > 0.0) {
+    discard;
+  }
+
+  // Calculate edge effect amount
+  // dist goes from -b to 0 at the edge. 
+  // We want the effect to happen within 'feather' pixels from the edge.
+  // So when dist is -feather, edge=0. When dist is 0, edge=1.
+  float edge = clamp((dist + feather) / feather, 0.0, 1.0);
+  
+  // Apply curve. 
+  float amount = pow(edge, curve);
+
+  // Normal for displacement
+  vec2 normal = getNormal(p, b, radius);
+  
+  // Notice we must map the pixel normal back to UV space for offset.
+  // We negate the Y normal because UV Y goes up, but DOM Y goes down.
+  vec2 uvOffset = vec2(normal.x, -normal.y) * amount * (depth / u_resolution);
+  vec2 sampleUv = v_uv - uvOffset;
+
+  vec4 color;
+  if (chroma > 0.0) {
+    float cOffset = chroma * amount;
+    // slightly different offsets for RGB
+    vec2 offsetR = vec2(normal.x, -normal.y) * amount * ((depth + cOffset) / u_resolution);
+    vec2 offsetG = uvOffset;
+    vec2 offsetB = vec2(normal.x, -normal.y) * amount * ((depth - cOffset) / u_resolution);
+    
+    float rColor = texture2D(u_source, v_uv - offsetR).r;
+    float gColor = texture2D(u_source, v_uv - offsetG).g;
+    float bColor = texture2D(u_source, v_uv - offsetB).b;
+    float aColor = texture2D(u_source, sampleUv).a;
+    color = vec4(rColor, gColor, bColor, aColor);
+  } else {
+    color = texture2D(u_source, sampleUv);
+  }
+
+  // Apply tint
+  color.rgb = mix(color.rgb, u_lensTint.rgb, u_lensTint.a);
+
+  // Apply glint (simple specular-like highlight on the top-left edge)
+  // We can use the normal and dot product with a light vector
+  vec2 lightDir = normalize(vec2(-1.0, -1.0)); // coming from top-left in DOM space
+  float specular = max(dot(normal, lightDir), 0.0);
+  // sharpen specular
+  specular = pow(specular, 4.0) * amount;
+  
+  color.rgb += vec3(specular * glint);
+
+  gl_FragColor = color;
+}
+`,p=class{gl;program;quad;locations;constructor(e){this.gl=e,this.program=l(e,d,f),this.quad=u(e,this.program),this.locations={u_source:e.getUniformLocation(this.program,`u_source`),u_resolution:e.getUniformLocation(this.program,`u_resolution`),u_lensRect:e.getUniformLocation(this.program,`u_lensRect`),u_lensParams1:e.getUniformLocation(this.program,`u_lensParams1`),u_lensParams2:e.getUniformLocation(this.program,`u_lensParams2`),u_lensTint:e.getUniformLocation(this.program,`u_lensTint`)}}render(e){let t=this.gl;t.useProgram(this.program),t.viewport(0,0,e.resolution[0],e.resolution[1]),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,e.sourceTexture),this.locations.u_source&&t.uniform1i(this.locations.u_source,0),this.locations.u_resolution&&t.uniform2f(this.locations.u_resolution,e.resolution[0],e.resolution[1]),t.enable(t.BLEND),t.blendFunc(t.ONE,t.ONE_MINUS_SRC_ALPHA);for(let n of e.lenses)this.locations.u_lensRect&&t.uniform4f(this.locations.u_lensRect,n.x,n.y,n.width,n.height),this.locations.u_lensParams1&&t.uniform4f(this.locations.u_lensParams1,n.radius,n.depth,n.feather,n.curve),this.locations.u_lensParams2&&t.uniform4f(this.locations.u_lensParams2,n.chroma,n.glint,0,0),this.locations.u_lensTint&&t.uniform4f(this.locations.u_lensTint,n.tint[0],n.tint[1],n.tint[2],n.tint[3]),this.quad.draw();t.disable(t.BLEND)}destroy(){this.quad.destroy(),this.gl.deleteProgram(this.program)}},m=class{overlay;gl;textureSource;pass;registry=new a;source;container;dpr;quality;rafId=0;isRunning=!1;constructor(e){this.source=e.source,this.container=e.container,this.dpr=e.dpr||`auto`,this.quality=e.quality||`auto`,this.overlay=document.createElement(`canvas`),this.overlay.className=`liquid-glass-overlay`,this.overlay.style.position=`absolute`,this.overlay.style.top=`0`,this.overlay.style.left=`0`,this.overlay.style.pointerEvents=`none`,getComputedStyle(this.container).position===`static`&&(this.container.style.position=`relative`),this.container.appendChild(this.overlay),this.gl=o(this.overlay),this.textureSource=new s(this.gl),this.pass=new p(this.gl),this.resize=this.resize.bind(this),window.addEventListener(`resize`,this.resize),this.resize()}getActiveQuality(){let e=this.quality;return e===`auto`&&(e=typeof navigator<`u`&&/Mobi|Android|iPhone/i.test(navigator.userAgent)?`low`:`high`),e}resize(){let e=this.container.getBoundingClientRect(),t=this.getActiveQuality(),n=this.dpr===`auto`?window.devicePixelRatio||1:this.dpr;n=t===`low`?Math.min(n,1):Math.min(n,2),this.overlay.width=e.width*n,this.overlay.height=e.height*n,this.overlay.style.width=`${e.width}px`,this.overlay.style.height=`${e.height}px`}registerLens(e,t){this.registry.registerElement(e,t)}registerRectLens(e,t){return this.registry.registerRect({...e,...t})}unregisterLens(e){this.registry.unregister(e)}updateLens(e,t){this.registry.update(e,t)}start(){if(this.isRunning)return;this.isRunning=!0;let e=()=>{this.tick(),this.isRunning&&(this.rafId=requestAnimationFrame(e))};e()}stop(){this.isRunning=!1,cancelAnimationFrame(this.rafId)}tick(){let e=this.registry.getActiveLenses(this.container);if(e.length===0){this.gl.clearColor(0,0,0,0),this.gl.clear(this.gl.COLOR_BUFFER_BIT);return}let t=this.getActiveQuality(),n=t===`low`?4:16;e.length>n&&(e=e.slice(0,n)),this.textureSource.update(this.source);let r=this.dpr===`auto`?window.devicePixelRatio||1:this.dpr;r=t===`low`?Math.min(r,1):Math.min(r,2);let i=e.map(e=>({...e,x:e.x*r,y:e.y*r,width:e.width*r,height:e.height*r,radius:e.radius*r,feather:e.feather*r,depth:e.depth*r,chroma:t===`low`?0:e.chroma}));this.gl.clearColor(0,0,0,0),this.gl.clear(this.gl.COLOR_BUFFER_BIT),this.pass.render({sourceTexture:this.textureSource.getTexture(),resolution:[this.overlay.width,this.overlay.height],lenses:i})}destroy(){this.stop(),window.removeEventListener(`resize`,this.resize),this.pass.destroy(),this.textureSource.destroy(),this.overlay.parentNode&&this.overlay.parentNode.removeChild(this.overlay)}};function h(e){return new m(e)}function g(e,t){return new p(e)}e.createCanvasLiquidGlass=h,e.createLiquidGlassPass=g});

package/dist/shaders/liquidGlass.frag.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShader = "\nprecision mediump float;\n\nvarying vec2 v_uv;\n\nuniform sampler2D u_source;\nuniform vec2 u_resolution;\nuniform vec4 u_lensRect;    // x, y, width, height (in pixels)\nuniform vec4 u_lensParams1; // radius, depth, feather, curve\nuniform vec4 u_lensParams2; // chroma, glint, unused, unused\nuniform vec4 u_lensTint;    // r, g, b, a\n\n// Rounded rectangle SDF\nfloat sdRoundRect(vec2 p, vec2 b, float r) {\n  vec2 d = abs(p) - b + vec2(r);\n  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;\n}\n\n// Get outward normal from rounded rectangle\nvec2 getNormal(vec2 p, vec2 b, float r) {\n  vec2 d = abs(p) - b + vec2(r);\n  if (d.x <= 0.0 && d.y <= 0.0) return vec2(0.0);\n  return sign(p) * normalize(max(d, 0.0));\n}\n\nvoid main() {\n  vec2 fragCoord = v_uv * u_resolution;\n  // flip Y back since fragCoord Y is 0 at bottom, but our DOM coordinates are 0 at top.\n  // Wait, if we flip Y during texture upload and the canvas is fullscreen, \n  // v_uv is bottom-up (0,0 bottom-left).\n  // u_lensRect uses top-left as origin (DOM coords).\n  // So we must convert DOM Y to GL Y:\n  float glY = u_resolution.y - fragCoord.y;\n  vec2 pxCoords = vec2(fragCoord.x, glY);\n\n  // Center of the lens\n  vec2 lensCenter = u_lensRect.xy + u_lensRect.zw * 0.5;\n  vec2 p = pxCoords - lensCenter;\n  \n  // Half extents\n  vec2 b = u_lensRect.zw * 0.5;\n  \n  float radius = u_lensParams1.x;\n  float depth = u_lensParams1.y;\n  float feather = u_lensParams1.z;\n  float curve = u_lensParams1.w;\n  \n  float chroma = u_lensParams2.x;\n  float glint = u_lensParams2.y;\n\n  // Compute SDF\n  float dist = sdRoundRect(p, b, radius);\n  \n  // Discard fragments outside the rounded rect\n  if (dist > 0.0) {\n    discard;\n  }\n\n  // Calculate edge effect amount\n  // dist goes from -b to 0 at the edge. \n  // We want the effect to happen within 'feather' pixels from the edge.\n  // So when dist is -feather, edge=0. When dist is 0, edge=1.\n  float edge = clamp((dist + feather) / feather, 0.0, 1.0);\n  \n  // Apply curve. \n  float amount = pow(edge, curve);\n\n  // Normal for displacement\n  vec2 normal = getNormal(p, b, radius);\n  \n  // Notice we must map the pixel normal back to UV space for offset.\n  // We negate the Y normal because UV Y goes up, but DOM Y goes down.\n  vec2 uvOffset = vec2(normal.x, -normal.y) * amount * (depth / u_resolution);\n  vec2 sampleUv = v_uv - uvOffset;\n\n  vec4 color;\n  if (chroma > 0.0) {\n    float cOffset = chroma * amount;\n    // slightly different offsets for RGB\n    vec2 offsetR = vec2(normal.x, -normal.y) * amount * ((depth + cOffset) / u_resolution);\n    vec2 offsetG = uvOffset;\n    vec2 offsetB = vec2(normal.x, -normal.y) * amount * ((depth - cOffset) / u_resolution);\n    \n    float rColor = texture2D(u_source, v_uv - offsetR).r;\n    float gColor = texture2D(u_source, v_uv - offsetG).g;\n    float bColor = texture2D(u_source, v_uv - offsetB).b;\n    float aColor = texture2D(u_source, sampleUv).a;\n    color = vec4(rColor, gColor, bColor, aColor);\n  } else {\n    color = texture2D(u_source, sampleUv);\n  }\n\n  // Apply tint\n  color.rgb = mix(color.rgb, u_lensTint.rgb, u_lensTint.a);\n\n  // Apply glint (simple specular-like highlight on the top-left edge)\n  // We can use the normal and dot product with a light vector\n  vec2 lightDir = normalize(vec2(-1.0, -1.0)); // coming from top-left in DOM space\n  float specular = max(dot(normal, lightDir), 0.0);\n  // sharpen specular\n  specular = pow(specular, 4.0) * amount;\n  \n  color.rgb += vec3(specular * glint);\n\n  gl_FragColor = color;\n}\n";

package/dist/shaders/liquidGlass.vert.d.ts

@@ -0,0 +1 @@
+export declare const vertexShader = "\nattribute vec2 a_position;\nvarying vec2 v_uv;\n\nvoid main() {\n  v_uv = a_position * 0.5 + 0.5;\n  // flip Y since WebGL textures have origin at bottom-left, but DOM uses top-left\n  // Actually, we'll handle the flip when we upload the texture via gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n";

package/dist/types.d.ts

@@ -0,0 +1,55 @@
+export interface LensOptions {
+    radius?: number;
+    depth?: number;
+    feather?: number;
+    curve?: number;
+    chroma?: number;
+    tint?: string | [number, number, number, number];
+    glint?: number;
+}
+export interface RectLensDef {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+    depth: number;
+    feather: number;
+    curve: number;
+    chroma: number;
+    tint: [number, number, number, number];
+    glint: number;
+}
+export interface CanvasLiquidGlassOptions {
+    source: HTMLCanvasElement;
+    container: HTMLElement;
+    dpr?: number | 'auto';
+    quality?: 'auto' | 'high' | 'low';
+}
+export interface PassOptions {
+    maxLenses?: number;
+}
+export interface RenderPassOptions {
+    sourceTexture: WebGLTexture;
+    resolution: [number, number];
+    lenses: RectLensDef[];
+}
+export interface LiquidGlassInstance {
+    registerLens(target: HTMLElement, options?: LensOptions): void;
+    registerRectLens(rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, options?: LensOptions): symbol;
+    unregisterLens(target: HTMLElement | symbol): void;
+    updateLens(target: HTMLElement | symbol, options: Partial<LensOptions>): void;
+    start(): void;
+    tick(): void;
+    stop(): void;
+    destroy(): void;
+}
+export interface LiquidGlassPassInstance {
+    render(options: RenderPassOptions): void;
+    destroy(): void;
+}

package/dist/webgl/LiquidGlassPass.d.ts

@@ -0,0 +1,10 @@
+import { RenderPassOptions } from '../types';
+export declare class LiquidGlassPass {
+    private gl;
+    private program;
+    private quad;
+    private locations;
+    constructor(gl: WebGLRenderingContext);
+    render(options: RenderPassOptions): void;
+    destroy(): void;
+}

package/dist/webgl/LiquidGlassRenderer.d.ts

@@ -0,0 +1,30 @@
+import { CanvasLiquidGlassOptions, LensOptions } from '../types';
+export declare class LiquidGlassRenderer {
+    private overlay;
+    private gl;
+    private textureSource;
+    private pass;
+    private registry;
+    private source;
+    private container;
+    private dpr;
+    private quality;
+    private rafId;
+    private isRunning;
+    constructor(options: CanvasLiquidGlassOptions);
+    private getActiveQuality;
+    private resize;
+    registerLens(target: HTMLElement, options?: LensOptions): void;
+    registerRectLens(rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, options?: LensOptions): symbol;
+    unregisterLens(target: HTMLElement | symbol): void;
+    updateLens(target: HTMLElement | symbol, options: Partial<LensOptions>): void;
+    start(): void;
+    stop(): void;
+    tick(): void;
+    destroy(): void;
+}

package/dist/webgl/TextureSource.d.ts

@@ -0,0 +1,8 @@
+export declare class TextureSource {
+    private gl;
+    private texture;
+    constructor(gl: WebGLRenderingContext);
+    update(source: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement): void;
+    getTexture(): WebGLTexture;
+    destroy(): void;
+}

package/dist/webgl/createContext.d.ts

@@ -0,0 +1 @@
+export declare function createContext(canvas: HTMLCanvasElement): WebGLRenderingContext;

package/dist/webgl/createProgram.d.ts

@@ -0,0 +1,2 @@
+export declare function compileShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader;
+export declare function createProgram(gl: WebGLRenderingContext, vertSource: string, fragSource: string): WebGLProgram;

package/dist/webgl/createQuad.d.ts

@@ -0,0 +1,7 @@
+export interface Quad {
+    buffer: WebGLBuffer;
+    vao: WebGLVertexArrayObjectOES | null;
+    draw: () => void;
+    destroy: () => void;
+}
+export declare function createQuad(gl: WebGLRenderingContext, program: WebGLProgram): Quad;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "liquid-glass-canvas",
+  "version": "0.1.0",
+  "description": "High-performance WebGL-native liquid glass refraction effects for HTML5 Canvas and WebGL sources.",
+  "main": "./dist/liquid-glass-canvas.umd.js",
+  "module": "./dist/liquid-glass-canvas.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/liquid-glass-canvas.mjs",
+      "require": "./dist/liquid-glass-canvas.umd.js"
+    },
+    "./css": "./dist/liquid-glass-canvas.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite -c vite.config.demo.ts",
+    "build": "npm run build:lib && npm run build:demo",
+    "build:lib": "vite build -c vite.config.ts",
+    "build:demo": "vite build -c vite.config.demo.ts",
+    "preview": "vite preview -c vite.config.demo.ts",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepack": "npm run build:lib",
+    "deploy": "npm run build:demo && wrangler deploy"
+  },
+  "homepage": "https://liquid-glass-canvas.carsonye.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Whynotmetoo/liquid-glass-canvas.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Whynotmetoo/liquid-glass-canvas/issues"
+  },
+  "keywords": [
+    "webgl",
+    "canvas",
+    "liquid-glass",
+    "glassmorphism",
+    "refraction",
+    "threejs",
+    "particles"
+  ],
+  "author": "",
+  "license": "MIT",
+  "type": "commonjs",
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.58.9",
+    "@types/three": "^0.184.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3",
+    "wrangler": "^3.109.0"
+  },
+  "dependencies": {
+    "three": "^0.184.0"
+  }
+}