Laboratorio de Animaciones
Colección de micro-interacciones UI listas para copiar y pegar. Diseñadas con Tailwind CSS y Framer Motion.
Botones e Interactividad
Botón Hamburguesa Animado
Micro-interacción clásica de menú con transformación suave a 'X'.
Importa el componente y controla el estado 'isOpen'.
Botón Volver Arriba
Botón flotante que aparece suavemente al hacer scroll. Esencial para páginas largas.
Baja para ver el botón aparecer 👇
¡Llegaste al final!
Agrégalo en tu layout principal para que esté disponible en todas las páginas.
Navegación y Estructura
Header Dinámico sencillo (Scroll)
Header que cambia de estilo al hacer scroll.
Haz scroll aquí dentro 👇
Copia el código en components/layout/ScrollHeader.tsx
Efectos Visuales y Texto
Scroll Parallax con Texto
Efecto de imagen sticky que se encoge suavemente al hacer scroll, revelando el contenido inferior.
Efecto Parallax
Scroll Suave
Contenido de ejemplo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, blanditiis soluta eius quam mminus pridem?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium reiciendis blanditiis aliquam aut fugit sint.
Calidad
Clean Code
Contenido de ejemplo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, blanditiis soluta eius quam mminus pridem?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium reiciendis blanditiis aliquam aut fugit sint.
Envuelve tu contenido con este componente. Requiere Framer Motion.
Enlaces con Revelado de Imagen
Enlaces elegantes que muestran una imagen flotante siguiendo el cursor al hacer hover.
Renderiza una lista de estos componentes dentro de un contenedor oscuro.
Texto Neón Cyberpunk
Texto con animación de parpadeo (flicker) y reflejo inferior.
Proximamente
Copia el CSS en tus globales y usa el componente en fondos oscuros.
Carrusel Infinito (Marquee)
Desplazamiento continuo de elementos. Perfecto para mostrar logos o stack.
Stack Principal
Herramientas
Pasa un array de elementos React. Requiere Framer Motion.
Interactive Glow Cards
Sistema de pricing con efecto spotlight radial utilizando CSS Modules y ResizeObserver para sincronización de capas.
Pricing
Implementado con CSS Modules para evitar fugas de estilo. Utiliza un sistema de doble capa (base y overlay) sincronizado mediante JS.