Comment ajouter des transitions de pages fluides à un site Next.js

Cet article fait partie de la série "Refonte de site web avec l'IA". Épisode précédent : Créer une landing page avec l'IA.

Pourquoi des animations ?

Un site web, ce n'est pas juste de l'information. C'est une expérience. Et les transitions entre les pages sont le moment où la plupart des sites cassent cette expérience. Un flash blanc, un rechargement brutal, et l'utilisateur perd le fil.

Je voulais que naviguer sur asuos.ch soit fluide, presque tactile. Comme feuilleter un magazine plutôt que cliquer sur des liens.

La transition "Falling Paper"

L'idée

Quand on quitte une page, elle ne disparaît pas. Elle tombe. Comme une feuille de papier qui glisse de la table. Pendant qu'elle tombe, la nouvelle page est déjà visible en dessous, prête à être lue.

L'implémentation

Claude Code a créé un composant PageTransition.tsx (plus de 150 lignes) qui capture la page actuelle au moment du clic de navigation, anime la sortie avec une rotation 3D et une translation verticale, ajoute un effet de bordure déchirée via un SVG généré dynamiquement qui simule le bord irrégulier d'une feuille de papier arrachée, et gère le timing précis entre la disparition de l'ancienne page et l'apparition de la nouvelle.

Le résultat est une transition qui dure environ 400ms. Assez longue pour être perçue, assez courte pour ne pas gêner la navigation.

Le CSS derrière

Plus de 170 lignes de CSS ajoutées dans tailwind.css pour les animations : keyframes, transforms 3D, timing functions cubiques. Le genre de CSS qu'on écrit une fois et qu'on ne touche plus jamais. Parfait pour être délégué à l'IA.

L'effet Ripple sur le switch de thème

L'idée

Quand on bascule entre le thème clair et le thème sombre, un cercle se propage depuis le bouton, comme une onde dans l'eau. Mais avec une subtilité : la direction dépend du thème.

Vers le thème clair (soleil), l'onde part du bouton et rayonne vers l'extérieur, comme le soleil qui illumine. Vers le thème sombre (lune), l'onde part de l'extérieur et converge vers le bouton, comme la nuit qui tombe.

L'implémentation

Claude Code a modifié le composant ThemeSwitch.tsx pour ajouter un overlay plein écran avec une animation de clip-path circulaire. Le cercle s'agrandit (ou se réduit) avec une courbe d'accélération naturelle.

La partie technique la plus délicate : éviter les race conditions entre le changement de thème CSS et l'animation de transition. Si le thème change avant que l'animation ne commence, l'effet est ruiné. Claude Code a géré ça avec un système de timing précis et des callbacks séquentiels.

Le scroll infini animé

Sur les pages de listing, les pages de blog et de tags chargent désormais les articles progressivement. Un IntersectionObserver détecte quand l'utilisateur approche du bas de la liste et déclenche le chargement du lot suivant. Chaque nouvel article apparaît avec un léger délai en cascade : le premier apparaît, puis le deuxième 50ms après, puis le troisième, et ainsi de suite. Ça donne un effet de "cascade" très naturel. Pas de bouton "Charger plus", c'est automatique et transparent.

Les boutons scroll-to-top et scroll-to-comments ont également été revus avec des animations douces et un comportement intelligent : ils n'apparaissent que quand c'est pertinent et disparaissent en fondu quand on n'en a plus besoin.

Le hardening : accessibilité et robustesse

Après l'implémentation initiale, une passe complète de hardening a été faite. C'est la partie la moins glamour, mais la plus importante.

Accessibilité

Le support de prefers-reduced-motion a été ajouté : si l'utilisateur a activé ce réglage dans son OS, toutes les animations sont désactivées. Pas réduites, désactivées. Parce que pour certaines personnes, les animations ne sont pas une question de goût mais de confort visuel.

Race conditions

Que se passe-t-il si on clique sur un lien pendant une transition de page ? Si on change le thème pendant une navigation ? Si on scroll pendant un chargement ? Chacun de ces scénarios a été identifié et géré avec des gardes et des annulations propres.

Fuites mémoire

Tous les écouteurs d'événements (IntersectionObserver, scroll, transitionend) sont proprement nettoyés quand les composants se démontent. Pas de zombies en mémoire.

L'IA et la créativité

C'est l'épisode de cette série que j'ai le plus apprécié, et il illustre bien la dynamique humain/IA.

L'idée de la page qui tombe comme une feuille de papier ? C'est venu d'une discussion, d'une envie créative. L'implémentation, le CSS, les keyframes, les transforms 3D, le SVG de la bordure déchirée, la gestion du timing ? C'est Claude Code. L'itération, "c'est trop lent", "la bordure n'est pas assez irrégulière", "inverse la direction pour le thème sombre" ? C'est moi qui guide, Claude Code qui exécute.

On ne pourrait pas avoir l'un sans l'autre. L'IA seule n'aurait jamais eu l'idée de la feuille qui tombe. Et moi seul, j'aurais passé deux jours à implémenter ces animations au lieu de deux heures.

Demain, on passe au côté moins visible mais tout aussi crucial : le SEO. Données structurées, sitemap multilingue, flux RSS, robots.txt. Un audit complet qui a révélé des surprises. Et pas des bonnes.