Carousel Lab
IX

Catalogue

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.

01 Prototypé

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.
02 Prototypé

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.
03 Prototypé

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.
04 Prototypé

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.
05 Prototypé

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.
06 Prototypé

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.
07 Prototypé

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.
08 Prototypé

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é.
09 Prototypé

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.
10 Prototypé

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.
11 Prototypé

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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Molette ← → 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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Molette ← → 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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Molette ← → 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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Molette ← → 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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Molette ← → 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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Molette ← → 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
Molette Clic ← → 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
Molette Clic ← → 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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Glisser · 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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Glisser · 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.

01 2026

Projet 01

Interaction / WebGL

02 2026

Projet 02

Direction artistique

03 2025

Projet 03

Site vitrine

04 2025

Projet 04

Jeu — Unity

05 2025

Projet 05

Identité

06 2024

Projet 06

Motion

07 2024

Projet 07

Outil interne

08 2023

Projet 08

Prototype R&D

Glisser Glisser · Dolly