Descendez.
Vous défilez verticalement, comme sur n'importe quelle page. C'est le contenu qui se déplace de côté.
Rien n'a été intercepté.
La barre de défilement, les flèches, Page suivante, Origine et Fin répondent exactement comme d'habitude. Essayez.
Parce que c'est là que ça casse.
Convertir le geste vertical en déplacement horizontal est la manière évidente de faire ceci. C'est aussi celle qui produit des pages dont on ne sort plus.
Une piste haute, un panneau collant.
Toute la mécanique tient en deux propriétés CSS et une interpolation. Le reste est du contenu.
§2
Pourquoi l'alternance fonctionne
Une page entièrement horizontale fatigue : elle retire le repère de position que la barre de défilement donne gratuitement, et elle impose un geste que personne n'a choisi. Une page entièrement verticale ne surprend jamais.
L'alternance résout les deux. La séquence horizontale sert ce qui est réellement une progression — un manifeste, une chronologie, une comparaison — et la section verticale rend la lecture au lecteur dès que le propos demande de s'arrêter.
Le rythme compte autant que l'effet : une séquence horizontale de plus de quatre ou cinq panneaux cesse d'être une surprise et devient une corvée.
On se parle.
Trente minutes. Vous décrivez votre activité, je pose les questions qui manquent. Aucun engagement.
Un prix. Une date.
Par écrit, sous 48 heures. Le montant est ferme et la date aussi.
Vous voyez avancer.
Un lien de suivi dès le premier jour. Vous commentez au fur et à mesure, pas à la fin.
Vous prenez la main.
Le site est à vous. Une heure de prise en main pour que vous puissiez le modifier seul.
§4
Ce que ça coûte, honnêtement
Une séquence horizontale occupe la hauteur de plusieurs écrans pour un contenu qui en tiendrait un. C'est du temps de lecture acheté avec de la place : il faut que le contenu le vaille.
Sous prefers-reduced-motion, chaque séquence redevient un empilement vertical ordinaire. Rien n'est masqué, rien n'attend une animation qui ne se jouera pas.
Et le repère de position revient sous forme de points : sans lui, une séquence horizontale retire au lecteur la seule information que la barre lui donnait — où il en est, et combien il reste.
Un effet se juge à ce qu'il retire.
Pas à ce qu'il ajoute. Celui-ci ne retire ni la barre de défilement, ni le clavier, ni la possibilité de partir.
Le contenu d'abord.
Une séquence horizontale sur un propos qui ne progresse pas est un carrousel déguisé.
Continuez à descendre.
La page se termine normalement, comme elle a commencé.
src/components/motion/horizontal-track.tsx