Aller au contenu principal

Motion

Philosophie​

Les animations dans Patrimo sont discrètes et fonctionnelles : elles informent (changement d'état) ou guident (focus, hover), jamais pour décorer.

Exception : la page de login utilise des blobs animés en arrière-plan (.blob-*) comme signature visuelle d'entrée.

Durées​

NomValeurUsage
Instant0 sCas rares (reset immédiat)
Fast150 msHover states (couleur, border)
Normal200-300 msTransitions par défaut (glass-card hover)
Slow500 msFade-in de contenu au chargement
Decorative12 sBlobs login (boucle continue)

Tailwind : duration-150, duration-200, duration-300, duration-500.

Easings​

Classe TailwindCSSUsage
ease-in-outcubic-bezier(0.4, 0, 0.2, 1)Par défaut (entrée + sortie douces)
ease-outcubic-bezier(0, 0, 0.2, 1)Entrées (éléments qui apparaissent)
ease-incubic-bezier(0.4, 0, 1, 1)Sorties (éléments qui disparaissent)
ease-linearlinearSpinners, progress bars

Animations Patrimo​

animate-spin (Tailwind natif)​

Spinner sur Loader2 (icône Lucide) pendant les actions asynchrones.

{loading && <Loader2 size={16} className="animate-spin" />}

blob-float (custom)​

Animation des blobs en arrière-plan de la page login. Définie dans globals.css :

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.1); }
  66% { transform: translate(-20px, 10px) scale(0.95); }
}

Appliquée sur .blob : durée 12 s, ease-in-out, infinite. Les 3 blobs ont un delay différent (0s, -4s, -8s) pour éviter la synchro.

Respect de prefers-reduced-motion​

Toutes les animations décoratives (blobs, fade-in non critiques) doivent se désactiver quand l'utilisateur demande prefers-reduced-motion: reduce.

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

Voir Accessibilité.

Règles​

  • Toujours spécifier duration-* explicitement — pas de valeur par défaut implicite
  • Ne pas animer ce qui n'a pas besoin de l'être (ne pas fade-in toute la page)
  • Respecter prefers-reduced-motion — obligatoire pour tout nouveau pattern animé

Voir aussi​