Segmented control with a hop
A gradient indicator that hops up and lands on the new option, like a small ball bouncing across.
Settings
Code
<div class="uv-fsj"><span class="p"></span><button class="on">New</button><button>Top</button><button>Nearby</button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
This control has a playful streak that suits consumer apps. Picture a restaurant finder where people flip between New, Top rated and Nearby, or a community feed sorting its posts. The hop makes switching feel light and a bit fun. A nice option if you want an animated segmented control or toggle tabs that don't look corporate.
Leave some room above the control, because the indicator rises briefly and can clip under a header. Keep it out of banking apps or admin panels, where calm beats cheerful. Short labels work best here.