10 ms·

Liquid Glass in the Browser: Refraction with CSS and SVG

495 points by Sateeshm 1y ago

delta_p_delta_x 1y ago
Very nice, I really like the vector animations :) One thing I'd say is to apply some anti-aliasing (MSAA, SMAA?)—even on a 4K display with a pixel density of 64.3 px/cm, the jaggies are visible, especially because of the extreme contrast of the caustics behind the dark background.
- rezmason 1y ago
  I'm not especially familiar with this, but I believe making the SVG element larger can increase its filter effects' resolution, and then using CSS transforms to scale the element's parent will return it to its original size, but with a higher resolution result. From there, additional changes to the filter effect (to incorporate a subtle blur for instance) may help it over the finish line. Regardless, this is a great writeup for changes I wish to never see in ordinary UI.
altairprime 1y ago
I’d be very interested to compare the power efficiency of this implementation versus the OS-native version of same over a 12-hour benchmark.
tkzed49 1y ago
this is the first one I've seen that isn't just feTurbulence. Thank you for doing it right! I've been thinking about it since the first liquid glass clones!
explosion-s 1y ago
I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app https://real-glass.vercel.app - The tricky thing for me was making it refract real HTML elements behind
- davidmurdoch 1y ago
  Impressive!
- cycomanic 1y ago
  Cool this looks like it even has dispersion, i.e. colors separate at the edge of the glass element.
  - lagrange77 1y ago
    https://en.wikipedia.org/wiki/Chromatic_aberration https://en.wikipedia.org/wiki/Chromatic_aberration ?
    - cycomanic 1y ago
      Yes chromatic abberation is caused by dispersion.
      - lagrange77 1y ago
        Damn, outnerded.
- Lorin 1y ago
  What is causing the ghosting/delay when moving the glass over text?
  - kaptainscarlet 1y ago
    probably shaders are compiling and initialising on every drag movement
- IshKebab 1y ago
  Looks nice! It's too slow to actually use though. Op's is much smoother.
  - 1y ago
msy 1y ago
Impressive but also impressive in that scrolling down through the examples makes my fully-loaded M4-Max Macbook Pro judder. I hate to imaging the performance of a full UI leveraging this stuff. Apple can do it in the UI because they can optimize the hell out of it.
- spicybright 1y ago
  Same, very laggy on my machine. The spectacular border effects also didn't work for me.
- StrangeDoctor 1y ago
  Yeah this site does not scroll like butter as it were. But I don’t think css can leverage the gpu in most (any?) cases. Apple has almost certainly baked something into the silicon to help handle the ui.
  - CognitiveLens 1y ago
    Most browsers will engage the GPU for compositing layers if they think the layers can be separated - https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/ https://www.smashingmagazine.com/2016/12/gpu-animation-doing...
    - StrangeDoctor 1y ago
      Interesting, thank you!
- kubeio 1y ago
  Haha, I’m the author of the post. I planned to fix the performance issues before posting here (since I knew HN would be quick to point that out), but somebody posted it first. You’re absolutely right — it’s pretty slow right now and needs optimization. And it’s not just the refraction/displacement map: plenty of other parts, like visualisations, aren’t optimized yet either.
  - 1y ago
cpojer 1y ago
I forked a JS library for liquid-glass and patched it up with some positioning fixes. It's fun to use in presentations. See https://github.com/nkzw-tech/liquid-glass https://github.com/nkzw-tech/liquid-glass
- socalgal2 1y ago
  Nice! I like yours more
WD-42 1y ago
Does this not work on Firefox? Just looks like regular gradients.
- al_borland 1y ago
  > Chrome‑only demo > The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter). You can still read the article and interact with the inline simulations in other browsers.
  - WD-42 1y ago
    I think I’ve trained myself to ignore shiny boxes outside the main text like that. Most of the time they are trying to sell something.
    - efilife 1y ago
      Me too. Sometimes when I browse the internet with my girfriend aside she comments on something and I have no idea what she means. She has to literally point at the screen and show me the text I've ignored and it's ALWAYS the biggest and most flashy font ever
      - josephcsible 1y ago
        That's quite common. See also https://ux.stackexchange.com/q/120541/115045 https://ux.stackexchange.com/q/120541/115045
RestartKernel 1y ago
By far the most impressive browser implementation of glass I've seen. Though it doesn't seem like it'd be viable in a "real" website due to compatibility and performance.
thrtythreeforty 1y ago
How are the vector field animations done? The whole website is impressive but I'd love to be able to build those.
- kubeio 1y ago
  I used React with vanilla SVG and Motion to animate.
  - qingcharles 1y ago
    The amount of work and love you put into making this effect and then the spectacular write-up is awe-inspiring. Thank you.
airstrike 1y ago
Strangely the "Playground" session seems to work well in Firefox but nothing else does
jrochkind1 1y ago
i'm amazed how good the write-up is, with amazing interactive visual aids!
LeoPanthera 1y ago
404'd?
tossit444 1y ago
404?
retox 1y ago
Maybe technically impressive but please don't use this on your websites, it looks like shit (the effect in general, not this specific implementation)
- SchemaLoad 1y ago
  It looks really good on iOS. I've been running the beta for a while and the execution is great.
internet2000 1y ago
Very close, but no cigar. The magnifying glass effect distorts the text just enough to make it look off compared to the real thing. The "l" in displacement is really tilted, and the angle changes as you move the lens around. https://i.imgur.com/PW4RAYq.png https://i.imgur.com/PW4RAYq.png
creatonez 1y ago
The thing that makes liquid glass actually somewhat work compared to previous shiny glass designs is the automatic tint adjustment for contrast. Nothing I've seen actually pulls this off.
- kubeio 1y ago
  That will be one of the goals of one of my next articles. But it cannot be implemented like Apple does (with a delay on switch between dark and light). What is possible though is to get an average of the current image behind the object and to extrapolate it to either black or white. Then the layer on top of it would do the opposite.
ryukoposting 1y ago
Very slick. Shame it doesn't work on Firefox.
_ZeD_ 1y ago
Chrome‑only demo The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter). You can still read the article and interact with the inline simulations in other browsers. Dishonor on your WHOLE FAMILY! dishonor on you, dishonor on your cow...
- ivolimmen 1y ago
  I had the same reaction but the weird thing is: it looked ok in FireFox..?
  - yreg 1y ago
    Yeah, curious. The mentioned backdrop-filter seems to be supported everywhere https://caniuse.com/?search=backdrop-filter https://caniuse.com/?search=backdrop-filter
    - Cu3PO42 1y ago
      backdrop-filter is supported by all major browsers, but specifically using SVG filters, which are more powerful and is out-of-spec, is only supported in Chromium-based browsers.
      - freehorse 1y ago
        Not sure if this is relevant, but while moving the slider around, in chromium i see 40% gpu utilisation, while in firefox less than 20% (macbook m3 pro). I do not observe any noticeable difference otherwise in terms of quality. PS Neat website and explanations, but talking about the liquid glass as a design principle in general, I would rather ui elements in a random website not use that much of gpu for not great reasons but maybe that's my problem of not thinking different.
      - bfgeek 1y ago
        > which are more powerful and is out-of-spec These are in the specification here: https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url And used by backdrop-filter here: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProp...
calrain 1y ago
Incredible work on the CSS and SVG! But liquid glass is such a horrible idea for a UI! Now I feel like an old person, but I live with glasses every day and absolutely love clean UI's. Introducing glass lens f*ckery just for the sake of it is terrible.
occoder 1y ago
Apple design nowadays should be something we point to and laugh at, not something to imitate. Apple lost the plot on design after Steve Jobs died and Jony Ive assumed full control. It's not Jony Ive's fault. That's the nature of their partnership, he created and Steve Jobs edited. Ive, of all people, probably lost the most when Steve Jobs died. It's all been downhill ever since. Ousting Jony Ive and putting Alan Dye in charge didn't help. The problem remains: there's no longer an editor in charge. Apple fans like to think that they've recovered a little since the iOS 7 debacle, but in reality it's just self delusion.
- SchemaLoad 1y ago
  I've been running the beta on my phone for a while ago, and I pretty much forgot about it. The new design works really well and is much less obtrusive than you'd imagine. Those few bad moments posted from the first dev beta have all been resolved now.
  - occoder 1y ago
    Most people aren't very discerning about user interface intricacies. Most people's reaction to the iOS 7 design disaster was: "ooh this feels like a whole new phone". So there's that.
  - DHPersonal 1y ago
    It still has plenty of consistency errors and issues for the devs. But even if they fix all the bugs, I still think the UI changes are regressive: now things are buried in even more icons; the menus warp, change color, and move in distracting ways; and text on button and menus have never been harder to read.
- uni_baconcat 1y ago
  You will see something similar to Liquid Glass in OneUI 9 or 10 or Material Design 4. I can tell.
levmiseri 1y ago
As much as I still dislike Liquid Glass, this is insanely impressive!
- maxvij 1y ago
  Agreed!
_pferreir_ 1y ago
I first tried the demos on Firefox and was like "wow, this looks fancy". Then, I saw there was a "Chrome-only" warning. I actually prefer the way it looks on Firefox, TBH.
maelito 1y ago
None of it looks usable. Perfect for digital family photos. Great article though.
hermitcrab 1y ago
Some serious work has gone into this article. Unconvinced about the usability case for 'glass'. Once again, Apple takes off and nukes it's developer ecosystem from orbit.
miyuru 1y ago
Netlfix's logged out UI has this glass effect for background for some time and it slows down the whole site. https://www.netflix.com/browse/genre/839338 https://www.netflix.com/browse/genre/839338
meindnoch 1y ago
Apple lost it when Johnny Ive died.
gyomu 1y ago
This is cool and a nice writeup but - Liquid Glass is the totality of the design language, including elements close to one another merging together meta-balls like, the different tinting/clear modes, the controls being on a distinct layer from the content... This is "just" a glass shader.
- jansan 1y ago
  That merging can be done with another, much simple filter and people have been doing it for years. It has been called the "Goo" filter. Here is an implementation: https://codepen.io/lenymo/pen/pJzWVy https://codepen.io/lenymo/pen/pJzWVy
mirekrusin 1y ago
Good work and pretty but part of me thinks - ah, ok, that's why our 12 orders of magnitude faster computers than zx spectrum lag more.
- Gigachad 1y ago
  Surprisingly the actual liquid glass ui seems to be perfect 120hz smooth on my 4 year old iPhone.
azatom 1y ago
Why is it so loud? On same machine Cyberpunk2077 goes with highest settings with same fan noise.
no_time 1y ago
In the announcement thread here about Liquid Glass there was a guy predicting an avalanche of people implementing this effect badly everywhere they can. Well, here we go.
stanko 1y ago
Nice write up! I'm always happy to see interactive articles. As someone who also do interactive articles from time to time, I'm wondering what is the tech stack you are using to make these?
- kubeio 1y ago
  It is a simple React + Motion + Tailwind + Vanilla SVG here. But it was just a first try, lots of things are still unoptimized. I'll try to do better in a next article.
arbayi 1y ago
https://github.com/dashersw/liquid-glass-js https://github.com/dashersw/liquid-glass-js maybe you can also check this out?
redbell 1y ago
Excellent attempt despite the browser support limitations. The inline, interactive examples were also an added value, which, at some point, I felt like I was reading one of Ciechanowski's articles (https://ciechanow.ski/ https://ciechanow.ski/).
buibuibui 1y ago
I think the bounciness of the elements is also a very charming characteristic part of the Liquid Glass UI that Apple introduces. But recreating that is probably very difficult with web technologies.
arghwhat 1y ago
Neat! Doesn't look particularly pleasant as the edges have high contrast single-pixel width artifacts, but maybe it's possible to smooth that out. Could also just be a quirk in chrome's svg/backdrop filter support that they'll fix.
jansan 1y ago
I was actually thinking about implementing exactly this (using feDisplacementMap), but never found time and I was not sure if it would be possible at all. Great to see that it actually works and someone with deep SVG knowledge implemented it. The whole blog entry is a piece of art and on one level with Bartosz Ciechanowski's work. If you want to make money from it, you will have to find less niche subject's, though.
martzoukos 1y ago
Soon we'll be creating black hole simulations to run a browser effect.
a022311 1y ago
Despite being on Firefox and seeing the effects half-working (at least we get performance ;D), this looks like the best implementation I've seen up until now (for some reason I was researching it a lot the last few days). What I loved most though is the website design and the carefully crafted interactive visualizations! For me, they're on the same level as those of Bartosz Ciechanowski and Josh Comeau. I really want to see the source code...
- kubeio 1y ago
  Trust me, you don't want to see the source code right now. But I'll do another article and possibly open-source a library of it.
pshirshov 1y ago
I'm just wondering if the new ray-traced scrollbars and buttons are more functional and would make me more productive than ancient text-mode turbo vision ones, or those in Windows 3.
tyiz 1y ago
[dead]
diabllicseagull 1y ago
I guess we all knew that liquid glass design language was gonna leak into the web eventually but if I see a website drain my battery so it can distort the text I’m trying to read I won’t be staying. The stuttering has already been pointed out here so I won’t pile on.
jjuup 1y ago
Well done. Especially love the whole article layout and quality, aside from the good execution. Liquid glass as concept doesn't really enhance practical UX that much (and might even make it worse if overused), but it's a nice experience and something new and delightful.
andredurao 1y ago
I'm not sure about other browsers but using Chrome on linux the magnifying glass demo was weird. Though it looked like some glass distortion I couldn't drag it around vertically :(
seanobannon 1y ago
Don’t blame the author for the chrome only demo, blame Apple, and this bug from 2014! https://bugs.webkit.org/show_bug.cgi?id=127102 https://bugs.webkit.org/show_bug.cgi?id=127102
lovegrenoble 1y ago
Fantastic demo, very slick!
ghc 1y ago
Fantastic job! Great writeup too!
lovegrenoble 1y ago
insightful and nice work
wraptile 1y ago
What a beautiful demo and great highlight that Liquid Glass is not all "liquid ass", as in it could actually be usable for very specific niches. The Magnifying Glass example is just gorgeous!
- dmix 1y ago
  The best use of it on the iPhone beta is definitely the video player overlay UI and a floating search box. Two things highlighted in the post.
  - wraptile 1y ago
    Funny because these two examples were the ones I found completely undesirable and would never implement myself. It's just not legible enough to be usable.
coolThingsFirst 1y ago
One of the greatest tech related blogposts that I have EVER read.
sroussey 1y ago
It’s a shame it does not work on iOS 26.
cantalopes 1y ago
awesome! brings back memories days of creative coding for fun
seanw265 1y ago
I'm still not sold on liquid glass as a whole. It can be quite beautiful, but in the demos provided (and even in Apple's promotional materials) I think readability of UI elements suffers tremendously. That said, I've seen many attempt to recreate the effect on web but you've outdone them all. The variety and mathematical modeling of edge shapes elevates this implementation above the rest. If you decide to continue with this, I would love to see: 1. chromatic aberration along displaced areas 2. higher resolution in the refraction Many people discussing performance issues but this runs like butter on my M3 Pro.
wetpaws 1y ago
[dead]
0x20cowboy 1y ago
If the author is around here, I think there is an error in the Equations section. In the Convex Circle equation I think it has an extra set of parens. sqrt(1-(1-x)^2) I believe as it is it’s just linear.
- kubeio 1y ago
  Thanks for highlighting that. Prettier was actually the culprit because of the non-JS `^` operator. Fixed it.

495 points by Sateeshm 1y ago

Very nice, I really like the vector animations :) One thing I'd say is to apply some anti-aliasing (MSAA, SMAA?)—even on a 4K display with a pixel density of 64.3 px/cm, the jaggies are visible, especially because of the extreme contrast of the caustics behind the dark background.

rezmason 1y ago
I'm not especially familiar with this, but I believe making the SVG element larger can increase its filter effects' resolution, and then using CSS transforms to scale the element's parent will return it to its original size, but with a higher resolution result. From there, additional changes to the filter effect (to incorporate a subtle blur for instance) may help it over the finish line. Regardless, this is a great writeup for changes I wish to never see in ordinary UI.

altairprime 1y ago

I’d be very interested to compare the power efficiency of this implementation versus the OS-native version of same over a 12-hour benchmark.

tkzed49 1y ago

this is the first one I've seen that isn't just feTurbulence. Thank you for doing it right! I've been thinking about it since the first liquid glass clones!

explosion-s 1y ago

I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app https://real-glass.vercel.app - The tricky thing for me was making it refract real HTML elements behind

davidmurdoch 1y ago
Impressive!
cycomanic 1y ago
Cool this looks like it even has dispersion, i.e. colors separate at the edge of the glass element.
- lagrange77 1y ago
  https://en.wikipedia.org/wiki/Chromatic_aberration https://en.wikipedia.org/wiki/Chromatic_aberration ?
  - cycomanic 1y ago
    Yes chromatic abberation is caused by dispersion.
    - lagrange77 1y ago
      Damn, outnerded.
Lorin 1y ago
What is causing the ghosting/delay when moving the glass over text?
- kaptainscarlet 1y ago
  probably shaders are compiling and initialising on every drag movement
IshKebab 1y ago
Looks nice! It's too slow to actually use though. Op's is much smoother.
- 1y ago

msy 1y ago

Impressive but also impressive in that scrolling down through the examples makes my fully-loaded M4-Max Macbook Pro judder. I hate to imaging the performance of a full UI leveraging this stuff. Apple can do it in the UI because they can optimize the hell out of it.

spicybright 1y ago
Same, very laggy on my machine. The spectacular border effects also didn't work for me.
StrangeDoctor 1y ago
Yeah this site does not scroll like butter as it were. But I don’t think css can leverage the gpu in most (any?) cases. Apple has almost certainly baked something into the silicon to help handle the ui.
- CognitiveLens 1y ago
  Most browsers will engage the GPU for compositing layers if they think the layers can be separated - https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/ https://www.smashingmagazine.com/2016/12/gpu-animation-doing...
  - StrangeDoctor 1y ago
    Interesting, thank you!
kubeio 1y ago
Haha, I’m the author of the post. I planned to fix the performance issues before posting here (since I knew HN would be quick to point that out), but somebody posted it first. You’re absolutely right — it’s pretty slow right now and needs optimization. And it’s not just the refraction/displacement map: plenty of other parts, like visualisations, aren’t optimized yet either.
- 1y ago

cpojer 1y ago

I forked a JS library for liquid-glass and patched it up with some positioning fixes. It's fun to use in presentations. See https://github.com/nkzw-tech/liquid-glass https://github.com/nkzw-tech/liquid-glass

socalgal2 1y ago
Nice! I like yours more

WD-42 1y ago

Does this not work on Firefox? Just looks like regular gradients.

al_borland 1y ago
> Chrome‑only demo > The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter). You can still read the article and interact with the inline simulations in other browsers.
- WD-42 1y ago
  I think I’ve trained myself to ignore shiny boxes outside the main text like that. Most of the time they are trying to sell something.
  - efilife 1y ago
    Me too. Sometimes when I browse the internet with my girfriend aside she comments on something and I have no idea what she means. She has to literally point at the screen and show me the text I've ignored and it's ALWAYS the biggest and most flashy font ever
    - josephcsible 1y ago
      That's quite common. See also https://ux.stackexchange.com/q/120541/115045 https://ux.stackexchange.com/q/120541/115045

RestartKernel 1y ago

By far the most impressive browser implementation of glass I've seen. Though it doesn't seem like it'd be viable in a "real" website due to compatibility and performance.

thrtythreeforty 1y ago

How are the vector field animations done? The whole website is impressive but I'd love to be able to build those.

kubeio 1y ago
I used React with vanilla SVG and Motion to animate.
- qingcharles 1y ago
  The amount of work and love you put into making this effect and then the spectacular write-up is awe-inspiring. Thank you.

airstrike 1y ago

Strangely the "Playground" session seems to work well in Firefox but nothing else does

jrochkind1 1y ago

i'm amazed how good the write-up is, with amazing interactive visual aids!

LeoPanthera 1y ago

404'd?

tossit444 1y ago

404?

retox 1y ago

Maybe technically impressive but please don't use this on your websites, it looks like shit (the effect in general, not this specific implementation)

SchemaLoad 1y ago
It looks really good on iOS. I've been running the beta for a while and the execution is great.

internet2000 1y ago

Very close, but no cigar. The magnifying glass effect distorts the text just enough to make it look off compared to the real thing. The "l" in displacement is really tilted, and the angle changes as you move the lens around. https://i.imgur.com/PW4RAYq.png https://i.imgur.com/PW4RAYq.png

creatonez 1y ago

The thing that makes liquid glass actually somewhat work compared to previous shiny glass designs is the automatic tint adjustment for contrast. Nothing I've seen actually pulls this off.

kubeio 1y ago
That will be one of the goals of one of my next articles. But it cannot be implemented like Apple does (with a delay on switch between dark and light). What is possible though is to get an average of the current image behind the object and to extrapolate it to either black or white. Then the layer on top of it would do the opposite.

ryukoposting 1y ago

Very slick. Shame it doesn't work on Firefox.

_ZeD_ 1y ago

Chrome‑only demo The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter). You can still read the article and interact with the inline simulations in other browsers. Dishonor on your WHOLE FAMILY! dishonor on you, dishonor on your cow...

ivolimmen 1y ago
I had the same reaction but the weird thing is: it looked ok in FireFox..?
- yreg 1y ago
  Yeah, curious. The mentioned backdrop-filter seems to be supported everywhere https://caniuse.com/?search=backdrop-filter https://caniuse.com/?search=backdrop-filter
  - Cu3PO42 1y ago
    backdrop-filter is supported by all major browsers, but specifically using SVG filters, which are more powerful and is out-of-spec, is only supported in Chromium-based browsers.
    - freehorse 1y ago
      Not sure if this is relevant, but while moving the slider around, in chromium i see 40% gpu utilisation, while in firefox less than 20% (macbook m3 pro). I do not observe any noticeable difference otherwise in terms of quality. PS Neat website and explanations, but talking about the liquid glass as a design principle in general, I would rather ui elements in a random website not use that much of gpu for not great reasons but maybe that's my problem of not thinking different.
    - bfgeek 1y ago
      > which are more powerful and is out-of-spec These are in the specification here: https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url https://drafts.fxtf.org/filter-effects-1/#typedef-filter-url And used by backdrop-filter here: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProp...

calrain 1y ago

Incredible work on the CSS and SVG! But liquid glass is such a horrible idea for a UI! Now I feel like an old person, but I live with glasses every day and absolutely love clean UI's. Introducing glass lens f*ckery just for the sake of it is terrible.

occoder 1y ago

Apple design nowadays should be something we point to and laugh at, not something to imitate. Apple lost the plot on design after Steve Jobs died and Jony Ive assumed full control. It's not Jony Ive's fault. That's the nature of their partnership, he created and Steve Jobs edited. Ive, of all people, probably lost the most when Steve Jobs died. It's all been downhill ever since. Ousting Jony Ive and putting Alan Dye in charge didn't help. The problem remains: there's no longer an editor in charge. Apple fans like to think that they've recovered a little since the iOS 7 debacle, but in reality it's just self delusion.

SchemaLoad 1y ago
I've been running the beta on my phone for a while ago, and I pretty much forgot about it. The new design works really well and is much less obtrusive than you'd imagine. Those few bad moments posted from the first dev beta have all been resolved now.
- occoder 1y ago
  Most people aren't very discerning about user interface intricacies. Most people's reaction to the iOS 7 design disaster was: "ooh this feels like a whole new phone". So there's that.
- DHPersonal 1y ago
  It still has plenty of consistency errors and issues for the devs. But even if they fix all the bugs, I still think the UI changes are regressive: now things are buried in even more icons; the menus warp, change color, and move in distracting ways; and text on button and menus have never been harder to read.
uni_baconcat 1y ago
You will see something similar to Liquid Glass in OneUI 9 or 10 or Material Design 4. I can tell.

levmiseri 1y ago

As much as I still dislike Liquid Glass, this is insanely impressive!

maxvij 1y ago
Agreed!

_pferreir_ 1y ago

I first tried the demos on Firefox and was like "wow, this looks fancy". Then, I saw there was a "Chrome-only" warning. I actually prefer the way it looks on Firefox, TBH.

maelito 1y ago

None of it looks usable. Perfect for digital family photos. Great article though.

hermitcrab 1y ago

Some serious work has gone into this article. Unconvinced about the usability case for 'glass'. Once again, Apple takes off and nukes it's developer ecosystem from orbit.

miyuru 1y ago

Netlfix's logged out UI has this glass effect for background for some time and it slows down the whole site. https://www.netflix.com/browse/genre/839338 https://www.netflix.com/browse/genre/839338

meindnoch 1y ago

Apple lost it when Johnny Ive died.

gyomu 1y ago

This is cool and a nice writeup but - Liquid Glass is the totality of the design language, including elements close to one another merging together meta-balls like, the different tinting/clear modes, the controls being on a distinct layer from the content... This is "just" a glass shader.

jansan 1y ago
That merging can be done with another, much simple filter and people have been doing it for years. It has been called the "Goo" filter. Here is an implementation: https://codepen.io/lenymo/pen/pJzWVy https://codepen.io/lenymo/pen/pJzWVy

mirekrusin 1y ago

Good work and pretty but part of me thinks - ah, ok, that's why our 12 orders of magnitude faster computers than zx spectrum lag more.

Gigachad 1y ago
Surprisingly the actual liquid glass ui seems to be perfect 120hz smooth on my 4 year old iPhone.

azatom 1y ago

Why is it so loud? On same machine Cyberpunk2077 goes with highest settings with same fan noise.

no_time 1y ago

In the announcement thread here about Liquid Glass there was a guy predicting an avalanche of people implementing this effect badly everywhere they can. Well, here we go.

stanko 1y ago

Nice write up! I'm always happy to see interactive articles. As someone who also do interactive articles from time to time, I'm wondering what is the tech stack you are using to make these?

kubeio 1y ago
It is a simple React + Motion + Tailwind + Vanilla SVG here. But it was just a first try, lots of things are still unoptimized. I'll try to do better in a next article.

arbayi 1y ago

https://github.com/dashersw/liquid-glass-js https://github.com/dashersw/liquid-glass-js maybe you can also check this out?

redbell 1y ago

Excellent attempt despite the browser support limitations. The inline, interactive examples were also an added value, which, at some point, I felt like I was reading one of Ciechanowski's articles (https://ciechanow.ski/ https://ciechanow.ski/).

buibuibui 1y ago

I think the bounciness of the elements is also a very charming characteristic part of the Liquid Glass UI that Apple introduces. But recreating that is probably very difficult with web technologies.

arghwhat 1y ago

Neat! Doesn't look particularly pleasant as the edges have high contrast single-pixel width artifacts, but maybe it's possible to smooth that out. Could also just be a quirk in chrome's svg/backdrop filter support that they'll fix.

jansan 1y ago

I was actually thinking about implementing exactly this (using feDisplacementMap), but never found time and I was not sure if it would be possible at all. Great to see that it actually works and someone with deep SVG knowledge implemented it. The whole blog entry is a piece of art and on one level with Bartosz Ciechanowski's work. If you want to make money from it, you will have to find less niche subject's, though.

martzoukos 1y ago

Soon we'll be creating black hole simulations to run a browser effect.

a022311 1y ago

Despite being on Firefox and seeing the effects half-working (at least we get performance ;D), this looks like the best implementation I've seen up until now (for some reason I was researching it a lot the last few days). What I loved most though is the website design and the carefully crafted interactive visualizations! For me, they're on the same level as those of Bartosz Ciechanowski and Josh Comeau. I really want to see the source code...

kubeio 1y ago
Trust me, you don't want to see the source code right now. But I'll do another article and possibly open-source a library of it.

pshirshov 1y ago

I'm just wondering if the new ray-traced scrollbars and buttons are more functional and would make me more productive than ancient text-mode turbo vision ones, or those in Windows 3.

tyiz 1y ago

[dead]

diabllicseagull 1y ago

I guess we all knew that liquid glass design language was gonna leak into the web eventually but if I see a website drain my battery so it can distort the text I’m trying to read I won’t be staying. The stuttering has already been pointed out here so I won’t pile on.

jjuup 1y ago

Well done. Especially love the whole article layout and quality, aside from the good execution. Liquid glass as concept doesn't really enhance practical UX that much (and might even make it worse if overused), but it's a nice experience and something new and delightful.

andredurao 1y ago

I'm not sure about other browsers but using Chrome on linux the magnifying glass demo was weird. Though it looked like some glass distortion I couldn't drag it around vertically :(

seanobannon 1y ago

Don’t blame the author for the chrome only demo, blame Apple, and this bug from 2014! https://bugs.webkit.org/show_bug.cgi?id=127102 https://bugs.webkit.org/show_bug.cgi?id=127102

lovegrenoble 1y ago

Fantastic demo, very slick!

ghc 1y ago

Fantastic job! Great writeup too!

lovegrenoble 1y ago

insightful and nice work

wraptile 1y ago

What a beautiful demo and great highlight that Liquid Glass is not all "liquid ass", as in it could actually be usable for very specific niches. The Magnifying Glass example is just gorgeous!

dmix 1y ago
The best use of it on the iPhone beta is definitely the video player overlay UI and a floating search box. Two things highlighted in the post.
- wraptile 1y ago
  Funny because these two examples were the ones I found completely undesirable and would never implement myself. It's just not legible enough to be usable.

coolThingsFirst 1y ago

One of the greatest tech related blogposts that I have EVER read.

sroussey 1y ago

It’s a shame it does not work on iOS 26.

cantalopes 1y ago

awesome! brings back memories days of creative coding for fun

seanw265 1y ago

I'm still not sold on liquid glass as a whole. It can be quite beautiful, but in the demos provided (and even in Apple's promotional materials) I think readability of UI elements suffers tremendously. That said, I've seen many attempt to recreate the effect on web but you've outdone them all. The variety and mathematical modeling of edge shapes elevates this implementation above the rest. If you decide to continue with this, I would love to see: 1. chromatic aberration along displaced areas 2. higher resolution in the refraction Many people discussing performance issues but this runs like butter on my M3 Pro.

wetpaws 1y ago

[dead]

0x20cowboy 1y ago

If the author is around here, I think there is an error in the Equations section. In the Convex Circle equation I think it has an extra set of parens. sqrt(1-(1-x)^2) I believe as it is it’s just linear.

kubeio 1y ago
Thanks for highlighting that. Prettier was actually the culprit because of the non-JS `^` operator. Fixed it.