Compass button
The needle of a brass compass hunts for the cursor anywhere on the page and wobbles with inertia before it settles.
Settings
Code
<button class="uvq01-cmp" type="button"><span class="dl" aria-hidden="true"><b>N</b><span class="nd"></span></span><span class="t">Get directions</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>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 Buttons
See all ButtonsWhere to use it
A directions button on a forest green pill with faint contour lines, like a corner of a hiking map. Its brass compass has a real needle driven by a spring simulation: it turns toward the pointer anywhere on the page, overshoots a little and settles. When the pointer leaves the window it swings back to north. Ideal for maps, store locators and travel guides.
The main color is the pill and the secondary color is the brass bezel, so navy with gold or sand with copper also work. The needle snaps straight to its target when reduced motion is on, and the global listener is removed when the component unmounts.