3:41:41 PMEST

Morph Buttons

Morph Buttons

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.

CTRL/OPTION + CLICK and DRAG on a guide to duplicate it.

CLICK and DRAG on a ruler to create a guide.

RIGHT CLICK to delete a guide.

W

Wireframe

E

Slow Animation

#FFFFFF
SHIFT

+

and drag to make a selection