Componentes UI animados gratis en HTML, CSS y React
Componentes de interfaz animados para copiar
AIMRAN Library es una colección gratuita de 814 componentes de interfaz animados que construyo y pulo en proyectos reales: botones CSS con efectos hover, loaders y spinners, toggle switch, checkbox y radio buttons personalizados, inputs, tarjetas, tooltips, notificaciones toast, menús de navegación, modales y drawers, piezas Liquid Glass, animaciones de texto y scroll, microinteracciones, fondos animados y páginas 404 completas. Cada componente funciona en vivo, así que puedes cambiar colores, tamaño, velocidad y textos antes de copiarlo.
La mayoría son HTML y CSS, así que funcionan con cualquier tecnología: una web estática, WordPress, Webflow, Next.js, Vue o Laravel. El resto son componentes de React hechos con Motion. Cada página muestra el código en pestañas (HTML, CSS, JS y React) y además te da un prompt listo para que ChatGPT, Claude, Cursor, v0 o Lovable adapten el componente a tu proyecto, por ejemplo con clases de Tailwind.
La librería está en español, inglés, alemán y francés, y cada pocas semanas llegan componentes nuevos.
Preguntas frecuentes
¿Qué es AIMRAN Library?
AIMRAN Library es una colección gratuita de componentes UI animados para la web, creada por el desarrollador Aimran Oukham. Puedes ajustar cada componente en vivo y copiar su código HTML, CSS, JavaScript o React.
¿AIMRAN Library es gratis? ¿Hace falta cuenta?
Sí, es gratis y no hay registro. Abre cualquier componente, ajústalo y copia el código.
¿Puedo usar los componentes con Tailwind, Vue u otro framework?
Sí. Los componentes en HTML y CSS funcionan en cualquier sitio. Para un framework concreto, copia el prompt para IA de la ficha y pégalo en ChatGPT, Claude o Cursor para obtener una versión en Tailwind, Vue, Svelte o React.
¿Cómo uso un componente con un asistente de IA?
Cada ficha tiene un botón Copiar prompt. El prompt describe el componente, tus ajustes y el código, para que un asistente como Claude, ChatGPT, Cursor, v0 o Lovable lo añada a tu proyecto sin adivinar.
¿Los componentes son accesibles?
Usan botones, inputs y labels reales, foco de teclado visible y atributos aria donde hace falta, y las animaciones respetan prefers-reduced-motion.