Mouvement

Rien ne change de manière brusque, et rien ne bouge sauf si quelqu'un le demande. Lié à l'énergie (ce qui se passe est vu en train de se passer) et au "jamais bruyant".

Tout changement d'état est une transition

Couleurs du jour à la nuit, espace quand la densité change, taille quand le contenu grandit, survol. Une seule durée et une seule courbe qui commence doucement et atterrit doucement. Le CSS de base de Feitio fait déjà cela sur chaque élément.

Papier posé

C'est ainsi que les éléments flottants arrivent : un découpe qui se pose sur le bureau, avec une légère rotation et la formation de l'ombre, accompagnée d'un petit rebond. Seulement lorsque quelqu'un agit.

Un papier à la fois

Lorsqu'une action fait apparaître plusieurs éléments, seul un arrive comme un papier posé : celui qui s'adresse à la personne, comme une notification indiquant que tout fonctionne. Les autres glissent en place, comme une nouvelle ligne dans une liste, créant de l'espace et repoussant ceux qui sont dessous. Deux papiers atterrissant simultanément se disputent l'attention et ressemblent à un désordre.

Motion réduit

Lorsque le système demande moins de mouvement, il n'y en a pas. Aucune transition, aucun papier posé.

Rien ne bouge sauf si quelqu'un le demande

Où la transition s'arrête

Les éléments qui bougent à chaque instant, comme le glisser-déposer, dessiner, redimensionner ou défiler une liste immense, ne peuvent pas attendre 320ms : le composant serait en retard par rapport au doigt. Dans ces zones, data-motion="direct" désactive la transition. Hors d'eux, la règle reste en vigueur.