62 comments

[ 2.7 ms ] story [ 78.8 ms ] thread
Based on the patterns that appear when undisturbed, this seems to be based on a cellular automaton.
Do note you can click and drag on it too.
Beautiful demo. I hope no IT company will ever think this is a good UI.
very nice at 240fps. i have similar demos coming later
Wet is the new hot.
it's interesting that the drops tend to collect in straight lines. I wonder what's happening in the sim code to keep them from collecting into round droplets?
(comment deleted)
This website is running at >10 FPS at 100% GPU usage
Its interesting that most comments appear to be running it on their phones. I wonder if most links on HN are viewed on phones primarily? Phones are generally newer than laptops and most developers will have the latest technology.

Developers especially with tech demos like this, use the latest tech to develop and don't care about supporting older devices. This attitude can sometimes bleed over into their work where they should care for users using older machines, but its expected for a look-at-the-shiny demonstration to other techies using top of the range hardware.

( I am seeing the same laggy effects on an older linux + firefox laptop with integrated graphics, unsurprisingly )

I think this depends on the screen resolution. If I reduce the browser window size the FPS improves.
The cpu and gpu usage on firefox desktop seems to be twice as high as chrome when opening this demo.
[flagged]
Until someone makes it frosted, we are safe.
Looks like something you'd expect to find as a countdown timer in the run up to this year's WWDC on their homepage. Very slick.
UI innovation and courage!
Waiting for someone with trypophobia to see this
No effect. I think because it doesn't look organic, and/or the size and arrangment of holes wasn't right.
Despite the liquid glass discussion … I am absolutely impressed how smooth this runs on a phone.
(comment deleted)
Yeah was also expecting my phone to get very toasty but it did not. Great job!
Refraction is not as expensive as people would led you to believe. That said, this demo is ran at a very low resolution. Probably because it doesn't take devicePixelRatio into account. On my phone that's 3.5 so more than 12 times less pixels than would be required if you want crisp UI.
Partly because phones have smaller screen sizes. When I reduce the the browser window size the FPS improves. For full widow mode it's a bit lagging for me.
It does use a ton of energy - with clock on 4k screen my M2 macbook air CPU temperature went up 10°C in 10s and 20°C in 50s.
I see where you're coming from, but "on a phone" hasn't been a valid qualifier for performance benchmarks for a long time. Phones and their GPUs are ridiculously powerful nowadays. We've been smoothly running 3D apps on GPUs with orders of magnitude less MFLOPS 20 years ago already. Apps and games with far more going on than blurry glassy alarm clock, albeit somewhat less beautiful. When I run Fluid Glass on a 10 year old laptop with an integrated GPU and move my cursor, I'm seeing less than 10 FPS. When will we finally start readjusting our expectations for "fast" software and stop blindly following Wirths law?
Refreshing that it's built using the vue framework vs the typical react.
The bulk of it is WebGL. Vue is doing very little here. Since it's a single static page rendering to canvas, it really doesn't need a framework like Vue or React.
Why does it even need anything here other than vanilla JavaScript? I don't see the need for a SPA framework.
Why? React is much better than Vue in my experience. Vue 2 was so bad we ended up painfully porting an entire election app to react at a previous job.
I helped port a Vue 2 project to Vue 3, and then I worked on a Vue 3 project we’ve slowly been rewriting in a greenfield Nuxt 3 project. Vue 2 and the options API were just difficult in all senses - even Vue3 with Options feels bad. I really enjoy 3 with the composition API, and I have always had a difficult time reasoning about React personally.

While I will continue to probably promote Vue where it makes sense, I’m honestly more inclined towards learning Svelte, HTMX, and other less arduous frameworks.

In practice, it’s been written as plain JS with a tiny bit of gratuitous Vue and SCSS bolted on (see even how Vue’s onMounted and onBeforeUnmount are fed callbacks that just run the actual initOGL and destroy functions). It would have been easier and shorter to write without Vue and SCSS than with them! What’s currently spread across index.html, src/styles.scss, src/main.js and src/App.vue would have worked better all in index.html, or if you really wanted to, you could still split the CSS and JS into files src/styles.css and src/main.js.
Surprised this is using any vue/react framework. I expected just a plain webgl+shader without libraries codebase.
It's even reactive, the clock went horizontal if you give it a wide enough viewport.

Damn this is good. It's like playing with oil without having to wash your hands afterwards, and there's no mom chasing to give you a beat for the oil money you've just wasted. And on top of that, it tells you time.

It's cool that it responds to my phone's stylus hovering above the screen, not just when it's touching. Feels like magic.
The meandering movement of the droplets around the sides remind me of the Gray-Scott reaction–diffusion system
(comment deleted)
Imagine adding support for gyroscopes on phones and then you can make the water flow away when you rotate your device! Great work btw