Dix scènes du système de transitions Barba, chacune une démonstration autonome sur un mock de navigateur. Quatre sont réellement chargées sur le site (01, 02, 03, 04) ; les six autres prolongent la réflexion vers des techniques non encore branchées.
01Prototypé
Voile
Le blanc monte à 80 %, jamais à 100 % — le plafond de la traversée nuageuse du cinématique. Le conteneur est échangé au sommet du voile, page sortante déjà floue.
DéclencheClic sur un lien interne ; Barba intercepte et attend la promesse de leave avant le swap.VuFlou + voile blanc montant, contenu échangé au sommet, puis le voile redescend sur la nouvelle page.Techgsap.to sur filter/opacity, deux tweens chaînés (leave 520 ms, enter 680 ms).CoûtFaible — c'est la règle par défaut du site, déjà en place partout où aucune paire plus spécifique ne matche.PortfolioDéjà en production — c'est le filet de sécurité de toute navigation.
02Prototypé
Horizon
La ligne se trace d'abord, les deux panneaux se referment sur elle, puis rouvrent sur la page suivante.
DéclencheNavigation à propos ↔ travaux.VuUne ligne lumineuse qui se dessine, deux panneaux qui se referment dessus puis rouvrent sur le contenu suivant.Techleave() dessine la ligne puis ferme les panneaux ; Barba attend la promesse — pas de raccourci possible.CoûtFaible — deux tweens séquencés, aucun état à réconcilier.PortfolioDéjà en production entre à-propos et travaux.
03Prototypé
Signal
Perte de signal : la page s'assombrit, un balayage passe deux fois, le relevé de route s'affiche, puis le contenu revient par paliers.
DéclencheNavigation travaux ↔ projet.VuAssombrissement, double balayage lumineux, relevé de route (namespaces), retour par paliers steps().TechRelevé composé depuis les namespaces des deux vues, disponibles dans leave().CoûtMoyen — la seule transition du jeu qui affiche la navigation elle-même, donc la seule à lire le contexte des deux pages.PortfolioDéjà en production entre travaux et projet.
04Prototypé
Éclipse
L'ouverture se referme jusqu'au noir complet, l'anneau tient 200 ms sur la bascule, puis rouvre sur la page suivante.
DéclencheNavigation à propos ↔ projet.VuUn disque qui se referme jusqu'au noir, un anneau lumineux qui tient la bascule, puis une ouverture progressive.TechLa couverture vient d'un box-shadow à écartement constant : on anime la taille de l'ouverture, jamais un scale.CoûtMoyen — le piège du scale sur l'ombre est le genre d'erreur qui ne se voit qu'à l'écran.PortfolioDéjà en production entre à-propos et projet.
05Prototypé
Synchrone
Avec sync: true, les deux conteneurs coexistent dans le document : le sortant part à gauche pendant que l'entrant arrive de la droite.
DéclenchePiste non branchée sur le site.VuLes deux pages glissent en même temps, côte à côte, au lieu de se succéder.TechSans ce drapeau, leave doit finir avant qu'enter commence — un raccord immédiat est alors impossible.CoûtÉlevé — gérer deux conteneurs vivants en même temps complique tout ce qui suit (scroll, focus, mesures).PortfolioFaible aujourd'hui : aucune paire de routes du site n'en a besoin.
06Prototypé
Règles de route
Une transition par paire de vues. Barba retient la première règle qui correspond : les paires spécifiques d'abord, la règle sans condition en dernier recours.
DéclencheChoix d'un départ et d'une arrivée dans le sélecteur.VuLa règle appliquée s'allume dans la liste selon la paire choisie.TechTRANSITIONS dans barba-transitions.js ; les namespaces viennent du nom de route Blade (data-barba-namespace).CoûtFaible — c'est une lecture, pas une animation.PortfolioC'est la table réellement chargée sur le site — documentation vivante plus qu'effet.
07Prototypé
Vues
Ce qui doit vivre et mourir avec une page : reveals, scrub, parallax, et les sections épinglées ScrollTrigger de /projet.
DéclencheEntrée/sortie du conteneur Barba (afterEnter / beforeLeave).VuUn journal des montages/démontages au fil des navigations simulées.TechbootPageSystems() et project.dispose() — sans démontage, ScrollTrigger garde les bornes de la page précédente.CoûtMoyen — l'oubli est silencieux : la fuite ne se voit qu'après plusieurs navigations.PortfolioC'est le cycle réel du site — pas un effet, un garde-fou.
08Prototypé
Élément partagé
La vignette cliquée devient l'image de tête de la fiche. Mesure avant, mesure après, une seule interpolation : le lien visuel remplace la transition.
DéclenchePiste non branchée sur le site.VuUne vignette qui grandit et se déplace jusqu'à devenir l'image d'en-tête de la page suivante.TechFLIP : les deux conteneurs coexistent le temps de la mesure (sync: true), un couple d'attributs apparie source et cible.CoûtÉlevé — /travaux n'a pas encore de vignettes de projet à apparier.PortfolioFort si des vignettes de projet existent un jour — le lien visuel est plus lisible qu'un fondu.
09Prototypé
Préchargement
Le greffon @barba/prefetch demande la page au survol du lien. Au clic, il ne reste que la peinture : la transition démarre sur un cache chaud.
DéclencheSurvol d'un lien interne.VuComparaison de l'attente réseau observée entre un lien préchargé et un lien qui ne l'est pas.Tech@barba/prefetch, greffon non installé sur le site — cette scène simule seulement l'écart qu'il supprimerait.CoûtFaible à installer, mais dépense du réseau sur des liens jamais cliqués.PortfolioMoyen — gain surtout perceptible sur mobile ou réseau lent.
10Prototypé
Toile persistante
Un canvas Three.js pourrait vivre hors du conteneur Barba : jamais démonté, seule l'interface serait échangée pendant que la scène continue de tourner.
DéclenchePiste non branchée sur le site.VuSimulation de ce qu'il faudrait pour enchaîner les cinématiques sans réinitialiser Three.js.TechSur ce site, chaque cinématique est une page à part hors du wrapper Barba — un vrai chargement, délibéré.CoûtÉlevé — sortir un canvas du cycle Barba complique la synchronisation avec le reste de la page.PortfolioNon appliqué : le choix actuel (page à part) est plus simple et suffisant.
01
Voile
Le blanc monte à 80 %, jamais à 100 % — le plafond de la traversée nuageuse du cinématique. Le conteneur est échangé au sommet du voile, quand la page sortante est déjà floue.
La forme la plus neutre du jeu : elle convient à toutes les paires de routes et sert de règle par défaut sur le site.
{ name: 'voile',leave: ({ current }) => veil.in(520),enter: ({ next }) => veil.out(680) }
lakeust.fr/travaux
Index
TRAVAUX
12 projets — 2024 / 2026
Fiche
ORBITAL
Three.js — Theatre.js — 46 s
520 + 680 ms
02
Horizon
La ligne se trace d'abord, les deux panneaux se referment sur elle, puis rouvrent sur la page suivante. La ligne reste une fraction de seconde seule à l'écran.
En place entre à-propos et travaux sur le site. Barba attend la promesse renvoyée par leave : la fermeture ne peut pas être court-circuitée par une requête rapide.
Perte de signal : la page s'assombrit, un balayage passe deux fois, le relevé de route s'affiche, puis le contenu revient par paliers.
En place entre travaux et projet sur le site — la seule transition du jeu qui montre la navigation elle-même. Le relevé est composé depuis les namespaces des deux vues, disponibles dans leave.
leave({ current, next }) {route.textContent =`${current.namespace} → ${next.namespace}`}
lakeust.fr/travaux
Index
TRAVAUX
12 projets — 2024 / 2026
Fiche
ORBITAL
Three.js — Theatre.js — 46 s
works → project
620 + 540 ms
04
Éclipse
L'ouverture se referme jusqu'au noir complet, l'anneau tient 200 ms sur la bascule, puis rouvre sur la page suivante qui se détend d'un pour cent.
En place entre à-propos et projet sur le site. La couverture vient d'une ombre à écartement constant : c'est la taille de l'ouverture qui est animée, jamais un scale — sinon l'ombre rétrécit avec elle.
Avec sync: true, les deux conteneurs coexistent dans le document : le sortant part à gauche pendant que l'entrant arrive de la droite, dans la même course.
Piste non branchée sur le site — aucune paire de routes n'en a besoin aujourd'hui. Sans ce drapeau, leave doit finir avant qu'enter commence — un raccord est alors impossible.
barba.init({ sync: true, transitions: [{leave: ({ current }) => slide(current, -100),enter: ({ next }) => slide(next, 100, 0) }] })
lakeust.fr/travaux
Index
TRAVAUX
12 projets — 2024 / 2026
Fiche
ORBITAL
Three.js — Theatre.js — 46 s
720 ms, une seule course
06
Règles de route
Une transition par paire de vues. Barba retient la première règle qui correspond : les paires spécifiques d'abord, la règle sans condition en dernier recours.
Ce sont les règles réellement chargées sur le site — voir TRANSITIONS dans barba-transitions.js. Les namespaces viennent du nom de route Blade : data-barba-namespace="works". Choisis un départ et une arrivée — la règle appliquée s'allume.
Depuis
Vers
Appliquéevoileworks → project
07
Vues
Ce qui doit vivre et mourir avec une page : reveals, scrub, parallax, et les sections épinglées ScrollTrigger de /projet. Montés dans afterEnter, détruits dans beforeLeave.
Le cycle réel du site — voir bootPageSystems() et project.dispose(). Sans démontage, chaque visite laisse un abonné derrière elle, et ScrollTrigger garde les bornes de la page précédente.
hooks.beforeLeave(({ current }) =>current.namespace === 'web.project' && project.dispose())hooks.afterEnter(({ next }) => bootPageSystems(next))
Cycle de vieVue active — works
Scène montée — 1 abonné
0 navigation
08
Élément partagé
La vignette cliquée devient l'image de tête de la fiche. Mesure avant, mesure après, une seule interpolation : le lien visuel remplace la transition.
Piste non branchée sur le site — /travaux n'a pas encore de vignettes de projet. Les deux conteneurs doivent coexister le temps de la mesure — donc sync: true, et un couple d'attributs pour apparier la source et la cible.
const a = clicked.getBoundingClientRect()const b = hero.getBoundingClientRect()hero.animate(invert(a, b), 760)
lakeust.fr/travaux
Sélection
Forêt
Trou noir
Image de tête
ORBITAL
Three.js — Theatre.js — 46 s
Clique la vignette Orbital
09
Préchargement
Le greffon @barba/prefetch demande la page au survol du lien. Au clic, il ne reste que la peinture : la transition démarre sur un cache chaud.
Greffon non installé sur le site — cette scène simule seulement l'écart d'attente qu'il supprimerait. Survole les deux liens, puis clique : le relevé compare l'attente réseau observée.
import prefetch from '@barba/prefetch'barba.use(prefetch)// data-barba-prefetch="false" pour exclure
inactif
sans greffon — requête au clic
inactif
prefetch au survol
Attente réseau—aucune navigation
10
Toile persistante
Un canvas Three.js pourrait vivre hors du conteneur Barba : jamais démonté, seule l'interface serait échangée pendant que la scène continue de tourner.
Non appliqué : sur ce site, chaque cinématique (home-cinematic, forest-cinematic, blackhole-cinematic) est une page à part, hors du wrapper Barba — un vrai chargement, délibérément. Cette scène illustre ce qu'il faudrait pour les enchaîner sans réinitialiser Three.js.
<!-- hors du conteneur --><orbital-stage></orbital-stage><main data-barba="container">…</main>