Animation

Cette extension pour Chrome DevTools rend les animations CSS déclenchées par le défilement plus faciles à diagnostiquer : une minimap situe le scroller, l’élément et le sujet, tandis que des repères colorés montrent les plages d’activation et d’activité. Les valeurs se modifient en direct ; l’outil prend en charge ScrollTimeline, ViewTimeline et les éléments en position: sticky.

Deux limites viennent de Chrome : les unités relatives comme 90vh sont ramenées à des pixels calculés, et les éléments dans un iframe ne sont pas pris en charge. L’extension répond ainsi à un manque des DevTools, en attendant un éventuel support intégré.

La version 1.22.0 de React Aria introduit le composant Sheet, une surcouche glissable qui s’appuie sur les gestes natifs de scroll pour offrir des transitions fluides et tactiles, idéales pour les panneaux mobiles ou les notifications. Cette release apporte aussi la prise en charge de Turbopack pour l’optimisation des locales, une meilleure gestion des widgets interactifs comme le clavier virtuel, et plusieurs correctifs sur les collections, ComboBox et formulaires.

Cette documentation présente plus de 190 composants graphiques prêts à l’emploi pour intégrer des effets WebGPU dans React, Vue, Svelte, Solid et JavaScript natif. Les composants couvrent une large palette : textures, formes, matériaux, filtres, distorsions, transitions, flous, ajustements et effets interactifs, chacun avec une description concrète de son rendu et de ses paramètres. Une ressource à explorer pour enrichir rapidement une interface avec des effets visuels avancés sans écrire de shader bas-niveau.

Prompt Motion est une galerie de vidéos de mouvement accompagnées des prompts et des skills utilisés pour les produire avec Claude Opus 5.5. On peut parcourir des exemples par familles — interface produit, graphiques, typographie ou particules — puis adapter les prompts à un projet, ce qui en fait une source d’expérimentation pour le motion design assisté par IA.

Transitions Pro réunit plus de 43 transitions prêtes pour des applications web en React, TypeScript et Next.js. Les extraits copiables s’accompagnent de skills pour les agents et d’outils de création ou d’audit du mouvement, ce qui aide à passer d’une animation isolée à un système d’interactions cohérent.

OriginKit propose une galerie de composants web animés à copier ou à utiliser dans Framer. Les aperçus montrent des effets CSS et WebGL, avec une partie de la collection accessible gratuitement.

Cette skill transforme les conseils d’animation et de finition d’Emil Kowalski en consignes utilisables par un agent. Elle porte sur les transitions, les états et les détails qui rendent une interaction plus claire.

Animata propose des composants animés à copier dans une application React ou Next.js, avec Tailwind CSS. Son format open source laisse les équipes inspecter et adapter le code à leur interface.

Ce playground présente plusieurs variantes de feuilles modales React : points d’arrêt, contenu défilant, plein écran et prise en compte du clavier. Il inclut aussi des exemples d’accessibilité et de mouvement réduit.

Shader Gradient permet de régler des dégradés animés, puis de les intégrer dans Framer, Figma ou React. L’outil rend les paramètres visuels d’un shader accessibles depuis une interface.

Unicorn Icons propose une bibliothèque d’icônes animées modifiables dans le navigateur et exportables en Rive ou Lottie. Les formats annoncés couvrent React, iOS et Android.

La bibliothèque expose Intersection Observer via des hooks et composants React. Elle réutilise les observers compatibles et fournit des mocks pour tester lazy loading et animations au scroll.

EvilCharts propose des composants de graphiques construits sur Recharts ou Apache ECharts avec shadcn. Les exemples cherchent à rendre animations et présentation des données plus faciles à adapter.

Animate UI distribue des composants React construits avec TypeScript, Tailwind CSS et Motion. Le code peut être installé via la CLI shadcn puis adapté au projet.

Anime.js réunit animations, timelines, springs et observation du scroll dans une même API. Les outils de composition permettent de régler les propriétés et de synchroniser plusieurs effets.

Ce dépôt rassemble des bibliothèques de composants et design systems React avec des capacités d’animation. Il sert de point de départ pour comparer leurs approches et leurs démonstrations.