Barre de navigation magnétique à point élastique
Les liens se laissent attirer par le curseur comme des aimants, et un point à ressort les suit en s'étirant selon sa vitesse.
Réglages
Code
<nav class="uvq12-ml" aria-label="Navigation"><ul><li><a href="#" aria-current="page">Travail</a></li><li><a href="#">Studio</a></li><li><a href="#">Blog</a></li><li><a href="#">Boutique</a></li><li><a href="#">Contact</a></li></ul><span class="dt" aria-hidden="true"></span></nav>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Une barre de navigation physique : chaque lien est attiré vers le curseur comme un aimant, et un petit point en dégradé sous la barre suit le lien survolé ou ciblé grâce à une vraie simulation de ressort. Il s'étire quand il va vite et se pose avec une oscillation. Un clic fait du lien sa nouvelle position de repos. Pour les studios, portfolios et sites personnels.
Les couleurs principale et secondaire forment le dégradé du point. Ne dépasse pas cinq ou six liens ; l'effet aimant est ignoré sur écran tactile et avec le mouvement réduit.