Tabs with a hover-following pill
A soft pill chases your cursor across the tabs and drifts back to the active one when you leave.
Settings
Code
<div class="uv-ftf"><span class="p"></span><button class="on">Popular</button><button>New</button><button>Nearby</button><button>Top</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 works well on desktop pages where people browse before they commit. Say, an events site with Popular, New, Nearby and Top this week, or a template marketplace. The pill previews where a click would land, which makes the row feel responsive even before anyone clicks. Often searched as hover tabs or a magic line navigation.
On touch screens there is no hover, so the pill simply jumps to the tapped tab. That is fine, but don't count on the effect for a mobile-first app. Keep the tint light; it should hint, not highlight.