Andrew Prifer

UI, UX, 3D. Cooking something new. Prev: @LumaLabsAI @theatre_js @splinetool

[Andrew Prifer @AndrewPrifer]

Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web.

- Shape morphing
- All properties animatable
- Dynamic refraction and reflection
- Adaptive tint
- Adaptive specular highlight
- Dispersion
- Full html integration
- Super fast layout engine that works across Canvas and html
- Pointer event handling
- Framework and renderer-agnostic low level API
- High level React API
- Ootb @threejs and r3f integration

And lots more.

Read on for implementation details and demos.

[Sparseal @sparseal]

Introducing CozyBlanket Pro

A next-generation mesh optimization and cleanup toolkit, built from the ground up with AI-assisted retopology, cutting-edge UV tools, and powerful tool system to transform complex geometry into clean, efficient, production-ready assets.

[Andrew Prifer @AndrewPrifer]

@geniegetsme It looks great! One tiny bug that prevents me from signing up: rejecting permission to access my contacts puts me in a redirect loop to the app permissions page in the settings app, not letting me complete the signup flow.

[Andrew Prifer @AndrewPrifer]

@nishimiya Happy birthday Josh! Which time zone so I know when I should stop being nice

[Andrew Prifer @AndrewPrifer]

@0interestrates I remember doing lots of experiments with Davinci 3 back when there were zero safeguards but it was the first model that was instruction-tuned. Definitely lot more steerable than today’s models.

[Andrew Prifer @AndrewPrifer]

@ryry__mimi @column He’s hiding all the comments pointing it out too. 🤦‍♂️ Instant block.

[Andrew Prifer @AndrewPrifer]

@aidenybai @rayhanadev Whoa congrats! What happened in May? 😄

[Andrew Prifer @AndrewPrifer]

@designst3in @samdenty Yeah it’s spring driven squash + stretch wired to the velocity

[Andrew Prifer @AndrewPrifer]

Liquid Jiggle

Btw I'm working on a massive SDF / optics writeup. There's lots of interesting stuff going on in here that I haven't seen written about anywhere when researching, especially re: blending. Stay tuned.

[Andrew Prifer @AndrewPrifer]

Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web.

- Shape morphing
- All properties animatable
- Dynamic refraction and reflection
- Adaptive tint
- Adaptive specular highlight
- Dispersion
- Full html integration
- Super fast layout engine that works across Canvas and html
- Pointer event handling
- Framework and renderer-agnostic low level API
- High level React API
- Ootb @threejs and r3f integration

And lots more.

Read on for implementation details and demos.

[Andrew Prifer @AndrewPrifer]

@konstipaulus @KMkota0 For performance you’ll need dependency tracking and caching (which means identity matters), so whether the facade is immediate mode or retained, you’ll be maintaining a graph structure somewhere.

[Andrew Prifer @AndrewPrifer]

Design engineer friends, I made a new thing to make your life easier. Releasing Liquid Layout, a small, powerful, familiar and extensible layout engine for the web, inspired by SwiftUI's engine. It's an excellent choice when you need to do layout where CSS doesn't help you, like the Canvas.

It is powerful out of the box, and can be integrated anywhere. Build a layout tree, then query the calculated positions and dimensions on the nodes.

- Zero dependencies, 4.5 KiB
- Beautiful API
- Fast
- Extensible: write your own layout nodes and use them together with the builtin ones!
- Batteries included: VStack, HStack, Padding, etc...

The layout in the below @threejs demo is driven entirely with Liquid Layout. Also, I heard ya'll like Lissajous curves. :)

[Andrew Prifer @AndrewPrifer]

@konstipaulus @KMkota0 I mean, Figma got away with having only a super minimal subset of flexbox for *years*. You can definitely build a simplified version of it yourself without much trouble.

[Andrew Prifer @AndrewPrifer]

Thank you! The SwiftUI layout model is super simple (much simpler than flexbox), so not very long. I probably iterated more on the API than the internals haha.

Flexbox is not impossible to implement yourself, but a lot more daunting especially if you want to fully stick to the spec.

The true reason I didn’t go with flexbox is I really wanted a minimal and extensible alternative. You take one look at the code and you immediately know what’s going on under the hood, and you can write your own node implementation in a couple lines. So e.g. if you want a certain type of grid, you can just make it. This came from my experience with SwiftUI, it is great that you can just implement your own layouts when you need to.

Btw another nice JS flexbox implementation which is not super well-known is the layout engine NativeScript uses on iOS, you might want to take a look at that too. :)

[Andrew Prifer @AndrewPrifer]

@konstipaulus @KMkota0 Btw the Pilates docs mention one of the big advantages of JS-based engines I forgot to talk about, which is that for a small-enough number of nodes, the marshaling cost ends up being much greater than any speed you gain by running the code in WASM vs JS.

[daniel petho @nonzeroexitcode]

browsers mostly skip updating hover state while you scroll

so I made super-hover, a tiny utility library that checks what's under your cursor every frame!

`pnpm add super-hover`

[Andrew Prifer @AndrewPrifer]

@_abilshr Thank you Abil! More on the way haha.

[Jacob @fat]

Finally got @amadeus to write about what goes into making our diffs so special.

A love letter to FE development: web workers, WASM, novel virtualization and memory management techniques, and more.

Fun read if you're a perf geek and hate blanking.

https://t.co/3Ka62eWGJq

[Andrew Prifer @AndrewPrifer]

@Baconbrix Congrats Evan!! You built something amazing!

[Andrew Prifer @AndrewPrifer]

@simplydt No overhead, in fact, all the builtin layouts are defined through the same API too. You are not "hooking into" things in a way that would accumulate cost, you're just defining a new type of layout node.

[Andrew Prifer @AndrewPrifer]

Thank you! SwiftUI was quite a departure from flexbox when I first encountered it and it takes some time to get used to the different mental model (especially since at first glance it might look similar, but they aren’t). It does the job very well and is intuitive enough when you get the hang of it though. Agree on the JS vs WASM point, JS is just easier to integrate, which especially matters here.

[Andrew Prifer @AndrewPrifer]

Yoga vs Liquid Layout

[Andrew Prifer @AndrewPrifer]

Different in a bunch of ways but mostly size and API.

Speed: both are linear-ish. Yoga will be a bit faster because of WASM, but not too much faster. You can still animate LL at 60 fps unless you have 1000s of nodes moving around simultaneously.

Size: Yoga is 100-150kb, LL is 4.5 kb.

Ergonomics: if you know SwiftUI, you already know Liquid Layout, it’s essentially the same algorithm. It’s easy to use and you can do most things you can do with flex box just as easily. A major difference is that LL is extensible. You can just write your own layout nodes and insert them anywhere because nodes are only negotiating with their children, there’s no global constraint solving going on.

This also makes it so that each node type has to be responsible for exactly one thing (hence why e.g. Padding is a separate node and not a builtin property of other layout types, if it were, we’d have to duplicate it everywhere).

Integration: The way you integrate it is very similar to Yoga. You build a tree of nodes, call layout, and read the calculated metrics from the nodes.

[Andrew Prifer @AndrewPrifer]

Play with the demo here: https://t.co/vWA3YJLa3A

[Andrew Prifer @AndrewPrifer]

Different in a bunch of ways but mostly size and API.

Speed: both are linear-ish. Yoga will be a bit faster because of WASM, but not too much faster. You can still animate LL at 60 fps unless you have 1000s of nodes moving around simultaneously.

Size: Yoga is 100-150kb, LL is 4.5 kb.

Ergonomics: if you know SwiftUI, you already know Liquid Layout, it’s essentially the same algorithm. It’s easy to use and you can do most things you can do with flex box just as easily. A major difference is that LL is extensible. You can just write your own layout nodes and insert them anywhere because nodes are only negotiating with their children, there’s no global constraint solving going on.

This also makes it so that each node type has to be responsible for exactly one thing (hence why e.g. Padding is a separate node and not a builtin property of other layout types, if it were, we’d have to duplicate it everywhere).

Integration: The way you integrate it is very similar to Yoga. You build a tree of nodes, call layout, and read the calculated metrics from the nodes.

[Andrew Prifer @AndrewPrifer]

Oops, forgot to post the actual demo for Liquid Layout. You can play with it here.

And if you haven't seen the layout library the demo is using, check out the quoted post below, it's quite good. ;)

https://t.co/vWA3YJLa3A

[Andrew Prifer @AndrewPrifer]

Design engineer friends, I made a new thing to make your life easier. Releasing Liquid Layout, a small, powerful, familiar and extensible layout engine for the web, inspired by SwiftUI's engine. It's an excellent choice when you need to do layout where CSS doesn't help you, like the Canvas.

It is powerful out of the box, and can be integrated anywhere. Build a layout tree, then query the calculated positions and dimensions on the nodes.

- Zero dependencies, 4.5 KiB
- Beautiful API
- Fast
- Extensible: write your own layout nodes and use them together with the builtin ones!
- Batteries included: VStack, HStack, Padding, etc...

The layout in the below @threejs demo is driven entirely with Liquid Layout. Also, I heard ya'll like Lissajous curves. :)