Tools I use: Figma, Claude, Paper, Motion, Tailwind CSS, Swift
PG Gonni
Forlì: 44.2093° N, 12.0673° EMontréal: 45.4905° N, 73.5587° W

PG Gonni

Design Engineer

Experiment

Profile menu

An update to Tato's stock profile menu that morphs as a single fluid surface.



I wanted to improve upon our profile menu at Tato. When I joined, it was a standard shadcn/ui dropdown, the one that ships with the sidebar component. While the original dropdown did its job, I wanted to build something with a bit more flair. Inspired by liquid glass's shifting forms, I wanted to create something that felt fluid and part of a single morphing surface.

I've also been using Base UI more frequently over Radix, and I've been loving the interface and the DX improvements the creators have made. In particular, I really love the render function which provides easy access to properties and state of the component.

motion
useMeasure
Base UI
tailwind
react