Introduction
Ce qu'est O-UI, ce qu'il n'est pas, et comment l'utiliser.
O-UI est une bibliothèque de composants animés, interactifs et 3D, pensés pour la production. Chaque élément est disponible en React, en Vue et en JavaScript natif.
Elle réunit trois sortes d'éléments : des composants, qui se rendent eux-mêmes ; des effets, qui s'appliquent à vos propres éléments ; et des primitives, les mécaniques de mouvement que les deux autres partagent, et que vous pouvez utiliser seules.
Le code vous appartient
O-UI n'est pas un package que l'on installe et que l'on met à jour : c'est une collection de code que vous copiez dans votre projet, par le CLI ou à la main. Vous pouvez ensuite tout modifier, sans dépendance à O-UI.
Ce modèle est celui de shadcn/ui. O-UI est compatible avec son CLI pour React et avec celui de shadcn-vue pour Vue.
Ce qui rend un élément O-UI différent
- Un cœur, plusieurs frameworks. La logique et les animations vivent dans un module TypeScript sans framework. Les adaptateurs React et Vue ne font que le brancher : même API, même comportement.
- Accessible par défaut. Le mouvement réduit est respecté, le clavier et les lecteurs d'écran sont pris en compte, et les effets au pointeur se désactivent sur écran tactile.
- Performant. Seules les propriétés gérées par le GPU sont animées, les éléments partagent une seule boucle d'animation pour toute la page (FallingText utilise celle de GSAP), s'arrêtent hors écran et sont nettoyés au démontage.
- Paramétrable. Chaque réglage important est une prop (ou une option de hook) documentée, avec une valeur par défaut soignée.
- Compatible SSR. Fonctionne avec Next.js, Nuxt et Astro, sans erreur d'hydratation.
Par où commencer
- Parcourez les composants et les effets et testez-les en direct, puis les primitives si vous écrivez vos propres animations.
- Suivez le guide d'installation.
- Lisez comment O-UI fonctionne avec React, Vue et le JavaScript natif.