# Animation · Veille technologique [Source canonique]() Mouvement dans les interfaces : transitions, gestes, rythme et respect des préférences de mouvement réduit. ## [MicroKit : 54 micro-interactions React, CSS et Tailwind à copier]() MicroKit rassemble des interactions prêtes à copier — boutons animés, onglets, champs et effets au survol — avec des versions React ou CSS et Tailwind. Chaque composant se récupère séparément en JavaScript ou TypeScript, sans installer de package ; 26 des 54 n’ont aucune dépendance, tandis que 28 utilisent lucide-react. Le code est sous licence MIT et les variantes Tailwind sont prévues pour les versions 3 et 4. Côté Next.js App Router, la plupart des composants restent compatibles avec les server components ; ceux qui utilisent état, ref ou gestionnaire d’événement nécessitent « use client ». 2026-10-29 · [Markdown]() · [Ressource originale]() ## [Interop 2027 : dix propositions CSS, de l’accessibilité aux animations]() Josh W. Comeau passe en revue dix propositions envisagées pour Interop 2027 : fonctions CSS, formes de bordure personnalisées, requêtes liées aux ancres et au défilement, ordre de lecture, animations de dimensions intrinsèques ou décorations de grille. Plusieurs répondent à des problèmes concrets, comme synchroniser la navigation au clavier avec une mise en page responsive via `reading-flow`, ou dessiner les séparateurs de grille sans cellules DOM vides. Ces propositions n’ont pas toutes le même degré de maturité. En octobre 2026, plusieurs sont disponibles dans Chromium, mais pas encore dans Firefox ni Safari ; `inherit()` n’est implémenté dans aucun navigateur. L’article montre où l’amélioration progressive est envisageable, avec des garde-fous comme `@supports` pour les transitions de 2026-10-27 · [Markdown]() · [Ressource originale]() ## [CSS \`random()\` : doser l’imperfection dans les interfaces]() La fonction CSS `random()` ajoute des variations visuelles directement dans le navigateur, sans JavaScript ni boucles Sass. Brecht De Ruyte l’illustre avec des lettres légèrement inclinées, des cartes animées au scroll et des ombres adaptées à leur rotation. Pour garder une géométrie cohérente, une clé de cache peut synchroniser plusieurs propriétés, tandis que `sibling-index()` calcule la structure d’un éventail de cartes. Ces effets conviennent surtout aux éléments décoratifs : l’article déconseille de randomiser les grilles, les textes courants ou les cibles interactives. Le déploiement navigateur étant en cours, il recommande une base stable avec `@supports`, ainsi que le respect de `prefers-reduced-motion` et des besoins des lecteurs d’écran. 2026-10-23 · [Markdown]() · [Ressource originale]() ## [React Bits 2.0 : composants animés et outils de création repensés]() React Bits 2.0 annonce 216 composants animés : 104 ont été reconstruits ou repensés, et plus de 20 ont supprimé des dépendances supplémentaires. Les démos ajoutent presets et interactions au clic, tandis que Background Studio, Shape Magic et Texture Lab ont été reconstruits pour ajuster des effets en direct et exporter leurs résultats. La mise à jour refond aussi la documentation et la page d’accueil, qui utiliserait environ cinq fois moins de JavaScript. Le catalogue facilite le prototypage d’interfaces expressives ; la variété des animations invite toutefois à évaluer leur coût et leurs dépendances avant de les intégrer à un produit. 2026-10-23 · [Markdown]() · [Ressource originale]() ## [CSS Scroll-Triggered Animations : visualiser et ajuster les plages]() 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é. 2026-10-22 · [Markdown]() · [Ressource originale]() ## [React Aria : un composant Sheet animé et optimisé pour le mobile]() 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. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [Shaders : 199 composants WebGPU prêts à l’emploi pour React, Vue, Svelte et JavaScript]() 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. 2026-10-16 · [Markdown]() · [Ressource originale]() ## [Prompt Motion : explorer des animations créées avec l’IA]() 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. 2026-10-08 · [Markdown]() · [Ressource originale]() ## [Des transitions prêtes à intégrer dans une application web]() 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. 2026-09-13 · [Markdown]() · [Ressource originale]() ## [OriginKit : parcourir et réutiliser des composants animés]() 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. 2026-07-19 · [Markdown]() · [Ressource originale]() ## [La skill d’Emil Kowalski pour soigner les détails d’interface]() 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. 2026-05-22 · [Markdown]() · [Ressource originale]() ## [Animata : copier des composants React animés en Tailwind CSS]() 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. 2026-04-18 · [Markdown]() · [Ressource originale]() ## [React Modal Sheet : explorer les comportements d’une feuille modale]() 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. 2026-03-15 · [Markdown]() · [Ressource originale]() ## [Créer des dégradés animés avec Shader Gradient]() 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. 2026-02-14 · [Markdown]() · [Ressource originale]() ## [Unicorn Icons : personnaliser des icônes animées Rive et Lottie]() 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. 2026-02-14 · [Markdown]() · [Ressource originale]() ## [React Intersection Observer : suivre l’entrée d’éléments dans le viewport]() 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. 2025-11-06 · [Markdown]() · [Ressource originale]() ## [EvilCharts : personnaliser des graphiques avec shadcn et Recharts]() 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. 2025-09-07 · [Markdown]() · [Ressource originale]() ## [Animate UI : installer puis personnaliser des composants animés]() 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. 2025-06-18 · [Markdown]() · [Ressource originale]() ## [Anime.js : coordonner timelines, gestes et animations au scroll]() 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. 2025-04-20 · [Markdown]() · [Ressource originale]() ## [Une collection de bibliothèques React pour interfaces animées]() 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. 2025-02-26 · [Markdown]() · [Ressource originale]() Page 1 / 2 [Suivant]()