Back

Shop Inspired Navigation

A gooey effect experiment

Play around with the controls

There are plenty of beautifully designed apps, but Shop is one of the few that I think gets motion right. Tapping a product, opening a modal, or moving between screens all feel smooth because the interface maintains a sense of continuity through subtle layout animations. It isn't filled with flashy animations or effects that exist just to show off. Instead, every transition serves a purpose.

I tried recreating the navigation bar while experimenting with a few ideas of my own. The biggest addition was the gooey effect, mostly to see whether it complemented the design. I ended up keeping it, although it's desktop only. SVG filter-based gooey effects are still inconsistent across mobile browsers, so I decided to disable it there.

There were a few other ideas I explored that didn't make the final version. One of them was adding labels next to the icons, but they made the interface feel busier than I wanted. After experimenting with them for a while, I felt they didn't add enough value to justify the extra complexity, so I removed them.

And then I made the positioning configurable, allowing it to either stay centered or remain pinned.