Frontend e UI
Cinematic Scroll Storytelling
Ricette Lenis più GSAP ScrollTrigger per landing page guidate dallo scroll.
Che cos’è
Codice funzionante per preloader, reveal di split-text mascherato, reveal di sezione, scene fissate a scrub, stack di card sticky e parallasse, con Lenis e 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
Perché conta per il design
- I token di movimento fissano durate, sfalsamenti, offset e sfocatura così i reveal restano coerenti.
- Ogni effetto ha un ramo reduced-motion che tiene intatti layout e contrasto.
- Un ordine di build mette prima la pagina statica, poi il movimento, evitando scene di scroll ingarbugliate.
Cosa copre
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
Come installarlo
Cinematic Scroll Storytelling
-
Clona il repository.
git clone https://github.com/MengTo/Skills -
Punta Codex sul file della skill.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Installa gsap e lenis, poi collega Lenis al ticker di GSAP.
-
Marca le sezioni con i data attribute per reveal, stack e parallasse.
-
Aggiungi per ultime le scene fissate a scrub, poi esegui la checklist di QA.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.