# Mouvement - Système de design Unless

Fondations

# Mouvement
  [Courbes d'accélération](/fr/design/foundations/motion/)[Durée](/fr/design/foundations/motion/duration/)[Mouvement réduit](/fr/design/foundations/motion/reduced-motion/)[Logotype animé](/fr/design/foundations/motion/logo-lockup/)[Exemples](/fr/design/foundations/motion/examples/)
## Logotype animé - machine à écrire au défilement

Le logotype de la nav du site se contracte au défilement : la marque reste en place tandis que les six lettres du logotype s'effacent de droite à gauche, ne laissant que la marque. Revenir en haut de page les fait réapparaître de gauche à droite. Les deux délais sont sensibles à la direction - le délai de transition de chaque état régit l'animation VERS cet état, si bien que l'escalier s'inverse correctement.

- **Propriété** : `opacity` sur chaque tracé `.logo-letter` (la géométrie de la marque ne bouge jamais).
- **Durée** : `140 ms` par lettre (ease).
- **Décalage sortant** (défilé) : avance de `280 ms` pour que la transition de verre / couleur de la nav arrive en premier, puis `+100 ms` par lettre de droite à gauche (positions 6 → 5 → 4 → 3 → 2 → 1 à 280, 380, 480, 580, 680, 780 ms).
- **Décalage entrant** (retour en haut) : base à `0 ms`, puis `+100 ms` par lettre de gauche à droite (positions 1 → 2 → 3 → 4 → 5 → 6 à 0, 100, 200, 300, 400, 500 ms).
- **Mouvement réduit** : respecte `prefers-reduced-motion: reduce` - les lettres basculent entre les états sans décalage.

### Live demo

Appuyez sur le bouton pour replier / déplier le logotype. Reproduit ce que fait la nav du site au-delà de 8 px de défilement.
             [Mouvement · Mouvement réduit](/fr/design/foundations/motion/reduced-motion/)     [Mouvement · Exemples](/fr/design/foundations/motion/examples/)