Les animations qui tournent sans action de la personne. Elles donnent de la vie au décor, jamais à l'information.
Règles
- Décor uniquement : formes, halos, LED, point flottant. Jamais sur un texte, un chiffre, un contrôle ou une donnée qui change.
- Une seule animation idle par zone visible.
- Lente et petite : rotation d'au moins 40 s par tour, flottement de 6 s sur 6 à 8 px, pulsation d'au moins 2 s ; courbe linéaire (rotation) ou sinusoïdale (
ease-in-out). - En pause hors écran (
IntersectionObserver) et quand l'onglet est caché (visibilitychange). Coupée sousprefers-reduced-motion. - Pas d'animation idle dans un formulaire ou un dialogue : la personne doit se concentrer.
Par style
- Expressive : la forme de la MetricCard tourne en 44 s (40 à 48 s selon le repo), le point
primaryflotte en 6 s. - Plaza : la tuile sélectionnée respire (échelle 1 à 1,03 en 3 s) ; les rayures et les bulles restent fixes.
- Chrome : la LED pulse en 2,4 s (opacité 1 à 0,55), les halos dérivent en 30 s ; le reflet du métal reste fixe.
- README GitHub : rotation 48 s des formes et flottement 6 s, déjà dans les SVG, coupés par
prefers-reduced-motion.