Démo — recettes R1 à R10 · scroll-design-awwwards

WE MOVE WORDS & PIXELS AT SCROLL SPEED

Un one-pager construit avec les patterns mesurés sur 10 sites primés Awwwards : Lenis, pinning, reveals mot-à-mot, marquee, parallax.

Le scrolling n'est pas une navigation — c'est un rythme. Chaque section pose une question, le défilement y répond. Le design s'écrit comme une partition : le regard glisse, s'arrête, retient son souffle.

ScrollTrigger · scrub

Le pinning
raconte

01 — La section se fixe pendant que la page continue sous elle.
02 — Le contenu se transforme en douceur (scale, translate).
03 — Puis le pin se relâche, et le récit reprend.

Trois cartes,
zéro JavaScript

position: sticky · 260vh de course
01 / STICKY

La première se fixe

Chaque carte suivante pousse la précédente vers le haut. Effet de pile garanti avec trois lignes de CSS.

02 / CSS

La deuxième glisse dessus

top: calc(14vh + var(--i) * 4vh) — le décalage progressif crée l'empilement, comme sur TeraWulf.

03 / PUR

La troisième libère

Fin de course, la pile se dissout et le fond sombre cède la place à la lumière.

MOTION — RYTHME — SCROLL — CINÉMA —MOTION — RYTHME — SCROLL — CINÉMA —
PIN — REVEAL — PARALLAX — MARQUEE —PIN — REVEAL — PARALLAX — MARQUEE —
SCROLL
SCROLL

Du noir à la lumière — sans fondu, juste un cut.

Le contraste de luminance est la transition. Les sites primés n'adoucissent pas : ils tranchent, et le reveal reprend.