liquid-gl 2.2.0 → 2.2.1
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 +23 -16
- 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.1
|
|
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
|
},
|
package/liquidGL-helper.js
CHANGED
package/liquidGL.js
CHANGED