Panneaux aimantés
Quatre plans pleine hauteur. Le scroll reste libre, puis se cale sur le plan le plus proche dès qu'il s'immobilise. Chaque plan porte sa propre valeur de fond et une parallaxe interne.
Orbite
Le calage est piloté par Lenis, pas par scroll-snap : un seul système contrôle le scroll, et la position finale reste interruptible.
Profondeur 2.5D
Cinq couches, cinq vitesses. Aucune 3D : uniquement des translations proportionnelles au scroll.
Grille0.9×
Image0.28×
Titre0.05×
Marques−1.4×
État = position
L'animation ne se joue pas à l'entrée de la section : sa valeur est lue directement dans la progression du scroll. Remonte, elle revient en arrière.
Un seul ScrollTrigger épinglé, une timeline en scrub. Le compteur, la barre, la forme et le fond lisent tous la même valeur.
Récit épinglé
La section reste à l'écran pendant que quatre étapes se succèdent, puis la page reprend son cours.
Le titre, la planche, les puces, le fond et la barre d'étapes appartiennent à la même timeline épinglée sur 3200 px de scroll.
Flux continu
Une liste qui ne se termine pas, rendue par un pool de nœuds recyclés. Le nombre d'éléments dans le DOM reste constant, quel que soit le nombre de lignes parcourues.
Nœuds—
Index atteint0
Masques
Quatre transitions de section liées au scroll : hexagone, deux côtés, ligne centrale, image révélée.
Chambre orbitale
Le scroll n'avance plus dans la page : il pilote une orbite. Les fiches arrivent sur l'anneau, le plan bascule vers l'horizontale, puis l'anneau s'effondre en liste lisible. Chaque position est recalculée à la frame depuis la progression — remonter inverse exactement le mouvement.
Trois régimes dans une seule section : arrivée, rotation du plan, effondrement. Aucune interpolation GSAP sur les fiches — un seul layout(p) écrit les neuf transformations.
Champ polarisé
Ici ce n'est pas la position du scroll qui compte, mais sa vitesse et son signe. Descendre attire la matière vers le noyau, remonter la repousse, s'arrêter laisse le champ se détendre. Le geste devient une force.
135 nœuds, un seul ticker GSAP, aucune bibliothèque de physique : ressort simple vers une cible calculée depuis la vitesse de Lenis.
Corridor
La page ne défile pas : la caméra avance. Les plans viennent de loin, grossissent, passent derrière l'observateur et disparaissent. Le scroll est une position dans l'espace, pas dans un document.
CSS 3D uniquement : perspective sur la scène, translateZ sur huit plans. La visibilité est coupée dès qu'un plan dépasse la caméra.
Démontage
Aucune section n'apparaît : la précédente est démontée. Les lettres se dispersent, les lignes se détachent, les plaques partent vers leurs points de fuite — et la section suivante se réassemble depuis ces mêmes trajectoires.
Les vecteurs de sortie et d'entrée sont déclarés dans le HTML (data-part, data-build) : le module ne connaît pas la mise en page.
Quadrants contrariés
Une seule section, quatre lois de mouvement. Deux zones suivent le scroll à des vitesses différentes, une le contredit — le contenu remonte quand on descend — et la dernière le traduit en échelle. Le regard perd le repère commun.
Chaque zone est une fenêtre en overflow:hidden ; seul son contenu bouge. Utilisable en production pour une page projets à quatre entrées.
Morphogenèse
Rectangle, hexagone, cercle, plaque. Une seule surface change de forme au fil du scroll, et le contenu se révèle pendant la transformation. Les formes sont échantillonnées sur le même nombre de points, donc l'interpolation est exacte.
48 points échantillonnés par lancer de rayon depuis le centre de la forme. N'importe quel couple de formes devient interpolable, y compris cercle vers hexagone.
Entrelacs
Un seul angle de phase pilote la position latérale (son sinus) et la profondeur (son cosinus). Les trois brins ne se croisent donc pas en apparence : celui qui passe devant repasse réellement derrière un demi-tour plus loin, flou et rétréci.
Aucune règle de superposition n'est écrite : le z-index, le flou et l'échelle sont tous dérivés du même cosinus, donc l'ordre de profondeur ne peut pas se désynchroniser du mouvement.
Repli
La progression est repliée en onde triangulaire. Passé la moitié de la section, continuer à descendre rejoue la scène à l'envers : la page avance, le contenu recule. Le retour a son propre sol et son reflet inversé, pour que le lecteur sache qu'il n'a pas remonté par erreur.
Une seule ligne de code fait le repli : la progression est convertie en onde triangulaire avant d'être distribuée aux éléments. Chaque état est déclaré une fois et se joue deux fois.
Focale verticale
Rien ne défile. Le document tient entièrement dans l'écran et le scroll ne déplace que le point de lecture : la bande visée s'ouvre, les autres se compriment en filets. La hauteur totale reste constante parce que les hauteurs sont normalisées entre elles.
Les hauteurs sont réparties en proportion d'une gaussienne, jamais mesurées sur le rendu obtenu : la mise en page ne peut donc pas s'auto-alimenter et osciller.
Catalogue
Quinze mécaniques de scroll inventées pour ce laboratoire, au-delà des six systèmes de base. Neuf sont prototypées et navigables ; six restent à l'état de fiche. Chaque fiche indique ce que le scroll pilote, ce que l'on voit, la difficulté réelle et l'intérêt pour le portfolio.
Ω · 01
Prototypé
Chambre orbitale
Les fiches d'un ensemble ne sont plus une grille mais une orbite. Le scroll fait arriver les objets sur l'anneau, bascule le plan de l'orbite vers l'horizontale, puis effondre l'anneau en liste lisible.
ScrollAngle, rayon, inclinaison du plan et effondrement — quatre paramètres lus dans la même progression.
VuNeuf fiches tournant autour d'un noyau lumineux, celles du fond floues et petites, qui finissent alignées en colonne.
TechGSAP ScrollTrigger épinglé + trigonométrie par frame, aucune 3D.
CoûtMoyen — la difficulté est le passage anneau → liste sans saut.
PortfolioFort : page « projets » ou « services » qui se range toute seule.
Ω · 02
Prototypé
Champ polarisé
Le scroll n'est plus une position mais une force. Descendre attire la matière vers un noyau, remonter la repousse, s'arrêter laisse le champ se détendre lentement.
ScrollVitesse et signe du scroll → polarité et amplitude du champ ; la position ne sert qu'à déplacer le noyau.
Vu135 nœuds qui se resserrent ou explosent selon le geste, et un anneau qui pulse avec la vitesse.
TechTicker GSAP + ressort simple, vitesse fournie par Lenis.
CoûtMoyen — surveiller le coût par frame et le nombre de nœuds.
PortfolioMoyen : superbe en page d'accueil, à réserver au desktop.
Ω · 03
Prototypé
Corridor
La page ne défile pas : la caméra avance. Les plans viennent du fond, grossissent, passent derrière l'observateur et disparaissent.
ScrollProgression → position Z de la caméra ; chaque plan garde sa profondeur propre.
VuUne traversée : des plaques de contenu qui défilent de part et d'autre du regard, avec un léger roulis.
TechCSS 3D (perspective + translateZ), ScrollTrigger épinglé.
CoûtFaible à moyen — attention au nombre de plans composités.
PortfolioFort : introduction de portfolio, ou traversée d'un projet.
Ω · 04
Prototypé
Démontage
Aucune section n'apparaît : la précédente est démontée. Lettres dispersées, lignes détachées, plaques envoyées vers leurs points de fuite — la suivante se réassemble depuis ces trajectoires.
ScrollProgression → avancement du démontage puis de la reconstruction, les deux se chevauchant.
VuUn titre qui explose caractère par caractère pendant que le titre suivant se recompose.
TechDécoupe de caractères maison + timeline scrubbée, vecteurs déclarés en HTML.
CoûtMoyen — il faut choisir les vecteurs à la main pour éviter le bruit.
PortfolioFort : transition entre deux chapitres d'un même projet.
Ω · 05
Prototypé
Quadrants contrariés
Une seule section, quatre lois de mouvement. Deux zones suivent le scroll à des vitesses différentes, une le contredit, la dernière le traduit en échelle et rotation.
ScrollUne même progression, quatre coefficients — dont un négatif.
VuQuatre fenêtres dont les contenus glissent dans des sens différents autour d'un centre immobile.
TechScrollTrigger scrubbé par zone, overflow hidden.
CoûtFaible — le plus simple des six.
PortfolioTrès fort : grille de projets à quatre entrées.
Ω · 06
Prototypé
Morphogenèse
Une surface unique change de forme au fil du scroll : rectangle, hexagone, cercle, plaque. Le contenu se révèle pendant la transformation.
ScrollProgression → curseur dans une séquence de formes, interpolation continue entre deux voisines.
VuUne forme qui se déforme sans à-coup, un mot par état, une valeur d'interpolation.
TechÉchantillonnage angulaire des formes (48 points) + clip-path recalculé par frame.
CoûtMoyen — la partie mathématique est écrite une fois pour toutes.
PortfolioFort : révélation d'une image de couverture.
Ω · 07
Prototypé
Entrelacs
Trois brins de contenu se tressent : chacun passe devant les autres puis repasse derrière, sans qu'aucune règle de superposition ne soit écrite à la main.
ScrollProgression → angle de phase ; le sinus donne la position latérale, le cosinus la profondeur.
VuTrois colonnes qui se croisent, celle du fond floue et rétrécie, l'ordre changeant à chaque demi-tour.
TechTrigonométrie par frame + z-index, flou et échelle dérivés du même cosinus.
CoûtFaible — une seule formule, aucun état à conserver.
PortfolioFort : trois références mises en avant sur une page d'accueil.
Ω · 08
Prototypé
Repli
Le scroll est replié en onde triangulaire : passé la moitié de la section, continuer à descendre rejoue la scène à l'envers. La page avance, le contenu recule.
ScrollProgression → onde triangulaire ; le signe de la pente change le sol et le sens des entrées.
VuQuatre états qui se succèdent, puis les mêmes en marche arrière sur fond indigo avec un reflet inversé.
TechUne conversion de progression, une timeline scrubbée, aucune duplication de contenu.
CoûtFaible — le risque est la lisibilité, pas la performance.
PortfolioMoyen : conclusion d'un chapitre, ou page manifeste.
Ω · 09
Prototypé
Focale verticale
Rien ne défile. Le document entier tient dans l'écran et le scroll ne déplace que le point de lecture : la bande visée s'ouvre, les autres se compriment en filets.
ScrollProgression → position de la focale ; la hauteur de chaque bande est une gaussienne de sa distance à ce point.
VuSept bandes empilées dont une seule est ouverte et lisible, les voisines à demi ouvertes.
TechHauteurs normalisées sur la somme des poids, jamais mesurées sur le rendu — pas de rétroaction.
CoûtFaible à moyen — attention au reflow, les hauteurs seules changent.
PortfolioTrès fort : sommaire, index de projets, ou page de services.
Ω · 10
Fiche
Mémoire inverse
Le scroll charge une valeur qui se décharge dès qu'on s'arrête. Rester immobile rembobine la scène : pour maintenir un état, il faut continuer à scroller.
ScrollIntégration de la vitesse avec fuite : la progression n'est plus liée à la position de la page.
VuUne scène qui avance tant qu'on pousse et revient doucement en arrière dès qu'on lâche.
TechVitesse Lenis + intégrateur à décroissance, rendu par ticker.
CoûtMoyen — risque de désorientation, exige un indicateur clair.
PortfolioMoyen : une seule scène manifeste, pas une page entière.
Ω · 11
Fiche
Gravité réglable
Les blocs de contenu sont soumis à une gravité dont le scroll règle l'intensité et la direction : ils tombent, s'empilent, rebondissent, puis se remettent en orbite quand la gravité s'annule.
ScrollProgression → vecteur de gravité (intensité et angle).
VuDes cartes qui s'empilent au bas de l'écran puis remontent en flottant.
TechIntégration Verlet maison (une vingtaine de corps), collisions AABB simplifiées.
CoûtÉlevé — stabilité de la simulation et reprise après retour arrière.
PortfolioMoyen : page « à propos » ludique.
Ω · 12
Fiche
Sédiments
Chaque section traversée laisse une strate empilée en bas de l'écran : une coupe géologique de la lecture. Remonter creuse les strates et rouvre la section correspondante.
ScrollSens du scroll → dépôt ou érosion ; hauteur cumulée des strates = position dans le document.
VuUne barre stratifiée qui grandit, chaque strate portant le titre de sa section.
TechScrollTrigger par section + rendu de la pile en DOM.
CoûtFaible à moyen.
PortfolioTrès fort : remplace la barre de progression par un objet mémorable.
Ω · 13
Fiche
Fréquence
Le scroll est traité comme une fréquence d'échantillonnage. Au-delà d'un seuil de vitesse la typographie se dédouble et se déchire ; en dessous elle se stabilise. Lire vite abîme l'image.
ScrollVitesse → seuil de déformation ; l'arrêt restaure la netteté.
VuUn titre qui se dédouble en fantômes colorés quand on accélère.
TechShader GLSL sur un rendu de texte, ou empilement de couches CSS décalées.
CoûtÉlevé en GLSL, moyen en CSS.
PortfolioMoyen : accroche de page d'accueil.
Ω · 14
Fiche
Scroll désynchronisé
Deux colonnes, deux temporalités : l'une suit le scroll, l'autre le rattrape avec retard élastique. Le texte et l'image ne coïncident qu'à l'arrêt — le sens se forme quand on s'immobilise.
ScrollUne colonne en position directe, l'autre en ressort amorti sur la même valeur.
VuUne image qui court derrière son texte puis le rejoint exactement.
TechDeux interpolations, une seule source de scroll.
CoûtFaible.
PortfolioTrès fort : page projet éditoriale, très adaptable.
Ω · 15
Fiche
Plan de netteté
Le scroll ne déplace pas la page mais le plan de mise au point dans une pile d'images superposées. On scrolle dans la profondeur de champ.
ScrollProgression → position du plan net ; le flou de chaque couche dépend de sa distance à ce plan.
VuUne pile d'images où une seule est nette à la fois, les autres respirant autour.
Techfilter: blur() par couche, ou passe GLSL pour un rendu propre.
CoûtMoyen — le flou CSS coûte cher, à limiter en nombre de couches.
PortfolioFort : galerie photo ou séquence de références.