Motion et micro-interactions

Gradly adopte une approche sobre des animations. L’objectif : faciliter la compréhension et le feedback, jamais divertir ou impressionner.

Principes

1. Fonctionnelles d’abord. Chaque animation doit répondre à une question de l’utilisateur (est-ce que ça réagit ? où suis-je ? qu’est-ce qui vient de changer ?).
2. Courtes. Durée maximale par défaut : 150 à 250 ms.
3. Easing standard. ease-out pour les apparitions, ease-in pour les disparitions, ease-in-out pour les transitions.
4. Respecte prefers-reduced-motion. Désactive toutes les animations non essentielles pour les utilisateurs qui le demandent.

Transitions de hover

<button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5
  rounded-xl font-medium transition-colors">
  Télécharger
</button>

Règles :

• transition-colors (Tailwind par défaut = 150ms ease)
• Pas de translate/scale sur les boutons (pas de lift effect qui distrait)
• Pas de shadow animée

Apparition au scroll

Le site utilise un petit pattern avec data-animate pour révéler les sections progressivement au scroll.

<section data-animate class="opacity-0 translate-y-4
  [&.is-visible]:opacity-100 [&.is-visible]:translate-y-0
  transition-all duration-500">
  <!-- contenu -->
</section>

Un IntersectionObserver ajoute la classe is-visible quand la section entre dans le viewport. Durée 500 ms, avec prefers-reduced-motion → aucune animation.

Accordions (FAQ, TOC brandbook)

Utiliser <details> / <summary> natif. Le navigateur gère l’ouverture/fermeture avec l’animation par défaut du moteur. Pas d’animation custom nécessaire.

Respect de prefers-reduced-motion

Le site a une règle globale dans src/styles/global.css :

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Effet : tout le site respecte le réglage système de l’utilisateur. Les animations passent de 150 à 500 ms à 0.01 ms (= instantané, mais sans provoquer de saccade visible).

Do’s & Don’ts

Durées standards

Type d’animation	Durée
Hover boutons, liens	150 ms
Accordion, menu déroulant	200 ms
Révélation au scroll	500 ms
Modal / drawer	250 ms

Rien au-delà de 500 ms sans bonne raison (= cas de démonstration produit spécifique, jamais en UX récurrent).