gentpan/liquidglass

Goal: glass that really bends light, like Apple's Liquid Glass, rather than a blur — and looks the same in Chromium, WebKit (Safari and every iOS browser) and Gecko (Firefox). The approach follows Aave Labs' [Building Glass for the Web](htt

**Fastest: the ready-made web components.** If the project can load an ES module, use `assets/components.js` (copy it next to `assets/liquid-glass.js`, or load `https://liquidglass.dev/lib/components.js`). Elements: `lg-switch`, `lg-slider`

Executable file

* components.js v1.0.0 — Liquid Glass web components.  *  *   <script type="module" src="https://liquidglass.dev/lib/components.js"></script>

*  *   <script type="module" src="https://liquidglass.dev/lib/components.js"></script>  *   <lg-switch checked>Wi-Fi</lg-switch>

*   <script type="module" src="https://liquidglass.dev/lib/components.js"></script>

/* ---------------------------------------------------------------- art (content to refract) */ const ART = `data:image/svg+xml,${encodeURIComponent(` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 520" preserveAspectRatio="xMidY

const ART = `data:image/svg+xml,${encodeURIComponent(` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 520" preserveAspectRatio="xMidYMid slice">   <defs>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 520" preserveAspectRatio="xMidYMid slice">

Executable file

Executable file

const NS = 'http://www.w3.org/2000/svg';

const XLINK = 'http://www.w3.org/1999/xlink';

`assets/components.js` (also hosted at `https://liquidglass.dev/lib/components.js`) defines light-DOM custom elements on top of the engine. They need `liquid-glass.js` in the same directory. Styles are injected once; theme them with the `--

<script type="module" src="https://liquidglass.dev/lib/components.js"></script>

#!/usr/bin/env node

for (let i = 0; i < 100 && !ws; i++) {   try {     const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();

try {     const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();     const page = targets.find((t) => t.type === 'page');

const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();

#!/usr/bin/env python3

if __name__ == '__main__':     print(f'serving {ROOT} on http://127.0.0.1:{PORT}')

print(f'serving {ROOT} on http://127.0.0.1:{PORT}')

#!/bin/zsh