REFERENCE
- Gallery page: https://magpui.com/en/i/gooey-tab-navigation-69f932
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/gooey-tab-navigation-69f932/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/gooey-tab-navigation-69f932/clip.mp4
- Original post: https://www.rareui.com/components/gooeynav by Rare UI
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A row of four dark tab pills with icons (Home, Changelog, Career, About). The active one is bright orange; clicking another tab makes the orange blob stretch toward it, merge for a moment with a gooey bridge, and settle on the new tab.
DESIGN SYSTEM
- Background #121212; tabs 28px high, #1E1E1E, radius 999px, 12px text #8A8A8A with 12px icons; active #FF4A1C with white text.
MOTION
- Active blob moves with a spring (stiffness 500, damping 32); its width stretches during the move (scaleX up to 1.5).
- SVG goo filter (feGaussianBlur 8 + feColorMatrix alpha 18 -7) on the blob layer creates the liquid bridge.
- Text color swaps at the midpoint, 150ms.
SECTIONS
- Tab list, goo blob layer, labels on top.
- States: idle, moving, hover (text brightens).
IMPLEMENTATION
- Motion layoutId for the blob, SVG filter on a separate layer so text stays sharp; role=tablist with arrow key navigation.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.
SUCCESS CHECK
- The blob visibly stretches and melts between tabs.
- Text stays crisp (not blurred by the filter).
- Arrow keys move between tabs.
