Frontend & UI
Cinematic Scroll Storytelling
Lenis plus GSAP ScrollTrigger recipes for scroll-driven landing pages.
What it is
Working code for a preloader, masked split-text reveals, section reveals, scrubbed pinned scenes, sticky card stacks, and parallax, using Lenis and 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
Why it matters for design
- Motion tokens fix durations, staggers, offsets, and blur so reveals stay consistent.
- Every effect has a reduced-motion branch that keeps layout and contrast intact.
- A build order stages static page first, then motion, avoiding tangled scroll scenes.
What it covers
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
How to install
Cinematic Scroll Storytelling
-
Clone the repo.
git clone https://github.com/MengTo/Skills -
Point Codex at the skill file.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Install gsap and lenis, then wire Lenis into the GSAP ticker.
-
Mark sections with the data attributes for reveals, stacks, and parallax.
-
Add scrubbed pinned scenes last, then run the QA checklist.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗More Codex design plugins
Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids. 
Design Systems What it does Stitch Design Taste Writes a DESIGN.md that steers Google Stitch toward non-generic screens. 
Frontend & UI What it does image-to-code Generates design images first, analyzes them, then builds matching frontend code. 
Frontend & UI What it does imagegen-frontend-mobile Generates premium mobile app screen flows as images, not code. Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.