kris-kay

This project isn’t meant to recreate Liquid Glass. I started working on it because I needed UI that would look good over unknown or changing backgrounds, like in a video game, over video, or in my case AR.

True, innovation is much easier when you have full control over the hardware. My project would have taken a fifth of the time if I were only targeting Safari on Apple devices. But I trust that clever engineers and developers will keep finding ways to optimize effects for other platforms and devices.

> I don't think this is a kind of moat they created with the explicit intention to make web apps worse.

Yes, exactly! Personally, I’m glad that Apple invests in this kind of R&D. They push the whole field forward as others try to catch up. I doubt they’ll ever make their UI freely available to all other platforms, but I do hope CSS continues to add features that make these effects much easier to implement on the web.

> this would be a lot more useful to me on mobile if I could hide or collapse the box.

Are you referring to the code preview area?

In my first implementation, I had a small demo rectangle above the generator UI, but even a small one took up too much space and made the UI harder to use. If I let the whole page scroll, people got frustrated because it wasn’t obvious they needed to stay at the top of the scroll to see the rectangle they were editing.

Since this tool is mainly intended for coding, I’m prioritizing the desktop experience, with mobile acting more as a quick preview and proof that it works on mobile. That said, if you know of any similar UI that works really well on mobile, please share links!

My favorite browser is Firefox, so I hope not. The examples didn't work in Safari either. Look cool in Chrome though.

> If any aspect of Liquid Glass is successful it will be when it’s used sparingly to delight in places that are low stakes and where other affordances are present

I fully agree with you there. Though I like the Liquid Glass look overall, I think Apple is overusing it. It definitely shouldn’t be a background for paragraph-sized text (e.g., I can’t read half the text in banners on my phone).

Some context about this project:

    - I’m not trying to recreate Liquid Glass (though happy to chat about it)
    - Goal: Production-usable → must at least work on current (desktop and mobile) versions of Chrome, Safari, and Firefox, on both Apple and PC/Android devices
    - Goal: Optimize the developer experience (more relevant to the glass SCSS library I’m working on) → ideally, people can add a class (plus an optional wrapper) and it just works in most tech stacks. 

So my intended value adds are aesthetic polish and ease of use, rather than raw innovation.

Thank you for sharing potential implementation solutions. I'll research them and see if I can wrangle them to work cross-browser.

Your project looks awesome! I'm glad not to be the only one going 5+ layers deep into the shadows. The addition of Light Rays is particularly impressive!

I agree, even a very subtle texture makes a big difference!

Not anymore! We live in the golden age of display: grid; + place-items: center;

Just saw that you added this project to the spark-joy list. Thanks so much!

All good! Thanks for looking into it.

thank you!

Nice! Spark Joy looks like an awesome resource.

Yes thank you

I mean you are right...but I still want to make the nicest thing I can make for the web.

Thanks!

Interesting, no there are no scroll effects anywhere on the page. Would you mind sharing what device, browser, and level of internet connection you're using?

Thank you!

Thanks for stating my side of this trade-off and for the nice feedback!

True, but it wasn't meant to. I installed the 2nd beta on my phone as well and like it so far.

haha thanks!

So you need a video HTML tag with all of these attributes: <video autoplay muted loop webkit-playsinline playsinline sizes="100vw">

and the CSS: .bg-video { position: fixed; z-index: -1; inset: 0; width: 100%; (don't set this to 100vw or you will have scrollbar issues) height: 100%; min-height: 100vh; object-fit: cover; object-position: center; pointer-events: none; }

The part I still need to do myself is provide multiple video sizes and show the one that's most suitable for the viewport.

Thanks, I hope it can be useful for people, especially when I make the library public.

I fully agree that Liquid Glass is almost impossible to replicate with browser technology without using 3D shaders. But I’m curious to know your opinion about why apps that rely on web views are inferior for users (apart from the above reason). I certainly think Apple thinks they are inferior, but I'm not sure how devs and users feel about it.

That is a very impressive attempt at Liquid Glass! The whole cross-browser and cross-platform bit is still a challenge sadly → "Only works on Impeller, so Web, Windows, and Linux are entirely unsupported for now"

The moat is real! I haven't tried recreating Liquid Glass in the browser yet. From what I've seen, it's possible, but not in a practical, cross-browser, "can be applied to an arbitrary component" kind of way.

Of course, as soon as we figure out how to get it done, Apple will move on to the next thing. I'm okay with that though. It was a bold move, and I can't imagine how much time and money Apple spent making Liquid Glass look that good.

Yes, thank you for answering. The textures are free to use, but the URL should only be used for prototyping. Here is the website: https://www.transparenttextures.com/

Good catch! It's not a fading-in issue; the shadow is just scrolling out of view. I designed those "overhang" box-shadows to be applied to the inside of an element rather than cast down from one. I see now that I need to apply the latter kind in this case. Thanks for letting me know!

I did read Josh's great article and had a go at implementing the tutorials. Unfortunately, I ran into some issues with the border-radius via SVG mask bit. It worked great on a hardcoded element, but I still need to figure out how to make it work across a whole component library where the border-radius changes based on the user's branding and container-queries.

I agree that Liquid Glass's edge distortion looks great, and I will try my hand at recreating it eventually. For the current project, I aimed to create a material that looked polished, worked consistently across browsers, and didn't use real 3D. And you're right about the effect being more visible when moving over a fixed background. The demo site I'm working on for the library does this, it's just not ready yet.

Thanks for sharing the resources!