Liquid Glass in the Browser: Refraction with CSS and SVG

Original Article ↗ Hacker News Discussion ↗

Implementation Approaches (CSS/SVG vs WebGL)

  • Thread compares the blog’s CSS/SVG-based refraction to a WebGL shader demo.
  • WebGL is seen as more naturally suited to real-time effects and cross‑browser support, but requires JS and rendering into a canvas, which detaches it from the DOM.
  • The article’s approach is praised for integrating with regular HTML/CSS, allowing pre-rendered displacement maps and immediate first-frame rendering.
  • Some argue this demo is “just a glass shader,” while Apple’s “Liquid Glass” also involves meta‑ball merging, tint modes, and layered controls; others link to “goo” filters that mimic those merges.

Performance and Power Concerns

  • Multiple users report stuttery scrolling and high GPU/fan usage on powerful Macs; others say it runs smoothly on M1/M3 hardware or mobile.
  • Comparisons between the SVG/CSS and WebGL demos show mixed results: sometimes the WebGL version is smoother, sometimes the SVG one is.
  • There’s interest in benchmarking power efficiency versus OS‑native implementations and skepticism about heavy effects on ordinary sites (“why our much-faster computers still lag”).
  • The author acknowledges current performance issues and has already shipped at least one optimization pass.

Browser Support and Spec Issues

  • The main interactive demo is Chrome-only due to use of SVG filters as a backdrop-filter; other browsers partially render but miss key refraction effects.
  • Some users initially miss the Chrome-only disclaimer or visually tune out the highlighted note.
  • Debate arises over whether the technique is “out of spec”; others link to W3C drafts showing URL filters are in the Filter Effects spec, though implementation is inconsistent.
  • On Firefox, some sub-demos and the playground work, but magnification and displacement are incomplete, especially on mobile.

Visual Quality & Technical Refinements

  • Suggestions include better anti-aliasing, subtle blur, higher resolution for filters, and chromatic aberration along displaced edges.
  • Some notice single‑pixel high‑contrast artifacts and slight text distortion under the magnifying glass.
  • A few users correct or discuss math details in the article’s equations.

UX, Design, and Apple Discourse

  • Many see the work as technically superb but question the usability of glass UIs: readability, distraction, and battery use are recurring worries.
  • Several strongly dislike liquid glass and modern Apple design direction; others report that Apple’s implementation feels subtle and performant in current betas.
  • Netflix’s glassy logged-out UI is cited as an example of a nice effect that degrades performance.

Article, Tooling, and Community Spin‑offs

  • The writeup and interactive explanations receive extensive praise, often compared to high-end educational blogs.
  • Tech stack mentioned: React, Motion, Tailwind, and vanilla SVG.
  • People share related libraries and forks, and express interest in source code or a future open‑source library.