# O-UI

> O-UI est une bibliothèque de composants animés et interactifs pour React, Vue et le JavaScript natif. Copiez le code ou installez-le en une commande.

Registry (shadcn CLI): https://o-ui.hd987.dev/r/registry.json — Vue (shadcn-vue CLI): https://o-ui.hd987.dev/r/vue/registry.json

## Documentation

- [Accessibilité](https://o-ui.hd987.dev/docs/accessibility): Les engagements d'O-UI en matière d'accessibilité du mouvement et des interactions.
- [Avec un assistant IA](https://o-ui.hd987.dev/docs/ai): Utiliser O-UI avec votre assistant de code (MCP shadcn, llms.txt).
- [React, Vue et JavaScript natif](https://o-ui.hd987.dev/docs/frameworks): Comment un même élément fonctionne dans chaque framework, avec les hooks des effets et le rendu serveur.
- [Introduction](https://o-ui.hd987.dev/docs): Ce qu'est O-UI, ce qu'il n'est pas, et comment l'utiliser.
- [Installation](https://o-ui.hd987.dev/docs/installation): Prérequis, installation par le CLI, primitives partagées et installation manuelle.
- [Licence](https://o-ui.hd987.dev/docs/licence): Les composants O-UI sont sous licence MIT, utilisables gratuitement, y compris dans un projet commercial.
- [Personnalisation](https://o-ui.hd987.dev/docs/theming): Couleurs, tokens et modification du code des éléments.

## Composants

- [Carousel](https://o-ui.hd987.dev/components/carousel): Un carrousel de cartes, de photos ou de slides plein écran, que l'on glisse, lance ou fait défiler, avec une physique fidèle au doigt.
- [FallingText](https://o-ui.hd987.dev/components/falling-text): Fait tomber les lettres d'un titre jusqu'à leur place : elles rebondissent un peu, puis se posent.
- [GradientShapes](https://o-ui.hd987.dev/components/gradient-shapes): Un fond en dégradé animé où des formes douces s’éclairent en contre-jour ; la lumière suit le pointeur et les formes peuvent porter du contenu.
- [Hologram](https://o-ui.hd987.dev/components/hologram): Projette un texte, une icône ou un logo en hologramme crédible, que le pointeur perturbe.
- [InfiniteWheel](https://o-ui.hd987.dev/components/infinite-wheel): Une roue d'icônes horizontale ou verticale, en boucle continue, avec relief progressif, glissement, inertie et centrage doux.
- [Marquee](https://o-ui.hd987.dev/components/marquee): Fait défiler en boucle des logos, des mots ou des cartes, à vitesse constante et sans couture visible.
- [Paper](https://o-ui.hd987.dev/components/paper): Une feuille de papier qui se froisse, se plie ou s’envole en avion, et garde la mémoire de ses plis.
- [ParticleText](https://o-ui.hd987.dev/components/particle-text): Forme un texte avec un nuage de particules en volume qui réagit au pointeur.
- [ProjectedText](https://o-ui.hd987.dev/components/projected-text): Un mot répété et projeté dans un tunnel, un couloir ou un vortex, en boucle sans couture ou au défilement.
- [Shapeshift](https://o-ui.hd987.dev/components/shapeshift): Une transition entre images, textes ou thèmes par une onde de pièces qui se retournent.

## Effets

- [Blur](https://o-ui.hd987.dev/components/blur): Une profondeur de champ pour n'importe quel contenu : net autour d'un point, flou en s'en éloignant. Le point suit le pointeur, le défilement ou votre application.
- [GlowBorder](https://o-ui.hd987.dev/components/glow-border): Une bordure lumineuse qui glisse autour de l'élément et réagit au pointeur et au focus clavier.
- [GlowCrack](https://o-ui.hd987.dev/components/glow-crack): Une fissure stylisée qui laisse passer la lumière, sur une carte, une image, un bouton ou dans les lettres d'un titre.
- [Magnetic](https://o-ui.hd987.dev/components/magnetic): Attire un élément vers le pointeur, puis le relâche avec un retour élastique.
- [ScrollTint](https://o-ui.hd987.dev/components/scroll-tint): La couleur d'un élément suit sa place à l'écran : un dégradé couvre la zone visible, et chaque élément en prend la teinte au défilement.

## Primitives

- [FrameLoop](https://o-ui.hd987.dev/primitives/frame-loop): Une seule boucle d'animation pour toute la page : toutes les mesures, puis toutes les écritures, et un interrupteur de pause pour les animations continues.
- [PhaseDriver](https://o-ui.hd987.dev/primitives/phase-driver): Une phase de 0 à 1, sans couture, qui avance avec le temps, le défilement ou l'application : une animation, trois façons de la lire.
- [PointerTracker](https://o-ui.hd987.dev/primitives/pointer-tracker): Un seul jeu d'écouteurs pour toute la page : la position du pointeur, sa présence et sa vitesse lissée.
- [ViewProgress](https://o-ui.hd987.dev/primitives/view-progress): La progression d'un élément dans la zone visible, de 0 à 1 : pour une barre de lecture, une apparition au défilement ou un carrousel.
- [WebGLSurface](https://o-ui.hd987.dev/primitives/webgl-surface): Un contexte WebGL2 pour toute la page : chaque élément dessine dans son propre canvas, sans atteindre la limite de contextes du navigateur ni recompiler ses shaders.