-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathREADME.html
More file actions
277 lines (228 loc) · 7.38 KB
/
Copy pathREADME.html
File metadata and controls
277 lines (228 loc) · 7.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="liquidglassjs">Liquid Glass JS</h1>
<p>A modern JavaScript library for creating stunning liquid glass effects with both CSS classes and web components. Features advanced SVG displacement filters, chromatic aberration, and smooth animations.</p>
<blockquote>
<p><strong>Inspired by</strong>: <a href="https://medium.com/ekino-france/liquid-glass-in-css-and-svg-839985fcb88d">Liquid Glass in CSS (and SVG)</a> by Adrien Gautier, but modified for custom HTML components and heavily optimized for rendering speed and reduced battery usage.</p>
</blockquote>
<h2 id="features">Features</h2>
<ul>
<li>🌊 <strong>Liquid Glass Effects</strong>: Advanced displacement and blur effects</li>
<li>🎨 <strong>Chromatic Aberration</strong>: RGB channel separation for realistic glass distortion</li>
<li>⚡ <strong>Web Components</strong>: Modern <code><liquid-glass></code> custom element</li>
<li>🎯 <strong>CSS Classes</strong>: Simple class-based implementation</li>
<li>📱 <strong>Responsive</strong>: Works on all devices and screen sizes</li>
<li>♿ <strong>Accessible</strong>: Full keyboard navigation and screen reader support</li>
<li>🎛️ <strong>Customizable</strong>: Extensive configuration options</li>
</ul>
<h2 id="quickstart">Quick Start</h2>
<h3 id="webcomponentrecommended">Web Component (Recommended)</h3>
<pre><code class="html"><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./liquid-glass.css">
<script type="module" src="./liquid-glass.js"></script>
</head>
<body>
<!-- Basic glass effect -->
<liquid-glass>
Hello, Glass World!
</liquid-glass>
<!-- Interactive button -->
<liquid-glass interactive strength="120" depth="15">
Click me!
</liquid-glass>
<!-- Link with glass effect -->
<liquid-glass href="https://example.com" strength="100">
Visit Example
</liquid-glass>
</body>
</html>
</code></pre>
<h3 id="cssclasses">CSS Classes</h3>
<pre><code class="html"><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./liquid-glass.css">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!-- Basic glass container -->
<div class="liquid-glass">
Static glass container
</div>
<!-- Elevated style -->
<div class="liquid-glass" data-elevated="true">
Enhanced glass effect
</div>
</body>
</html>
</code></pre>
<h2 id="webcomponentapi">Web Component API</h2>
<h3 id="attributes">Attributes</h3>
<table>
<colgroup>
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th> Attribute </th>
<th> Type </th>
<th> Default </th>
<th> Description </th>
</tr>
</thead>
<tbody>
<tr>
<td> <code>strength</code> </td>
<td> number </td>
<td> 100 </td>
<td> Displacement strength (0–200) </td>
</tr>
<tr>
<td> <code>depth</code> </td>
<td> number </td>
<td> 10 </td>
<td> Glass depth effect (0–30) </td>
</tr>
<tr>
<td> <code>blur</code> </td>
<td> number </td>
<td> 2 </td>
<td> Blur amount (0–10) </td>
</tr>
<tr>
<td> <code>chromatic</code> </td>
<td> number </td>
<td> 0 </td>
<td> Chromatic aberration (0–50) </td>
</tr>
<tr>
<td> <code>interactive</code> </td>
<td> boolean </td>
<td> false </td>
<td> Enable button-like interaction </td>
</tr>
<tr>
<td> <code>disabled</code> </td>
<td> boolean </td>
<td> false </td>
<td> Disable interactions </td>
</tr>
<tr>
<td> <code>elevated</code> </td>
<td> boolean </td>
<td> false </td>
<td> Enhanced visual styling </td>
</tr>
<tr>
<td> <code>href</code> </td>
<td> string </td>
<td> - </td>
<td> Make it a link (like <code><a></code>) </td>
</tr>
<tr>
<td> <code>target</code> </td>
<td> string </td>
<td> - </td>
<td> Link target (when href is set) </td>
</tr>
<tr>
<td> <code>rel</code> </td>
<td> string </td>
<td> - </td>
<td> Link relationship (when href is set) </td>
</tr>
</tbody>
</table>
<h3 id="examples">Examples</h3>
<pre><code class="html"><!-- Subtle effect -->
<liquid-glass strength="50" blur="1" depth="5">
Subtle glass effect
</liquid-glass>
<!-- Strong effect with chromatic aberration -->
<liquid-glass strength="150" chromatic="20" depth="15">
Strong glass with color separation
</liquid-glass>
<!-- Interactive button -->
<liquid-glass interactive strength="100" blur="3">
Interactive button
</liquid-glass>
<!-- Link component -->
<liquid-glass href="https://github.com" target="_blank" strength="80">
GitHub Link
</liquid-glass>
<!-- Disabled state -->
<liquid-glass disabled strength="100">
Disabled glass element
</liquid-glass>
</code></pre>
<h2 id="csscustomproperties">CSS Custom Properties</h2>
<p>The web component supports CSS custom properties for advanced styling:</p>
<pre><code class="css">liquid-glass {
--lg-blur: 8px;
--lg-saturate: 1.2;
--lg-contrast: 1.1;
--lg-brightness: 1.05;
--lg-bg: rgba(255, 255, 255, 0.15);
--lg-border: rgba(255, 255, 255, 0.3);
--lg-radius: 20px;
}
</code></pre>
<h2 id="browsersupport">Browser Support</h2>
<ul>
<li>✅ Chrome 88+</li>
<li>✅ Firefox 87+</li>
<li>✅ Safari 14+</li>
<li>✅ Edge 88+</li>
</ul>
<p><strong>Note</strong>: Advanced displacement effects require modern browsers with SVG filter support. The library gracefully falls back to blur-only effects on older browsers.</p>
<h2 id="performance">Performance</h2>
<ul>
<li>Optimized with ResizeObserver for efficient updates</li>
<li>RequestAnimationFrame-coalesced filter updates</li>
<li>Minimal DOM mutations</li>
<li>Lazy filter generation</li>
</ul>
<h2 id="accessibility">Accessibility</h2>
<ul>
<li>Full keyboard navigation support</li>
<li>Screen reader compatible</li>
<li>Focus management</li>
<li>ARIA attributes</li>
<li>Reduced motion support</li>
</ul>
<h2 id="installation">Installation</h2>
<h3 id="directdownload">Direct Download</h3>
<ol>
<li>Download <code>liquid-glass.js</code> and <code>liquid-glass.css</code></li>
<li>Include in your HTML:</li>
</ol>
<pre><code class="html"><link rel="stylesheet" href="./liquid-glass.css">
<script type="module" src="./liquid-glass.js"></script>
</code></pre>
<h2 id="examples">Examples</h2>
<p>Check out the <a href="https://bemoredifferent.github.io/liquid-glass-js/">live demo</a> to see all effects in action.</p>
<h2 id="contributing">Contributing</h2>
<p>Contributions are welcome! Please feel free to submit a Pull Request.</p>
<h2 id="license">License</h2>
<p>MIT License - see <a href="LICENSE">LICENSE</a> file for details.</p>
<h2 id="changelog">Changelog</h2>
<h3 id="v1.0.0">v1.0.0</h3>
<ul>
<li>Initial release</li>
<li>Web component implementation</li>
<li>CSS class support</li>
<li>Advanced SVG displacement filters</li>
<li>Chromatic aberration effects</li>
<li>Full accessibility support</li>
</ul>
</body>
</html>