Fluid Glass

Original Article ↗ Hacker News Discussion ↗

Technical approach & visual behavior

  • Several commenters infer it combines a fluid simulation with a reaction–diffusion system rather than a simple cellular automaton.
  • The droplet size and “beading” patterns are associated with reaction–diffusion wavelengths; some compare it to Gray–Scott systems.
  • Straight-line droplet alignments are attributed to grid aliasing; others note that if left alone it can also form discrete droplets.
  • Refraction is noted as cheaper than many assume; the demo appears to run at relatively low internal resolution and may ignore device pixel ratio, trading sharpness for speed.

Performance & hardware differences

  • Many report very smooth performance on recent phones and tablets (modern iPhones, Pixels, iPad Pro), often with little heat.
  • Others see high GPU/CPU usage, low FPS, or even tab crashes on older laptops, high‑res 4K monitors, Firefox, or certain desktops.
  • Reducing browser window size or zooming out increases FPS, suggesting fill-rate and resolution are the main bottlenecks.
  • One developer log shows repeated glReadPixels calls causing GPU stalls, flagged as a major performance anti‑pattern.

Interaction, input, and browser quirks

  • The surface reacts to clicks/drags, cursor movement, and even stylus hover on some phones; zoom level dynamically adjusts resolution.
  • Some users didn’t realize it was interactive at first.
  • On iOS, the drag handling conflicts with swipe‑back navigation, sparking debate about gesture-based navigation vs. explicit buttons.
  • Reports vary by browser: works on many, but fails on Librewolf; Firefox often uses more CPU/GPU than Chromium-based browsers.

Design, legibility, and OS “liquid glass” debates

  • Widespread praise for the aesthetics: “mesmerizing,” “oil without the mess,” and suitable as a lock screen or screensaver.
  • Simultaneously, multiple commenters call it unreadable and hope such effects never ship in production UIs.
  • This feeds into a broader argument about Apple’s current “liquid glass” OS style:
    • Critics see a regression in legibility and accessibility, citing specific bugs when transparency-reduction settings are enabled.
    • Defenders argue the design solves the problem of consistent interactive UI elements across arbitrarily colored apps by using glass/water metaphors, and note that transparency can be disabled.

Framework and implementation choices

  • The core is WebGL; Vue is used lightly as a wrapper.
  • Several argue a framework is unnecessary for a single-page canvas demo and that plain JavaScript + CSS would be simpler.
  • This prompts side-by-side opinions on Vue, React, Svelte, and others, centered on typing, reactivity complexity, and developer experience.