I wanted a nav bar that felt a little more alive than a standard tab bar, so I built a "liquid navigation" component — a bubble that dives, travels, and resurfaces under whichever icon is active.
How it works
The core trick is an SVG goo filter — a Gaussian blur followed by a contrast-boosted color matrix — which fuses overlapping shapes into one smooth blob instead of two hard-edged circles. On top of that, I used the Web Animations API to drive a 3-phase motion: dive down flush into the bar, travel sideways while submerged, then pop back up at the new position. That's what gives it the "liquid" feel instead of a flat slide.
No frameworks, no animation libraries — just HTML, CSS, and vanilla JS.
Get the code
I packaged it up as a drop-in component if you want to skip straight to using it in your own project:
👉 https://dazzle0470.gumroad.com/l/pfdvh
Would love feedback if you try it out, or ideas for other "liquid" UI interactions worth building next.
Top comments (1)
I Built a Liquid Navigation Bar with CSS & JS (No Libraries