fade / blur
ambient.effect=sway
L’acteur penche un peu
Boucle temporelle, pas liée au scroll. PNG alpha : on voit le pré à travers les ailes.
Catalogue vivant
Les calques
Les effets qu’on voit partout, bien faits, avec le moteur GAS. Chaque bandeau nomme le champ.
Config-driven
Pas de JS métier par page. Le même JSON alimente WordPress et Astro. Les trois recettes de cette session — Duo, Album, Éditorial — sont instanciées ici pour de vrai.
1 · Parallax multi-calques
Recette duo_depth · layer_count=4 · acteur PNG alpha
Quatre calques, un acteur
Fond lent · milieu · feuillage · acteur.
Quatre calques, un acteur
2 · Parallax de fond
scroll_motion.effect=parallax depth=back sur section.background_type=image
Le lac recule plus lentement que le texte. C’est un fond de section, pas un sticky deux colonnes.
3 · Rise + scale
Fond : scroll_motion.effect=scale · titre : effect=rise + text_motion=typewriter
Tilleuls
Le titre monte pendant que l’image s’agrandit
4 · Fade scrubbé
scroll_motion.effect=fade intensity=marked sur le texte d’overlay
L’overlay n’est pas une opacité fixe : le texte s’écrit avec le scroll.
5 · Pin de section
section.pin=viewport pin_height=1.8
Un écran et demi, collé. Le rayon reste. On lit, puis ça lâche.
6 · Reveal stagger
animation.type=blur stagger=true · hover lift
Landing classique
Trois cartes, un seul stagger
Fade, slide, zoom, blur, rotate sont sur d’autres blocs de cette page. Ici : blur en éventail.
slide
Tilleul
zoom
Prairie
7 · Ambient ≠ parallax
ambient.effect=float sur un calque avant (pollen). Le preset UI « Parallaxe interne » = drift, pas du scroll.
ambient.effect=pulse + hover glow
Le pot respire
Micro-vie sur un objet immobile. Distinct du count_up (entrée viewport).
ambient.effect=drift
Ceci n’est pas un parallax. C’est le preset « Parallaxe interne » : une dérive temporelle.
9 · Section horizontale
section.layout=horizontal horizontal_mobile=swipe
01
Rives
02
Colza
03
Tilleuls
04
Coteaux
scrolly_scene
clip_reveal from=left · text_reveal lines · parallax mid · marks
Clip reveal
Clip reveal
Le champ s’ouvre.
Clip reveal
Recette P0
pinned_album → sticky_story natif, ken=none
Recette pinned_album
Photos remplacées, pas fondues
sticky_story natif, ken=none, look=none. Deep-link : ancre -story-step-n.
Mai
Colza
Une image par étape. Le média reste épinglé à gauche.
Juin
Tilleul
La photo change. Le texte aussi. Pas de Ken Burns ici : c’est l’album.
Juillet
Prairie
Le troisième état. Toujours une image, jamais un texte seul.
Pot
Le verre
La dernière vue ferme l’album. Ce n’est plus le champ : c’est le miel.
Recette P0
editorial_sequence → image_text_split, stagger_target=parts
Recette editorial_sequence
Une image, puis les mots
image_text_split natif. Reveal one-shot, stagger_target=parts. Pas de GSAP, pas de scroll_motion.
On voit d’abord. Ensuite le surtitre, le titre, le corps, l’action.
Trois recettes, un moteur
Pas un labo : les mêmes blocs que le rucher.
3
recettes P0 instanciées
4
calques sur le duo
5
ambients distincts
1
JSON, deux rendus