@scriptedpixels/liquid-glass-vue 0.0.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 +108 -0
- package/package.json +42 -0
package/README.md
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# Liquid Glass Vue
|
|
2
|
+
|
|
3
|
+
Apple's Liquid Glass effect for Vue.
|
|
4
|
+
|
|
5
|
+
Card Example | Button Example
|
|
6
|
+
:-------------------------:|:-------------------------:
|
|
7
|
+
 | 
|
|
8
|
+
|
|
9
|
+
## Demo
|
|
10
|
+
|
|
11
|
+
<!-- [See it in action but touch it](https://liquid-glass.maxrovensky.com) -->
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- Proper edgy bending and refraction
|
|
16
|
+
- Configurable frosty level
|
|
17
|
+
- Supports arbitrary child elements
|
|
18
|
+
- Configurable paddings
|
|
19
|
+
- Correct hover and click effects
|
|
20
|
+
- Edges and highlights take on the underlying light like Apple's does
|
|
21
|
+
- Configurable chromatic aberration
|
|
22
|
+
- Configurable elasticity, to mimic Apple's "liquid" feel
|
|
23
|
+
|
|
24
|
+
**⚠️ NOTE:** Safari only partially supports the effect (no displacement) and Firefox does not support it at all.
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
### Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install liquid-glass-vue
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Basic Usage
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import LiquidGlass from 'liquid-glass-vue'
|
|
38
|
+
|
|
39
|
+
function App() {
|
|
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
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Button Example
|
|
52
|
+
|
|
53
|
+
```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
|
+
```
|
|
67
|
+
|
|
68
|
+
### Mouse Container Example
|
|
69
|
+
|
|
70
|
+
When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the `mouseContainer` prop:
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
function App() {
|
|
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
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Props
|
|
93
|
+
|
|
94
|
+
| Prop | Type | Default | Description |
|
|
95
|
+
|------|------|---------|-------------|
|
|
96
|
+
| `children` | `Vue.VueNode` | - | The content to render inside the glass container |
|
|
97
|
+
| `displacementScale` | `number` | `70` | Controls the intensity of the displacement effect |
|
|
98
|
+
| `blurAmount` | `number` | `0.0625` | Controls the blur/frosting level |
|
|
99
|
+
| `saturation` | `number` | `140` | Controls color saturation of the glass effect |
|
|
100
|
+
| `aberrationIntensity` | `number` | `2` | Controls chromatic aberration intensity |
|
|
101
|
+
| `elasticity` | `number` | `0.15` | Controls the "liquid" elastic feel (0 = rigid, higher = more elastic) |
|
|
102
|
+
| `cornerRadius` | `number` | `999` | Border radius in pixels |
|
|
103
|
+
| `className` | `string` | `""` | Additional CSS classes |
|
|
104
|
+
| `padding` | `string` | - | CSS padding value |
|
|
105
|
+
| `style` | `Vue.CSSProperties` | - | Additional inline styles |
|
|
106
|
+
| `overLight` | `boolean` | `false` | Whether the glass is over a light background |
|
|
107
|
+
| `onClick` | `() => void` | - | Click handler |
|
|
108
|
+
| `mouseContainer` | `Vue.RefObject<HTMLElement \| null> \| null` | `null` | Container element to track mouse movement on (defaults to the glass component itself) |
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@scriptedpixels/liquid-glass-vue",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Apple's Liquid Glass effect for Vue",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"vue",
|
|
7
|
+
"component",
|
|
8
|
+
"library",
|
|
9
|
+
"typescript",
|
|
10
|
+
"liquid-glass",
|
|
11
|
+
"effect"
|
|
12
|
+
],
|
|
13
|
+
"main": "dist/liquid-glass-vue.umd.cjs",
|
|
14
|
+
"module": "dist/liquid-glass-vue.js",
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"author": "Scripted Pixels: Kam Banwait",
|
|
19
|
+
"license": "MIT",
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/kambanwait/liquid-glass-vue.git"
|
|
23
|
+
},
|
|
24
|
+
"private": false,
|
|
25
|
+
"type": "module",
|
|
26
|
+
"scripts": {
|
|
27
|
+
"dev": "vite",
|
|
28
|
+
"build": "vue-ts && vite build --outDir dist",
|
|
29
|
+
"preview": "vite preview"
|
|
30
|
+
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"vue": "^3.5.16"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
36
|
+
"@vue/tsconfig": "^0.7.0",
|
|
37
|
+
"vite": "^6.3.5",
|
|
38
|
+
"vue-tsc": "^2.2.10",
|
|
39
|
+
"typescript": "^5.0.0",
|
|
40
|
+
"@types/node": "^24.0.0"
|
|
41
|
+
}
|
|
42
|
+
}
|