Fondations
Mouvement
الحركة
Durées & courbes
Les valeurs vivent dans globals.css sous forme de variables CSS, exposées à Tailwind comme classes duration-(--…) et ease-dsm / ease-dsm-out.
| Jeton | Valeur | Usage |
|---|---|---|
| --dsm-duration-fast | 120 ms | Survol, focus, appui — micro-retours |
| --dsm-duration | 200 ms | Défaut : la plupart des transitions |
| --dsm-duration-slow | 360 ms | Entrées de superposition, plafond du système |
| --dsm-ease | cubic-bezier(0.2, 0.8, 0.2, 1) | Courbe par défaut, franche et stable |
| --dsm-ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Sortie douce des entrées animate-dsm-in / -up |
Terrain de jeu
Les démonstrations ci-dessous utilisent les vrais jetons. Activez le ralenti pour observer ce qui, à vitesse réelle, se lit comme un simple « clic net ».
Ralenti ×6
Multiplie les trois jetons de durée à l'intérieur du terrain de jeu pour observer les courbes à l'œil nu.
Les trois durées
fast
120 ms
survol, focus, appui
défaut
200 ms
transitions courantes
slow
360 ms
entrées de superposition
Les courbes d'accélération
linéaire
linear
Mécanique, jamais utilisée dans DSM
ease-dsm
cubic-bezier(0.2, 0.8, 0.2, 1)
Défaut : départ franc, arrivée posée
ease-dsm-out
cubic-bezier(0.16, 1, 0.3, 1)
Entrées : décélération longue
Animations d'entrée
Dossier n° 2026-114872
Renouvellement de passeport en cours d'instruction.
animate-dsm-in
Fondu + échelle 0,98 → 1 — popovers, menus, dialogues.
Demande transmise
animate-dsm-up
Fondu + montée de 8px — alertes, cartes, sections.
Micro-interactions des composants
Survol : fond · Appui : translation d'1px (fast)
Carte interactive
Survolez cette carte
Élévation progressive et flèche qui glisse dans le sens de lecture.
Principes
Subtil
Le mouvement confirme un changement d'état, il ne le célèbre pas. Pas de rebond, pas d'effet de ressort.
Purposeful
Chaque transition répond à une question : d'où vient cet élément, où va-t-il ? Sinon, pas d'animation.
400 ms au plus
Aucune transition ni entrée ne dépasse la durée slow (360 ms) ; au-delà, l'interface paraît lente.
Fondu + 2–4px
Les popups (menu, tooltip, select) s'ouvrent par un fondu combiné à une translation de 2 à 4px, jamais plus.
Mouvement réduit
prefers-reduced-motion est respecté globalement, sans réglage à faire dans les composants.
Géré au niveau des fondations
globals.css ramène toute animation et transition à 0,01 ms dès que l'utilisateur a activé la réduction de mouvement dans son système — aucune classe supplémentaire à poser sur les composants.@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Composant → animation
Où chaque outil de mouvement est déjà utilisé dans le système.
| Composant | Mécanisme | Comportement |
|---|---|---|
| Bouton (survol, appui) | transition-[background-color,box-shadow,transform] duration-(--dsm-duration-fast) | Retour immédiat, translation d'1px à l'appui |
| Bouton en chargement | animate-dsm-spin | Rotation continue de l'icône Loader2 |
| Squelette de chargement | animate-dsm-shimmer | Balayage de lueur en boucle sur dsm-shimmer |
| Menu, Popover, Select (Base UI) | data-starting-style / data-ending-style | Fondu + translation de 2–4px ou scale-[0.97] à l'ouverture/fermeture |
| Dialogue, feuille latérale | duration-(--dsm-duration) + scale/translate | Entrée légèrement plus posée, jamais au-delà de 360 ms |
| Alerte, notification | animate-dsm-up | Apparition par le bas, 8px de translation |
| Carte interactive | transition-[box-shadow,border-color] | Élévation progressive au survol, pas de mouvement de position |
| Flèche de carte (CardArrow) | transition-transform + translate-x-1 rtl:-translate-x-1 | Glisse d'un cran dans le sens de lecture au survol |
| Accordéon | grid-template-rows + duration-(--dsm-duration) | Dépliage fluide de la hauteur du panneau |
Utilisation
<button className="transition-[background-color,transform] duration-(--dsm-duration-fast) ease-dsm active:translate-y-px">
Valider
</button>
<div className="animate-dsm-up">Nouvelle notification</div>