![\"liquidGL\"](\"https://raw.githubusercontent.com/naughtyduk/liquidGL/main/assets/liquidGL-npm-preview.gif\")
\n\n### v2.2.4\n\n> **NOTE**\n> `liquidGL` is free to use for both non-commercial and commercial purposes.\n\n> **WARNING**\n> **v2.0.1 changed snapshot capture.** `liquidGL` now snapshots the page with its own built-in rasteriser, so `html2canvas` is no longer a dependency. Nothing needs to change in your code.\n>\n> | Rasteriser | Median | Min | Max | Worst single stall |\n> | :------------ | :------ | :------ | :------- | :----------------- |\n> | NaughtyDOM | 55.5 ms | 54.1 ms | 57.5 ms | 37.8 ms |\n> | `html2canvas` | 86.3 ms | 85.3 ms | 134.8 ms | 16.2 ms |\n>\n> Measured over 7 alternating runs of the full home page at `resolution: 2` (2880×10036 output), Chrome 150.\n\n`liquidGL` turns any fixed or sticky-positioned element into a perfectly refracted, glossy \"glass pane\" rendered in WebGPU (with automatic fallback to WebGL).\n\n![\"Try](\"https://raw.githubusercontent.com/naughtyduk/liquidGL/main/assets/try-it-out-npm.png\")
\n\nDEMO 1 | DEMO 2 | DEMO 3 | DEMO 4 | DEMO 5\n\n---\n\n## What's New\n\n**Features**\n\n- **2.2.4 - HD Glass on Mobile** — Snapshot capture is no longer hard capped by the device's screen resolution, and is instead capped by the GPU texture limit set by the browser, allowing for higher quality glass on mobile devices.\n\n- **2.2.0 - WebGPU rendering** — `liquidGL` now renders with WebGPU where available, with an automatic fallback chain of WebGPU → WebGL2 → WebGL1 → CSS `backdrop-filter`. Nothing to configure, the chain is fully automatic. Choose where the chain starts with the new `engine` option (`'auto'`, `'webgpu'`, `'webgl2'`, `'webgl'`), or test quickly via the URL parameter `?liquidGL-engine=webgl2`.\n\n- **2.2.0 - Helper GUI is now a separate file** — the dev GUI no longer ships in the main bundle. Import `liquid-gl/liquidGL-helper.js` in development to keep using `helper: true`. If the module is missing you'll get a console error and everything else works as normal.\n\n- **2.1.0 - Helper GUI** — A helper GUI is now available to adjust the liquidGL options in real-time during development, helping you to achieve the perfect aesthetic. To enable it, set `helper: true` in the options object when calling `liquidGL()`.\n\n- **Sticky positioning support** — `position: sticky` elements can now be glassified. Sticky lenses are measured every animation frame, so the glass pane tracks the element through its flowing and stuck phases, then releases with it at the end of its containing block — inside nested scroll containers as well as the main document.\n\n- **Built-in DOM snapshotter** — the `html2canvas` dependency has been replaced with an integrated rasteriser. Capture no longer depends on a third-party library.\n\n- **Chromatic aberration** — the new `aberration` option disperses the red and blue channels either side of the refraction vector, blue displaced further than red, matching the way real glass disperses shorter wavelengths more strongly. Dispersion scales with the refraction offset, so it concentrates at the bevelled edge and vanishes at the flat centre. Defaults to `0` (off).\n\n- **Configurable tilt easing** — the new `tiltEase` option sets the settle duration, in milliseconds, of the tilt on both hover-in and hover-out.\n\n---\n\n**Bug fixes**\n\n- **Refraction drift caused by ignored elements** — elements marked `data-liquid-ignore` were removed from the snapshot entirely, collapsing them out of layout and shifting every element below them. Ignored elements now retain their layout box, so the refraction stays aligned with the live page.\n\n- **Lens and content diverging during tilt** — the pane could separate from its content mid-tilt because the element was being measured while transformed. Metrics are now taken from the untilted box.\n\n- **Tilt snapping on hover** — the refraction jumped straight to its new angle on hover-in while easing on hover-out. Both directions now share a single curve and duration, and cursor movement during entry retargets the in-flight ease rather than snapping.\n\n- **Displacement while pinch-zoomed** — the pane drifted diagonally away from its element when the page was pinch-zoomed, because `visualViewport` offsets were applied twice. Offset compensation is now correctly gated.\n\n---\n\n**Performance**\n\n- Video frames are no longer re-composited or re-uploaded when neither the frame time nor the destination region has changed. Paused, ended and unmoved videos now cost nothing per frame.\n\n- The snapshot bounding box is read once per frame and shared across every lens, instead of twice per lens per frame, removing repeated forced layout from the render loop.\n\n---\n\n## Install from npm\n\n```sh\nnpm install liquid-gl\n```\n\n```js\nimport liquidGL from \"liquid-gl\";\n\nconst glassEffect = liquidGL({\n target: \".liquidGL\",\n snapshot: \"body\",\n});\n```\n\nOptional dev helper GUI (only needed when using `helper: true`):\n\n```js\n// Vite / modern bundlers – tree-shaken out of production builds\nif (import.meta.env.DEV) await import(\"liquid-gl/liquidGL-helper.js\");\n\n// or webpack flavour:\n// if (process.env.NODE_ENV !== \"production\") await import(\"liquid-gl/liquidGL-helper.js\");\n```\n\n> `liquidGL` renders with WebGPU (falling back automatically to WebGL2 → WebGL1) and snapshots the page with its own built-in rasteriser, so it has no runtime dependencies.\n\n---\n\n## Overview\n\n`liquidGL` recreates Apple's \"Liquid Glass\" aesthetic in the browser with an ultra-light WebGPU/WebGL shader. It turns any DOM element into a beautiful, refracting glass pane. To overcome WebGL's security limitations on reading live screen pixels, `liquidGL` uses an innovative offscreen rendering technique. This allows it to refract dynamic content like videos, text animations, and more in real-time, delivering a smooth and interactive experience.\n\n### Key Features\n\n| Feature | Supported | Feature | Supported |\n| :------------------------------------- | :-------: | :------------------------------- | :-------: |\n| WebGPU Rendering `[NEW]` | ✅ | Helper GUI `[NEW]` | ✅ |\n| Real-time Refraction (static content) | ✅ | Magnification Control | ✅ |\n| Real-time Refraction (video) | ✅ | Dynamic Element Support | ✅ |\n| Real-time Refraction (text animations) | ✅ | GSAP-Ready Animations | ✅ |\n| Real-time Refraction (CSS animations) | ❌ | Lightweight & Performant | ✅ |\n| Adjustable Bevel | ✅ | Seamless Scroll Sync | ✅ |\n| Frosted Glass Effect | ✅ | Auto-Resize Handling | ✅ |\n| Dynamic Shadows | ✅ | Auto Video Refraction | ✅ |\n| Specular Highlights | ✅ | Animate Lenses | ✅ |\n| Interactive Tilt Effect `[UPDATED]` | ✅ | `on.init` Callback | ✅ |\n| Chromatic Aberration `[NEW]` | ✅ | Configurable Tilt Easing `[NEW]` | ✅ |\n\n---\n\n## Quick start\n\nSet up your HTML structure first. You will have a `target` element that will receive the glass effect, and a child element for your content (excluded from glass effect).\n\n```html\n\n ![\"Alt](\"example.svg\")
\n This example text content will appear on top of the glass.
\n\n \n ![\"Edgar](\"https://github.com/codedgar.png?size=100\") \n Edgar Pérez \n @codedgar\n \n | \n \n \n ![\"Abhinav](\"https://github.com/AbhinavRobinson.png?size=100\") \n Abhinav Robinson \n @AbhinavRobinson\n \n | \n