kris-kay

8 ms·

1.
by kris-kay 1y ago
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.
2.
by kris-kay 1y ago
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 findi
3.
by kris-kay 1y ago
> 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 t
4.
by kris-kay 1y ago
> 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
5.
by kris-kay 1y ago
My favorite browser is Firefox, so I hope not. The examples didn't work in Safari either. Look cool in Chrome though.
6.
by kris-kay 1y ago
> 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,
7.
by kris-kay 1y ago
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!
8.
by kris-kay 1y ago
I agree, even a very subtle texture makes a big difference!
9.
by kris-kay 1y ago
Not anymore! We live in the golden age of display: grid; + place-items: center;
10.
by kris-kay 1y ago
Just saw that you added this project to the spark-joy list. Thanks so much!
11.
by kris-kay 1y ago
All good! Thanks for looking into it.
12.
by kris-kay 1y ago
thank you!
13.
by kris-kay 1y ago
Nice! Spark Joy looks like an awesome resource.
14.
by kris-kay 1y ago
Yes thank you
15.
by kris-kay 1y ago
I mean you are right...but I still want to make the nicest thing I can make for the web.
16.
by kris-kay 1y ago
Thanks!
17.
by kris-kay 1y ago
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?
18.
by kris-kay 1y ago
Thank you!
19.
by kris-kay 1y ago
Thanks for stating my side of this trade-off and for the nice feedback!
20.
by kris-kay 1y ago
True, but it wasn't meant to. I installed the 2nd beta on my phone as well and like it so far.
21.
by kris-kay 1y ago
haha thanks!
22.
by kris-kay 1y ago
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;
23.
by kris-kay 1y ago
Thanks, I hope it can be useful for people, especially when I make the library public.
24.
by kris-kay 1y ago
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 reas
25.
by kris-kay 1y ago
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"
26.
by kris-kay 1y ago
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 cou
27.
by kris-kay 1y ago
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/
28.
by kris-kay 1y ago
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 appl
29.
by kris-kay 1y ago
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
30.
by kris-kay 1y ago
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&#x2

More ›