Original Summary

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. What it is: 19 custom elements: buttons, switches, sliders, a tab bar, a segmented control, menus, toolbars, search, sheets with detents, scroll-edge blur, plus a generic surface and a scene Web Components core, with typed bindings for React 18/19, Vue 3 and Svelte 4/5 (all generated from one shared spec, so the props match 1:1) Real refraction in Chromium through an SVG displacement map in backdrop-filter. Safari, iOS and Firefox can't do that on the live page, so there you wrap content in <glass-scene> and it refracts through WebGL (images, video, canvas) or a scoped content filter (DOM). Everywhere else you get a calibrated frost fallback Respects reduced motion, reduced transparency and forced colors About 35 kB gzip for the full CDN bundle, zero runtime dependencies, no WebGPU Docs with live demos and a playground, so you can try it without installing anything Why I built it: I really liked the new glass look on iOS, but most "glassmorphism" stuff on the web is just a blur with some transparency. I wanted actual refraction that bends what's behind it, and something I can drop into any framework. What I'm unsure about and would love feedback on: performance on low-end devices, accessibility and contrast over busy backgrounds, and the API naming. Bug reports and ideas are welcome as GitHub issues. It's free and MIT licensed, nothing to sell. Not affiliated with or endorsed by Apple; "Liquid Glass" is just the closest name for the style. Install: npm i glassy-liquid Docs and playground: https://9und30.github.io/glassy-liquid/ Repo: https://github.com/9und30/glassy-liquid npm: https://www.npmjs.com/package/glassy-liquid   submitted by   /u/nichtbinaererbaum [link]   [comments]

  • 情报分类：服务器与云资源
  • 分类依据：内容涉及服务器、云资源或网络线路
  • 信息来源：Reddit · SideProject
  • 发布时间：2026/10/18 21:07:33