Motion Lab

§9.4

La bibliothèque d'animations du projet, et la démonstration de chaque famille. Durées, courbes, décalages et distances viennent tous de src/styles/motion.css — aucune valeur n'est écrite dans un composant.

Règles de motion appliquées
Token	Valeur	Usage
Entrée	420ms · ease-out	Reveal, Stagger, TextReveal
Survol	160ms · ease-out	Boutons, liens, cartes
Overlay	240ms · ease-out	Modale, tiroir, popover
Transition de page	240ms · ease-out	Opacité + 8px, sans sortie
Stagger	40 / 70 / 120ms	Serré, standard, ample
Course	8 / 16 / 28px	Au-delà, cela lit comme un reflux de layout

Entrées

Reveal

motion/reveal.tsx

down

left

right

Stagger

motion/stagger.tsx

Premier
Deuxième
Troisième
Quatrième

Texte

TextReveal

motion/text-reveal.tsx

Le mouvement doit renforcer la compréhension.

Chaque fragment monte sous un masque. La phrase reste lisible avant, pendant et après l'animation.

Survol et curseur

Magnetic

motion/magnetic.tsx

TiltCard

motion/tilt-card.tsx

Carte inclinée

Le ressort revient au repos à la sortie du pointeur.

CursorFollow

motion/cursor-follow.tsx

Le halo suit le pointeur à l'intérieur de ce cadre, et seulement ici.

Scroll

Parallax

motion/parallax.tsx

Faites défiler la page

HorizontalRail

sections/horizontal-rail.tsx

Défilement natif

scroll-snap et overflow-x: auto. Le geste tactile est celui du système, la zone est focusable au clavier.

Pas de scroll détourné

Aucune conversion du scroll vertical en déplacement horizontal : c'est la première cause de pages qu'on n'arrive plus à quitter.

Repère de fin

Le dernier élément affleure le bord pour signaler qu'il reste du contenu, sans barre de défilement personnalisée.

Quand passer à GSAP

Lorsqu'une séquence doit synchroniser plusieurs timelines sur une même piste. Tant que ce n'est pas le cas, la dépendance ne se justifie pas.

Section épinglée

Le titre tient, le contenu passe

01
Le scroll reste au navigateur
La section est épinglée par position: sticky. La molette, le clavier et le geste tactile gardent leur comportement système ; rien n'intercepte le défilement.
02
Motion lit, il ne pilote pas
useScroll rapporte la progression dans la piste. Elle sert à faire varier l'opacité des étapes, pas à déplacer la page.
03
La piste reste courte
Sa hauteur est calculée sur le nombre d'étapes. Une section épinglée plus longue que quelques écrans donne l'impression que la page est bloquée.

Reduced motion

Le contrôle le plus important de cette page, et le seul dont l'échec est invisible en démonstration.

État détecté : mouvement complet

Activez « réduire les animations » dans les réglages de votre système : cette page se recharge sans aucune animation, et rien ne disparaît.

Ce qui est retiré

Toutes les transitions, tous les décalages, tous les stagger. m.css met les durées à 0,01ms et les distances à 0px en un seul endroit.

Ce qui est préservé

L'état final. Un composant ne rend jamais une version raccourcie de son animation : il rend le résultat.

Comment c'est vérifié

npm run verify charge la page avec reducedMotion: reduce et échoue si un titre reste sous une opacité de 0,9.

Le mouvement doit renforcer la compréhension.Le mouvement doit renforcer la compréhension.