Micro-interactions d'interface au format Lottie (36 animations, clair et sombre, JSON et .lottie)

Ce pack s’adresse aux designers UI et aux développeurs front-end qui veulent donner un retour visible à une action (un ajout au panier, une copie, un envoi, une case cochée) ou signaler une attente, sans dessiner ni animer eux-mêmes. Chaque micro-interaction est un fichier Lottie léger, en clair et en sombre, accompagné d’une image SVG fixe pour les personnes qui ont demandé moins d’animation. Les animations sont dessinées dans un cadre de 24 au trait de 1,5, le même style que les packs d’icônes de ligne de Beryl Design : elles se posent à côté de ces icônes sans rupture de style.

• 36 animations, en 6 familles :
  • Statut : loading-spinner, loading-dots, success-check, error-cross, warning-alert, info-pulse ;
  • Action : copy-done, send-message, delete-trash, upload-arrow, download-arrow, refresh-spin ;
  • Commerce : cart-add, favorite-heart, bookmark-save, star-rate, tag-apply, bag-bounce ;
  • Navigation : menu-close, chevron-expand, search-open, back-arrow, view-switch, scroll-hint ;
  • Contrôle : toggle-switch, checkbox-check, radio-select, play-pause, volume-mute, password-reveal ;
  • Notification : bell-ring, badge-pop, typing-dots, pull-refresh, empty-box, offline-signal.
• 9 boucles, pour les attentes et les indices : loading-spinner, loading-dots, info-pulse, upload-arrow, download-arrow, scroll-hint, typing-dots, pull-refresh et empty-box. Les 27 autres animations se jouent une fois et s’arrêtent sur leur état final.
• 2 thèmes, clair et sombre, pour chaque animation.
• 72 fichiers Lottie JSON : chaque animation en clair et en sombre.
• 36 fichiers .lottie : chaque animation, avec son thème sombre inclus dans le même fichier.
• 72 images SVG fixes : l’image de repos de chaque animation, en clair et en sombre, à afficher quand le réglage « réduire les animations » est actif.
• 1 page HTML de démonstration, hors ligne : les 36 animations jouées dans le navigateur, avec un sélecteur clair ou sombre ; quand le système demande moins d’animation, la page affiche les images fixes à la place.

Organisation de l’archive :

json/light/<nom>.json
json/dark/<nom>.json
lottie/<nom>.lottie
svg/light/<nom>.svg
svg/dark/<nom>.svg
demo/index.html
demo/animations.js
demo/vendor/

Le zip contient aussi le texte de la licence, un fichier LISEZMOI et les crédits.

Comment l’utiliser

• Dans une page web ou une application : chargez le JSON du thème voulu, ou le fichier .lottie, dans un lecteur Lottie. Les boucles se lancent en continu ; les autres animations se déclenchent sur l’action (un clic, une validation) et restent sur leur état final.
• Couleurs : les couleurs de chaque animation sont rangées dans des slots nommés. Un lecteur qui prend en charge les slots permet de les changer sans modifier le fichier ; avec un lecteur qui ne les lit pas, prenez le JSON du thème voulu. Dans le fichier .lottie, le thème sombre s’active depuis le lecteur.
• Moins d’animation : quand la personne qui visite a activé « réduire les animations » (prefers-reduced-motion), affichez le SVG fixe du même nom à la place de l’animation. La page de démonstration montre ce fonctionnement.
• Rythme : toutes les animations tournent à 60 images par seconde et durent 2 000 ms au plus. Le plus lourd des fichiers JSON pèse 4 654 octets, le plus lourd des fichiers .lottie 1 204 octets.

À savoir

• play-pause est dessiné au trait, comme le reste de la série : le contour du triangle s’ouvre en son milieu et chaque moitié se referme en barre.
• refresh-spin et pull-refresh reprennent au repos la flèche circulaire du pack de flèches de Beryl Design ; la rotation se fait autour du centre du cadre, pour que la pointe ne sorte jamais du cadre.
• info-pulse émet un anneau qui se détache du cercle puis s’estompe. Pour lui laisser de l’air, son cercle est un peu plus petit que celui des autres animations de statut.
• Le raccord avec les packs d’icônes de ligne vaut pour le style (cadre, épaisseur du trait, extrémités arrondies) : les animations ne sont pas la version animée de chaque icône de ces packs.

Fabrication et IA

La géométrie, les mouvements, les fichiers Lottie et SVG, les scripts et la page de démonstration ont été produits avec un assistant d’IA (Claude Code), puis relus et contrôlés : validation du schéma Lottie, rendu dans deux lecteurs, raccord des boucles, durées, images fixes comparées au rendu animé, contraste en clair et en sombre, planches relues. Aucune image n’a été produite par un générateur d’images : chaque fichier sort du même code.

• Lottie JSON : le format ouvert des animations vectorielles, lu par les lecteurs Lottie pour le web et le mobile et par les outils de design et de prototypage qui importent ce format.
• dotLottie (.lottie) : une archive compressée qui réunit l’animation et son thème sombre, pour les lecteurs qui lisent ce format.
• SVG : une image fixe par animation et par thème, qui s’affiche dans tout navigateur et s’importe dans la plupart des outils de design.
• HTML : la page de démonstration, à ouvrir dans un navigateur, sans connexion. Elle embarque le lecteur open source lottie-web 5.13.0.

Les animations ont été contrôlées dans deux lecteurs web, l’un en rendu SVG, l’autre en rendu canvas.

Les animations sont livrées sous licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les sites ou applications que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement. Le lecteur de la démonstration, lottie-web, est un logiciel libre sous licence MIT, dont la notice est jointe dans demo/vendor/.

• Quel outil d’animation choisir en 2026
• Rive contre Lottie : deux approches de l’animation interactive

1.0.0 (11 novembre 2026) : première version.