Navbar magnética con punto elástico
Los enlaces se dejan atraer por el cursor y un punto con física de muelle los sigue, estirándose según la velocidad.
Ajustes
Código
<nav class="uvq12-ml" aria-label="Navegación"><ul><li><a href="#" aria-current="page">Trabajo</a></li><li><a href="#">Estudio</a></li><li><a href="#">Blog</a></li><li><a href="#">Tienda</a></li><li><a href="#">Contacto</a></li></ul><span class="dt" aria-hidden="true"></span></nav>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Navegación
Ver todos: NavegaciónDónde usarlo
Una barra de navegación con física: cada enlace se deja atraer un poco por el cursor como si fuera un imán, y un pequeño punto con degradado bajo la barra sigue al enlace señalado o enfocado con una simulación de muelle real, estirándose cuando va rápido y asentándose con un vaivén. Al pulsar un enlace pasa a ser su sitio de reposo. Encaja en estudios, portfolios y webs personales.
El color principal y el secundario forman el degradado del punto. No pases de cinco o seis enlaces; el efecto imán se omite en pantallas táctiles y con movimiento reducido.