Parent : [[INDEX-WEB-UIUX]]

Sources UI, composants et moteurs d'animation

Cette fiche indique où chercher. Elle ne transforme pas une page web en composant vérifié.

Trois familles à ne pas confondre

Moteurs d'animation

• Anime.js : timelines, stagger, SVG, DOM et chorégraphies précises.
• Motion : animations React, layout, gestes, scroll et ressorts.
• GSAP : chorégraphies avancées et ScrollTrigger lorsque CSS ou Motion ne suffisent pas.

Un moteur fournit des primitives d'animation, pas une identité visuelle prête à coller. Toujours prévoir prefers-reduced-motion, limiter le travail sur le thread principal et justifier le mouvement par une fonction perceptible.

Registres et bibliothèques installables

• shadcn/ui : base structurelle et primitives accessibles possédées par le projet.
• Kokonut UI : composants React/Tailwind/shadcn avec Motion ; vérifier les dépendances de chaque item.
• Magic UI : effets et accents animés ; employer un seul accent dominant par section.
• React Bits : variantes JavaScript/TypeScript et CSS/Tailwind ; licence MIT avec Commons Clause à respecter.
• Material UI : système React cohérent et complet ; ne pas le mélanger sans raison à un second système principal.

Un composant devient exploitable seulement après capture de son URL exacte, de son auteur, de sa licence, de ses fichiers, de ses dépendances et de son état de validation.

Galeries et références

• Uiverse et 21st.dev : découverte communautaire ; chaque item exige une revue indépendante.
• Aceternity UI : inspiration et découverte tant que la provenance exacte de l'item n'est pas stockée.
• The Component Gallery : comparaison de patterns et de systèmes, pas source de code à copier.

Workflow d'intégration

1. Décrire le besoin, la stack, les contraintes et le rôle du composant.
2. Interroger /api/context, qui renvoie connaissances, composants stockés et fournisseurs adaptés.
3. Choisir une source selon sa fonction, pas selon son effet visuel.
4. Récupérer un item exact depuis un registre officiel lorsque disponible.
5. Stocker provenance, licence, fichiers, dépendances et commandes d'installation.
6. Conserver l'item en review jusqu'aux contrôles clavier, focus, contraste, responsive, reduced motion, performance et build.
7. Adapter les tokens et le langage visuel au projet au lieu de conserver le style par défaut de la source.

Anti-patterns

• Déduire des composants à partir des mots présents sur une page de documentation.
• Mélanger Magic UI, Aceternity, Kokonut et React Bits sur une même page pour « faire riche ».
• Importer une section complète sans provenance ni licence item par item.
• Utiliser une animation comme cache-misère pour une hiérarchie ou un contenu faibles.
• Reproduire les assemblages typiques des landing pages générées : bento systématique, halos bleus, grille lumineuse, texte gradient et cartes flottantes sans lien avec le produit.

Contrat agent

L'API /api/providers expose le catalogue de sources. Une réponse verified-provider valide la provenance du fournisseur, pas automatiquement tous ses composants. Les statuts reference-only et item-review-required interdisent de présenter un item comme prêt à intégrer sans revue supplémentaire.