Une seule valeur pilote la scène : la position fractionnaire dans la liste. Le scroll l'écrit, le drag et le clavier la réécrivent en déplaçant le scroll — donc aucune timeline ne s'empile et aucune interaction n'entre en conflit avec une autre. Six dispositions se commutent à chaud sur les mêmes huit plans.
Le pilote
Une section épinglée, scrub vrai. La progression devient la position fractionnaire ; le rendu lisse la valeur d'une frame à l'autre au lieu de tweener chaque plan.
Les entrées
Drag, clic, flèches et tactile n'écrivent jamais la position : ils déplacent le scroll par Lenis. Un seul système tient le scroll, donc rien à réconcilier.
Le fond
<carousel-field> possède le renderer, la scène et la boucle ; la page ne lui pousse que des valeurs par setField() — même contrat que les stages existants.
Les données
Un tableau d'items — titre, année, discipline. Ajouter ou retirer une entrée ne touche à aucune loi de placement.
Le post-traitement
Les écrans 07 et 08 passent par un graphe de filtres SVG monté une fois : chaque image ne réécrit qu'un seuil ou une amplitude — intercept, scale — et le filtre est retiré du plan dès la fin.
01Prototypé
Arc
Cover-flow spatial : la profondeur croît au carré de la distance, la rotation reste plafonnée. Le plan actif est le seul parfaitement de face.
ScrollPosition fractionnaire → décalage X, profondeur en d², rotation plafonnée.VuLe plan actif de face, les suivants qui reculent et pivotent jusqu'à ±44°, floutés au-delà d'un tiers de plan.TechProfondeur en d², rotation bornée à ±44°, flou progressif au-delà d'un tiers de plan d'écart.CoûtFaible — une seule loi trigonométrique par plan, pas de géométrie recalculée en boucle.PortfolioFort — le plus lisible des six, bon candidat pour une grille de projets.
02Prototypé
Anneau
Un cercle horizontal dont le rayon vaut deux fois la carte : on est dedans, les voisins passent en périphérie plutôt que derrière.
ScrollPosition fractionnaire → angle sur le cercle, 0,52 rad par pas.VuLes huit plans répartis sur un cercle, aucun changement d'échelle — seule la profondeur trahit la position.TechRayon à 1,95 × la carte, pas angulaire de 0,52 rad, aucun changement d'échelle.CoûtFaible — une rotation, un rayon fixe.PortfolioMoyen — élégant mais les plans latéraux restent petits à l'écran.
03Prototypé
Orbite
Même cercle, mais le déport vertical prend le signe de la distance : ce qui est passé remonte, ce qui vient descend. Les plans arrivent des quatre côtés.
ScrollPosition fractionnaire → angle + déport vertical signé (0,58 × le rayon).VuLes plans qui montent ou descendent selon qu'ils sont passés ou à venir, arrivée par les quatre côtés de l'écran.TechPas de 0,60 rad, déport vertical signé à 0,58 × le rayon, léger roulis en Z.CoûtMoyen — même base que l'anneau, une composante verticale signée en plus.PortfolioFort — la variation la plus dynamique visuellement du lot.
04Prototypé
Hélice
Une seule phase pilote deux choses : la hauteur monte linéairement, la position latérale suit son sinus. La colonne tourne en s'élevant.
ScrollPosition fractionnaire → hauteur linéaire + position latérale en sinus de la même phase.VuUne colonne qui tourne en s'élevant, chaque plan un peu plus haut que le précédent.TechPas de 0,78 rad, hauteur de 0,40 × la carte par rang, échelle plancher à 0,70.CoûtFaible — une seule phase, deux fonctions trigonométriques.PortfolioMoyen — lecture verticale, adaptée à un historique ou une chronologie.
05Prototypé
Pile
Tout en Z, presque rien en X : l'actif devant, les suivants empilés derrière avec un décalage constant. Le cas dense, pour lire un ordre.
ScrollPosition fractionnaire → recul Z (126 px/rang) + décalage latéral (20 px/rang).VuUne pile compacte, l'actif devant, les suivants qui reculent avec un léger décalage latéral.Tech126 px de recul et 20 px de décalage latéral par rang ; l'échelle ne descend pas sous 0,72.CoûtFaible — la disposition la plus simple des six.PortfolioFort — le cas dense, utile quand l'ordre compte plus que l'espace.
06Prototypé
Grille
Trois colonnes qui défilent en continu ; le plan actif quitte sa cellule, vient au centre et repousse les autres. La grille se recompose derrière lui.
ScrollPosition fractionnaire → sortie/entrée de cellule, interpolée sur les deux tiers d'un pas.VuUne grille qui se recompose en direct : le plan actif sort de sa cellule, vient au centre, puis regagne sa place.TechLa ligne suit la position fractionnaire ; la sortie de cellule s'achève aux deux tiers d'un pas.CoûtMoyen — la loi combine une position de grille et une interpolation vers le centre.PortfolioFort — seule disposition qui montre l'ensemble et l'actif en même temps.
07Prototypé
Dissolve
Le plan sortant n'est pas fondu : il est détruit. Un seuil balaye un champ de bruit, les pixels tombent au-dessous, et le plan suivant se reforme dans le même mouvement.
ScrollPosition fractionnaire → index élu ; le franchissement d'un demi-plan déclenche la passe de seuil.VuUn seuil qui balaye un bruit fractal, le plan sortant mangé pixel par pixel, l'entrant qui se reforme dans un bruit différent.TechGraphe de filtres SVG sur du DOM vivant : bruit fractal, seuil dur, seconde coupe décalée de 0.10 pour la bande de front, teintée en accent. Deux graines différentes pour que l'entrant ne soit pas l'exact négatif du sortant.CoûtÉlevé — graphe de filtres SVG monté une fois, mais coûteux à l'exécution sur GPU faible.PortfolioFort — la transition la plus mémorable des huit, à réserver à un moment fort.
08Prototypé
Fracture
Une displacement map disloque le plan pendant un quart de seconde ; les trois couches de couleur se séparent, la coupe a lieu au pic, et l'image se recompose derrière.
ScrollPosition fractionnaire → index élu ; le franchissement déclenche la passe de displacement.VuLe plan qui se disloque en bandes, les trois couches de couleur qui se séparent puis se recomposent.TechTurbulence anisotrope pour des bandes horizontales, déplacement jusqu'à 52 px, séparation RVB par décalage inverse des canaux et recomposition en screen. Le sens du décalage suit celui de la navigation.CoûtÉlevé — displacement map + séparation RVB, même famille de coût que Dissolve.PortfolioFort — plus abrupt que Dissolve, adapté à un changement de registre plutôt qu'une continuité.
09Prototypé
Bandeau
Plus de cartes : chaque plan occupe la section entière. Les panneaux glissent bord à bord, l'image se déplace moins vite que son cadre.
ScrollPosition fractionnaire → glissement bord à bord, parallaxe interne du média à 22 %.VuUn plan par écran, plein cadre, qui glisse latéralement pendant que son image dérive plus lentement à l'intérieur.TechUn plan par largeur d'écran, parallaxe interne à 22 %, légère surcote d'échelle pour éviter les bords.CoûtFaible — une translation du plan, une contre-translation du média.PortfolioFort — le format le plus immersif du lot, adapté à une galerie de captures.
10Prototypé
Rideau
Rien ne sort : le plan suivant se découvre par le bas et recouvre le précédent, qui recule d'un cran sans jamais bouger latéralement.
ScrollPosition fractionnaire → découpe progressive (clip-path inset) du panneau entrant.VuUn rideau qui monte depuis le bas et recouvre le plan précédent, empilé derrière sans jamais glisser latéralement.TechDécoupe en inset sur le panneau entrant, contre-glissement interne de 14 %, empilement par index et non par distance.CoûtMoyen — clip-path animé par plan, empilement d'index à maintenir.PortfolioFort — lecture d'un empilement plutôt que d'un défilement, bon candidat pour une chronologie.
11Prototypé
Travelling
Aucun déplacement dans le plan : la caméra avance. Le suivant arrive de loin en s'ouvrant, le précédent se retire vers le fond.
ScrollPosition fractionnaire → échelle du plan (amont/aval) + contre-zoom interne du média.VuUn travelling avant : le plan à venir s'ouvre en grandissant, le plan passé recule en rétrécissant, jamais de mouvement latéral.TechÉchelle 1,16 en amont, 0,90 en aval, opacité en 1,35 × la distance, contre-zoom interne pour tenir la profondeur.CoûtFaible — une échelle par plan, une contre-échelle du média.PortfolioMoyen — effet de profondeur marqué, à réserver à un nombre restreint de plans.
01
Arc
Cover-flow spatial : la profondeur croît au carré de la distance, la rotation reste plafonnée. Le plan actif est le seul parfaitement de face.
Profondeur en d², rotation bornée à ±44°, flou progressif au-delà d'un tiers de plan d'écart.
012026
Projet 01
Interaction / WebGL
022026
Projet 02
Direction artistique
032025
Projet 03
Site vitrine
042025
Projet 04
Jeu — Unity
052025
Projet 05
Identité
062024
Projet 06
Motion
072024
Projet 07
Outil interne
082023
Projet 08
Prototype R&D
GlisserMolette← →1–6 dispositions
02
Anneau
Un cercle horizontal dont le rayon vaut deux fois la carte : on est dedans, les voisins passent en périphérie plutôt que derrière.
Rayon à 1,95 × la carte, pas angulaire de 0,52 rad, aucun changement d'échelle.
012026
Projet 01
Interaction / WebGL
022026
Projet 02
Direction artistique
032025
Projet 03
Site vitrine
042025
Projet 04
Jeu — Unity
052025
Projet 05
Identité
062024
Projet 06
Motion
072024
Projet 07
Outil interne
082023
Projet 08
Prototype R&D
GlisserMolette← →1–6 dispositions
03
Orbite
Même cercle, mais le déport vertical prend le signe de la distance : ce qui est passé remonte, ce qui vient descend. Les plans arrivent des quatre côtés.
Pas de 0,60 rad, déport vertical signé à 0,58 × le rayon, léger roulis en Z.
012026
Projet 01
Interaction / WebGL
022026
Projet 02
Direction artistique
032025
Projet 03
Site vitrine
042025
Projet 04
Jeu — Unity
052025
Projet 05
Identité
062024
Projet 06
Motion
072024
Projet 07
Outil interne
082023
Projet 08
Prototype R&D
GlisserMolette← →1–6 dispositions
04
Hélice
Une seule phase pilote deux choses : la hauteur monte linéairement, la position latérale suit son sinus. La colonne tourne en s'élevant.
Pas de 0,78 rad, hauteur de 0,40 × la carte par rang, échelle plancher à 0,70.
012026
Projet 01
Interaction / WebGL
022026
Projet 02
Direction artistique
032025
Projet 03
Site vitrine
042025
Projet 04
Jeu — Unity
052025
Projet 05
Identité
062024
Projet 06
Motion
072024
Projet 07
Outil interne
082023
Projet 08
Prototype R&D
GlisserMolette← →1–6 dispositions
05
Pile
Tout en Z, presque rien en X : l'actif devant, les suivants empilés derrière avec un décalage constant. Le cas dense, pour lire un ordre.
126 px de recul et 20 px de décalage latéral par rang ; l'échelle ne descend pas sous 0,72.
012026
Projet 01
Interaction / WebGL
022026
Projet 02
Direction artistique
032025
Projet 03
Site vitrine
042025
Projet 04
Jeu — Unity
052025
Projet 05
Identité
062024
Projet 06
Motion
072024
Projet 07
Outil interne
082023
Projet 08
Prototype R&D
GlisserMolette← →1–6 dispositions
06
Grille
Trois colonnes qui défilent en continu ; le plan actif quitte sa cellule, vient au centre et repousse les autres. La grille se recompose derrière lui.
La ligne suit la position fractionnaire ; la sortie de cellule s'achève aux deux tiers d'un pas.
012026
Projet 01
Interaction / WebGL
022026
Projet 02
Direction artistique
032025
Projet 03
Site vitrine
042025
Projet 04
Jeu — Unity
052025
Projet 05
Identité
062024
Projet 06
Motion
072024
Projet 07
Outil interne
082023
Projet 08
Prototype R&D
GlisserMolette← →1–6 dispositions
07
Dissolve
Le plan sortant n'est pas fondu : il est détruit. Un seuil balaye un champ de bruit, les pixels tombent au-dessous, et le plan suivant se reforme dans le même mouvement.
Graphe de filtres SVG sur du DOM vivant : bruit fractal, seuil dur, seconde coupe décalée de 0.10 pour la bande de front, teintée en accent. Deux graines différentes pour que l'entrant ne soit pas l'exact négatif du sortant.
01
Projet 01
Interaction / WebGL
02
Projet 02
Direction artistique
03
Projet 03
Site vitrine
04
Projet 04
Jeu — Unity
05
Projet 05
Identité
06
Projet 06
Motion
07
Projet 07
Outil interne
08
Projet 08
Prototype R&D
MoletteClic← →Seuil sur bruit fractal
08
Fracture
Une displacement map disloque le plan pendant un quart de seconde ; les trois couches de couleur se séparent, la coupe a lieu au pic, et l'image se recompose derrière.
Turbulence anisotrope pour des bandes horizontales, déplacement jusqu'à 52 px, séparation RVB par décalage inverse des canaux et recomposition en screen. Le sens du décalage suit celui de la navigation.
01
Projet 01
Interaction / WebGL
02
Projet 02
Direction artistique
03
Projet 03
Site vitrine
04
Projet 04
Jeu — Unity
05
Projet 05
Identité
06
Projet 06
Motion
07
Projet 07
Outil interne
08
Projet 08
Prototype R&D
MoletteClic← →Displacement · split RVB
09
Bandeau
Plus de cartes : chaque plan occupe la section entière. Les panneaux glissent bord à bord, l'image se déplace moins vite que son cadre.
Un plan par largeur d'écran, parallaxe interne à 22 %, légère surcote d'échelle pour éviter les bords.
012026
Projet 01
Interaction / WebGL
022026
Projet 02
Direction artistique
032025
Projet 03
Site vitrine
042025
Projet 04
Jeu — Unity
052025
Projet 05
Identité
062024
Projet 06
Motion
072024
Projet 07
Outil interne
082023
Projet 08
Prototype R&D
GlisserGlisser · Plein cadre
10
Rideau
Rien ne sort : le plan suivant se découvre par le bas et recouvre le précédent, qui recule d'un cran sans jamais bouger latéralement.
Découpe en inset sur le panneau entrant, contre-glissement interne de 14 %, empilement par index et non par distance.
012026
Projet 01
Interaction / WebGL
022026
Projet 02
Direction artistique
032025
Projet 03
Site vitrine
042025
Projet 04
Jeu — Unity
052025
Projet 05
Identité
062024
Projet 06
Motion
072024
Projet 07
Outil interne
082023
Projet 08
Prototype R&D
GlisserGlisser · Recouvrement
11
Travelling
Aucun déplacement dans le plan : la caméra avance. Le suivant arrive de loin en s'ouvrant, le précédent se retire vers le fond.
Échelle 1,16 en amont, 0,90 en aval, opacité en 1,35 × la distance, contre-zoom interne pour tenir la profondeur.