Live data from Hacker News

Liquid Glass in the Browser: Refraction with CSS and SVG

kube.io

31–40 of 127 posts

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#31

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

What is causing the ghosting/delay when moving the glass over text?

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#33
post #21

Earlier quoted context omitted.

> 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.

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.

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

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#34

  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...

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#36
post #34

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...

I had the same reaction but the weird thing is: it looked ok in FireFox..?

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#37

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

Looks nice! It's too slow to actually use though. Op's is much smoother.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#38
post #34

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...

Works fine on Firefox tho

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#39
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.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#40
post #39

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…

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.
Post reply on HN