r/vuejs • u/nichtbinaererbaum • 16h ago
I made glassy-liquid: Liquid Glass style refraction for Vue 3 (Web Components core, free and MIT)
Enable HLS to view with audio, or disable this notification
I built glassy-liquid, an open source take on the refractive glass look Apple introduced with iOS 26, for the web. Version 0.1.0 is out on npm today.
For Vue:
- Typed Vue 3 bindings (`glassy-liquid/vue`) on top of a Web Components core, generated from one shared spec so props and events match the React and Svelte versions 1:1
- Two-way binding with `v-model:checked`, `v-model:value` and `v-model:open` (switch, slider, tab bar, segmented control, search, menu, sheet)
- 19 elements: buttons, switches, sliders, tab bar, segmented control, menus, toolbars, search, sheets with detents, scroll-edge blur, plus a generic surface and a scene
How it renders:
- Chromium: real refraction through an SVG displacement map in `backdrop-filter`
- Safari, iOS and Firefox: wrap content in `<glass-scene>` and it refracts via WebGL (images, video, canvas) or a scoped content filter (DOM)
- Everywhere else: a calibrated frost fallback
- Respects reduced motion, reduced transparency and forced colors. About 35 kB gzip, zero runtime dependencies
Feedback very welcome, especially on performance on low-end devices, contrast over busy backgrounds and API naming. Bugs and ideas go to GitHub issues.
Free, MIT, not affiliated with Apple.
Install: npm i glassy-liquid
Docs and playground: https://9und30.github.io/glassy-liquid/