Mouvement

Le mouvement d’AL-E est doux et rapide : il accompagne, il ne fait pas attendre. Survolez (ou touchez) une carte pour rejouer la courbe :

--ease-smooth-outcubic-bezier(.22, 1, .36, 1)Apparitions, panneaux, défilement doux (la courbe par défaut)--ease-bouncecubic-bezier(.34, 1.36, .64, 1)Boutons, pastilles, retours « vivants » (léger rebond)--ease-bounce-strongcubic-bezier(.34, 3.85, .64, 1)Mascotte et moments ludiques uniquement--neu-easecubic-bezier(.32, .72, 0, 1)Surfaces néomorphiques qui s’enfoncent au clic

--duration-micro80ms

--duration-quick.15s

--duration-fast.25s

--duration-medium.35s

--duration-slow.4s

--duration-very-slow.5s

--duration-stagger40ms

Valeurs relevées dans les tokens de la landing ; l’application utilise les mêmes courbes (--ease-out = --ease-smooth-out, --ease-bounce) et les mêmes durées.

Quand animer

Situation	Courbe	Durée
Survol, focus, petits retours	--ease-smooth-out	--duration-quick (150 ms)
Ouverture d’un panneau, d’un menu	--ease-smooth-out	--duration-fast à --duration-medium (250–350 ms)
Apparition au défilement (landing)	--ease-smooth-out, décalage --duration-stagger (40 ms) entre éléments	--duration-slow (400 ms)
Validation, élément qui « répond »	--ease-bounce	--duration-fast
Mascotte, moments ludiques	--ease-bounce-strong	libre
Changement de texte (compteurs, libellés)	flou + glissement de 4 px	--duration-quick

Les règles

• Jamais de mouvement sans raison : une animation explique un changement (ça s’ouvre, ça part, ça arrive).
• Rien au-delà de 500 ms pour une interaction ; les apparitions au défilement ne se jouent qu’une fois.
• Le rebond fort est réservé à la mascotte.

Réduire les animations

Les deux sites respectent la préférence système « réduire les animations » ; l’application propose en plus un réglage Animations dans ses préférences. Toute nouvelle animation doit s’arrêter dans ce cas.