3:41:41 PMEST
Having seen a lot of liquid UI around X, I thought it would be a fun experiment to build that particular type of interaction. In most cases I get a rough design in Figma so that I have a direction on how to prompt Claude. But in this one, I really wanted something simple to showcase the liquid UI interactions.
Using the wireframe skill I built while working on the Content Aware Slider, I was able to visualize this magnetic interaction when you got close to hovering over a button. But more importantly, to tweak the morphing animations, the component has a setting that drops the speed down to 20%. It's such a simple addition, but it makes it so much easier to fix any weird behavior that inevitably comes up.
W
Wireframe
E
Slow Animation
Previous