Frontend & UI
Cinematic Scroll Storytelling
Des recettes Lenis et GSAP ScrollTrigger pour des landing pages pilotées au scroll.
De quoi il s’agit
Du code fonctionnel pour un preloader, des révélations de texte découpé et masqué, des révélations de section, des scènes épinglées calées sur le scroll, des piles de cartes sticky et de la parallaxe, avec Lenis et GSAP ScrollTrigger.
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, foot
Pourquoi ça compte pour le design
- Des tokens de mouvement fixent durées, décalages, offsets et flou pour des révélations cohérentes.
- Chaque effet a une branche reduced-motion qui garde mise en page et contraste intacts.
- Un ordre de construction pose d’abord la page statique, puis le mouvement, évitant les scènes de scroll emmêlées.
Ce que ça couvre
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
Comment l’installer
Cinematic Scroll Storytelling
-
Clonez le dépôt.
git clone https://github.com/MengTo/Skills -
Pointez Codex sur le fichier du skill.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Installez gsap et lenis, puis branchez Lenis dans le ticker de GSAP.
-
Marquez les sections avec les attributs data pour les révélations, les piles et la parallaxe.
-
Ajoutez les scènes épinglées calées sur le scroll en dernier, puis déroulez la checklist QA.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.