Composants UI animés gratuits en HTML, CSS et React
Composants d’interface animés à copier
AIMRAN Library est une collection gratuite de 814 composants d’interface animés que je construis et peaufine sur de vrais projets : boutons CSS avec effets hover, loaders et spinners, toggle switch, cases à cocher et boutons radio personnalisés, champs de saisie, cartes, infobulles, notifications toast, menus de navigation, modales et tiroirs, éléments Liquid Glass, animations de texte et de défilement, micro-interactions, fonds animés et pages 404 complètes. Chaque composant fonctionne en direct, vous pouvez donc changer couleurs, taille, vitesse et textes avant de le copier.
La plupart sont en HTML et CSS et fonctionnent avec n’importe quelle technologie : site statique, WordPress, Webflow, Next.js, Vue ou Laravel. Les autres sont des composants React réalisés avec Motion. Chaque page affiche le code en onglets (HTML, CSS, JS et React) et fournit un prompt prêt à l’emploi pour que ChatGPT, Claude, Cursor, v0 ou Lovable adaptent le composant à votre projet, par exemple avec des classes Tailwind.
La bibliothèque existe en anglais, espagnol, allemand et français, et de nouveaux composants arrivent toutes les quelques semaines.
Questions fréquentes
Qu’est-ce qu’AIMRAN Library ?
AIMRAN Library est une collection gratuite de composants UI animés pour le web, créée par le développeur Aimran Oukham. Chaque composant se règle en direct et son code HTML, CSS, JavaScript ou React se copie en un clic.
AIMRAN Library est-elle gratuite ? Faut-il un compte ?
Oui, elle est gratuite et sans inscription. Ouvrez un composant, ajustez-le et copiez le code.
Puis-je utiliser les composants avec Tailwind, Vue ou un autre framework ?
Oui. Les composants en HTML et CSS fonctionnent partout. Pour un framework précis, copiez le prompt IA de la page du composant et collez-le dans ChatGPT, Claude ou Cursor pour obtenir une version Tailwind, Vue, Svelte ou React.
Comment utiliser un composant avec un assistant IA ?
Chaque page de composant propose un bouton Copier le prompt. Le prompt décrit le composant, vos réglages et le code, pour qu’un assistant comme Claude, ChatGPT, Cursor, v0 ou Lovable l’ajoute à votre projet sans deviner.
Les composants sont-ils accessibles ?
Ils utilisent de vrais boutons, champs et labels, un focus clavier visible et des attributs aria si nécessaire, et les animations respectent prefers-reduced-motion.