@scriptedpixels/liquid-glass-vue 0.0.4 → 0.0.5
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 +5 -44
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,8 +8,6 @@ Card Example | Button Example
|
|
|
8
8
|
|
|
9
9
|
## Demo
|
|
10
10
|
|
|
11
|
-
<!-- [See it in action but touch it](https://liquid-glass.maxrovensky.com) -->
|
|
12
|
-
|
|
13
11
|
## Features
|
|
14
12
|
|
|
15
13
|
- Proper edgy bending and refraction
|
|
@@ -28,41 +26,20 @@ Card Example | Button Example
|
|
|
28
26
|
### Installation
|
|
29
27
|
|
|
30
28
|
```bash
|
|
31
|
-
npm install liquid-glass-vue
|
|
29
|
+
npm install @scriptedpixels/liquid-glass-vue
|
|
32
30
|
```
|
|
33
31
|
|
|
34
32
|
### Basic Usage
|
|
35
33
|
|
|
36
34
|
```tsx
|
|
37
|
-
import LiquidGlass from 'liquid-glass-vue'
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return (
|
|
41
|
-
<LiquidGlass>
|
|
42
|
-
<div className="p-6">
|
|
43
|
-
<h2>Your content here</h2>
|
|
44
|
-
<p>This will have the liquid glass effect</p>
|
|
45
|
-
</div>
|
|
46
|
-
</LiquidGlass>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
35
|
+
import LiquidGlass from '@scriptedpixels/liquid-glass-vue'
|
|
36
|
+
|
|
37
|
+
|
|
49
38
|
```
|
|
50
39
|
|
|
51
40
|
### Button Example
|
|
52
41
|
|
|
53
42
|
```tsx
|
|
54
|
-
<LiquidGlass
|
|
55
|
-
displacementScale={64}
|
|
56
|
-
blurAmount={0.1}
|
|
57
|
-
saturation={130}
|
|
58
|
-
aberrationIntensity={2}
|
|
59
|
-
elasticity={0.35}
|
|
60
|
-
cornerRadius={100}
|
|
61
|
-
padding="8px 16px"
|
|
62
|
-
onClick={() => console.log('Button clicked!')}
|
|
63
|
-
>
|
|
64
|
-
<span className="text-white font-medium">Click Me</span>
|
|
65
|
-
</LiquidGlass>
|
|
66
43
|
```
|
|
67
44
|
|
|
68
45
|
### Mouse Container Example
|
|
@@ -70,23 +47,7 @@ function App() {
|
|
|
70
47
|
When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the `mouseContainer` prop:
|
|
71
48
|
|
|
72
49
|
```tsx
|
|
73
|
-
|
|
74
|
-
const containerRef = useRef<HTMLDivElement>(null)
|
|
75
|
-
|
|
76
|
-
return (
|
|
77
|
-
<div ref={containerRef} className="w-full h-screen bg-image">
|
|
78
|
-
<LiquidGlass
|
|
79
|
-
mouseContainer={containerRef}
|
|
80
|
-
elasticity={0.3}
|
|
81
|
-
style={{ position: 'fixed', top: '50%', left: '50%' }}
|
|
82
|
-
>
|
|
83
|
-
<div className="p-6">
|
|
84
|
-
<h2>Glass responds to mouse anywhere in the container</h2>
|
|
85
|
-
</div>
|
|
86
|
-
</LiquidGlass>
|
|
87
|
-
</div>
|
|
88
|
-
)
|
|
89
|
-
}
|
|
50
|
+
|
|
90
51
|
```
|
|
91
52
|
|
|
92
53
|
## Props
|