liquid-gl 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -18
- package/liquidGL-helper.js +1 -1
- package/liquidGL.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<a href="https://liquidgl.naughtyduk.com"><img src="https://raw.githubusercontent.com/naughtyduk/liquidGL/main/assets/liquidGL-npm-preview.gif" alt="liquidGL" width="100%" height="auto"/></a>
|
|
4
4
|
|
|
5
|
-
### v2.2.
|
|
5
|
+
### v2.2.2
|
|
6
6
|
|
|
7
7
|
> [!NOTE]
|
|
8
8
|
> `liquidGL` is free to use for both non-commercial and commercial purposes.
|
|
@@ -139,23 +139,30 @@ Next, initialise the library with the selector for your target element.
|
|
|
139
139
|
import liquidGL from "liquid-gl";
|
|
140
140
|
|
|
141
141
|
const glassEffect = liquidGL({
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
142
|
+
engine: "auto", // Renderer chain: "auto" tries WebGPU then WebGL; force with "webgpu", "webgl2" or "webgl"
|
|
143
|
+
snapshot: "body", // The area used for refraction, <body> recommended and default
|
|
144
|
+
target: ".liquidGL", // CSS selector for the element(s) to glass-ify
|
|
145
|
+
resolution: 2.0, // The quality of the snapshot
|
|
146
|
+
refraction: 0.01, // Base refraction strength (0–1)
|
|
147
|
+
aberration: 0, // Chromatic aberration strength (0–1). 0 = off
|
|
148
|
+
bevelDepth: 0.08, // Intensity of the edge bevel (0–1)
|
|
149
|
+
bevelWidth: 0.15, // Width of the bevel as a proportion of the element (0–1)
|
|
150
|
+
frost: 0, // Subtle blur radius in px. 0 = crystal clear
|
|
151
|
+
shadow: true, // Adds a soft drop-shadow under the pane
|
|
152
|
+
specular: true, // Animated light highlights (slightly more GPU)
|
|
153
|
+
reveal: "fade", // Reveal animation
|
|
154
|
+
tilt: false, // Whether tilt on hover is enabled
|
|
155
|
+
tiltFactor: 5, // If tilt is enabled, how much tilt
|
|
156
|
+
tiltEase: 400, // Tilt settle duration in ms, on hover in and out
|
|
157
|
+
magnify: 1, // Magnification of lens content
|
|
158
|
+
helper: false, // Show debug helper - note requires liquidGL-helper.js module
|
|
157
159
|
on: {
|
|
158
160
|
init(instance) {
|
|
161
|
+
// The `init` callback fires once liquidGL has taken its snapshot
|
|
162
|
+
// and rendered the first frame. It's the ideal place to hide or
|
|
163
|
+
// prepare elements for reveal animations (e.g. with GSAP, ScrollTrigger)
|
|
164
|
+
// because it ensures the content is visible to the snapshot before
|
|
165
|
+
// you hide it from the user.
|
|
159
166
|
console.log("liquidGL ready!", instance);
|
|
160
167
|
},
|
|
161
168
|
},
|
|
@@ -227,10 +234,10 @@ Passing `gsap` lets `liquidGL` drive its render loop from the GSAP ticker and ke
|
|
|
227
234
|
|
|
228
235
|
| Option | Type | Default | Description |
|
|
229
236
|
| ------------ | -------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
230
|
-
| `
|
|
237
|
+
| `engine` | string | `'auto'` | Render backend chain: `'auto'` (WebGPU → WebGL2 → WebGL1 → CSS), `'webgpu'` (WebGPU → CSS), `'webgl2'` (WebGL2 → WebGL1 → CSS) or `'webgl'` (WebGL1 → CSS). |
|
|
231
238
|
| `snapshot` | string | `'body'` | CSS selector for the element to snapshot. |
|
|
239
|
+
| `target` | string | `'.liquidGL'` | **Required.** CSS selector for the element(s) to glassify. |
|
|
232
240
|
| `resolution` | number | `2.0` | Resolution of the background snapshot (clamped 0.1–3.0). Higher is sharper but uses more memory. |
|
|
233
|
-
| `engine` | string | `'auto'` | Render backend chain: `'auto'` (WebGPU → WebGL2 → WebGL1 → CSS), `'webgpu'` (WebGPU → CSS), `'webgl2'` (WebGL2 → WebGL1 → CSS) or `'webgl'` (WebGL1 → CSS). |
|
|
234
241
|
| `refraction` | number | `0.01` | Base refraction offset applied across the pane (0–1). |
|
|
235
242
|
| `aberration` | number | `0` | Chromatic aberration strength (0–1). Scales with the refraction offset, so dispersion is strongest at the bevel. `0` disables it and skips the extra texture samples. |
|
|
236
243
|
| `bevelDepth` | number | `0.08` | Additional refraction on the edge to simulate depth (0–1). |
|
package/liquidGL-helper.js
CHANGED
package/liquidGL.js
CHANGED