Magnetic navbar with springy dot
Links lean towards the cursor like magnets while a dot with spring physics follows them, stretching with its speed.
Settings
Code
<nav class="uvq12-ml" aria-label="Navigation"><ul><li><a href="#" aria-current="page">Work</a></li><li><a href="#">Studio</a></li><li><a href="#">Blog</a></li><li><a href="#">Shop</a></li><li><a href="#">Contact</a></li></ul><span class="dt" aria-hidden="true"></span></nav>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 Navigation
See all NavigationWhere to use it
A navigation bar with a sense of physics: each link is pulled a little towards the cursor as if magnetic, and a small gradient dot under the bar follows the hovered or focused link with a real spring simulation, stretching when it moves fast and settling with a wobble. Clicking a link makes it the new resting place. It suits studios, portfolios and personal sites.
The main and secondary colors make the gradient of the dot. Keep the links to five or six words at most, and the magnet effect is skipped on touch screens and with reduced motion.