G/S — 741 / PREMIUM
Mercurio Gooey Navigation
Sección de navegación tipo píldora con indicador líquido gooey, estela elástica, rebote al seleccionar y retorno automático al elemento activo.
Navegación líquida con una microinteracción precisa
Mercurio Gooey Navigation convierte un menú horizontal compacto en una sección de navegación con personalidad propia. Dos manchas superpuestas se desplazan bajo cada opción y el filtro SVG gooey las fusiona visualmente para crear una estela líquida suave.
Al pasar el cursor o entrar con teclado, el indicador acompaña al elemento enfocado. Al hacer clic, el nuevo elemento pasa a ser el activo y la mancha principal ejecuta un pequeño rebote elástico. Cuando el usuario abandona el menú, el indicador vuelve automáticamente a la opción seleccionada.
El recurso está construido con HTML, CSS, SVG y JavaScript nativos, usa Manrope 600/700 y contempla navegación por teclado, prefers-reduced-motion y ajustes específicos para móvil.
DEMO / EN VIVO
Previsualiza
DEMO / LISTA PARA CARGAR
PROMPT MAESTRO / PREMIUM
Constrúyelo.
Obtén las instrucciones de dirección artística, estructura, comportamiento y tecnología necesarias para recrear una experiencia equivalente con tu herramienta de desarrollo asistido por IA.