navAdvancedanimation

Gooey Pill Navigation

A nav where the active indicator pill morphs between items with a goo SVG filter.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a pill-shaped nav with a 'gooey' active indicator. Use an SVG goo filter (feGaussianBlur + feColorMatrix) on the nav so the moving pill blends with the nav's background. Click events update which link is active and animate the pill's translateX and width to match.

Code

html

<!--
  Source: Lucas Bebber
  https://codepen.io/lbebber
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/gooey-nav
-->
<nav class="goo"><span class="pill"></span><a class="on" data-i="0">Home</a><a data-i="1">Gallery</a><a data-i="2">About</a><a data-i="3">Submit</a></nav><svg style="position:absolute;width:0;height:0"><filter id="g"><feGaussianBlur in="SourceGraphic" stdDeviation="6"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10"/></filter></svg>