Les bibliothèques de composants
shadcn/ui est la base sur laquelle tout le reste se greffe : ce n’est pas une dépendance mais du code que tu copies dans ton projet et que tu possèdes. Les autres suivent la même convention, donc ils s’installent tous avec le même CLI. Une mise en garde sur Aceternity : les composants sont spectaculaires mais tellement reconnaissables qu’un visiteur averti identifie la bibliothèque en trois secondes. À utiliser sur un bloc, jamais sur toute une page.
- reactbits.dev : Effets de texte et animations React, en JS ou TS, en CSS ou Tailwind.
- 21st.dev : Registre communautaire de composants, avec un MCP à brancher sur ton IDE.
- motion-primitives.com : Briques d’animation sobres et propres, bien pensées pour du produit.
- kokonutui.com : Composants Tailwind et shadcn, beaucoup de blocs tarifs et tableaux de bord.
- smoothui.dev : Sections animées orientées pages marketing, logique de motion contrôlée.
- uiverse.io : Boutons, cartes et loaders en CSS pur. Marche partout, même sans React.
- hover.dev : Micro-interactions au survol, idéal pour les détails qui font pro.
- tailwindcss.com/plus : L’officiel, payant une seule fois. Le plus fiable pour du travail client sérieux.
Animation, motion et 3D
C’est la couche qui sépare un site correct d’un site qu’on remarque, et elle tient à deux choses : la bonne courbe d’accélération et la bonne durée. GSAP reste le standard des séquences complexes, et ses plugins autrefois payants sont désormais gratuits. Motion couvre tout le reste en React. Lenis fait trois kilo-octets et se branche en cinq lignes, c’est le meilleur rapport effet perçu sur effort de toute cette liste.
- rive.app : Animations interactives très légères, qui réagissent au curseur et aux états.
- lottiefiles.com : Animations vectorielles prêtes à l’emploi, énorme catalogue gratuit.
La règle à ne pas oublier
Une bibliothèque de composants te fait gagner du temps, elle ne te donne pas une identité. Si tu prends les composants tels quels, ton site ressemblera aux mille autres qui les ont pris tels quels. Le travail commence après l’installation : changer la police, changer les rayons de bordure, changer les durées d’animation. Trois modifications suffisent le plus souvent à rendre un composant méconnaissable, et c’est précisément ce que le client paie.
Côté 3D et WebGL, garde un oeil sur le poids. Une scène Spline mal exportée peut peser plus lourd que tout le reste du site réuni, et coûter en référencement ce qu’elle rapporte en impression.
