The latest articles on DEV Community by DGreat (@dgreat_45b76952cdaebc42bb). https://dev.to/dgreat_45b76952cdaebc42bb https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4108671%2Fcb12c0e5-742b-46c6-9a38-e2c6a825693d.png https://dev.to/dgreat_45b76952cdaebc42bb en DGreat Thu, 03 Sep 2026 20:26:15 +0000 https://dev.to/dgreat_45b76952cdaebc42bb/i-built-a-liquid-navigation-bar-with-css-js-no-libraries-50h1 https://dev.to/dgreat_45b76952cdaebc42bb/i-built-a-liquid-navigation-bar-with-css-js-no-libraries-50h1 <p>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.</p> <h2> How it works </h2> <p>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.</p> <p>No frameworks, no animation libraries — just HTML, CSS, and vanilla JS.</p> <h2> Get the code </h2> <p>I packaged it up as a drop-in component if you want to skip straight to using it in your own project:</p> <p>👉 <a href="https://dazzle0470.gumroad.com/l/pfdvh" rel="noopener noreferrer">https://dazzle0470.gumroad.com/l/pfdvh</a></p> <p>Would love feedback if you try it out, or ideas for other "liquid" UI interactions worth building next.</p> webdev programming productivity javascript