All studies

Navigation

Gooey tabs

Icon tabs that rest as one liquid bar; the chosen one opens to show its label and separates from its neighbours like a drop letting go.

21 / 74

Where it earns its place

A compact switcher with a little material character: service pickers, product modes, a pricing toggle on a brand that can carry it.

What we changed

  • The goo filter now runs on a separate layer of plain blobs under the real buttons, so icons and labels stay crisp instead of being blurred and re-thresholded.
  • Recast as the studio's service switcher (Websites, Motion, WebGL, AI) with each service's copy and deliverables in the panel.
  • Tuned the one thing that matters: resting tabs touch, the chosen one takes 16px of air, and blur and alpha cut are set so the bridge lets go about two thirds of the way through the move.
  • Kept the original's full roving keyboard model; reduced motion turns the transitions off, and in the grid card the tabs cycle on their own until a pointer or focus arrives.