Frontend & UI
Cinematic Scroll Storytelling
Receitas de Lenis com GSAP ScrollTrigger para landing pages guiadas pelo scroll.
O que é
Código funcional para preloader, revelações de texto mascarado, revelações de seção, cenas fixadas atreladas ao scroll, pilhas sticky de cards e parallax, usando 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
Por que isso importa para design
- Tokens de movimento fixam durações, escalonamentos, deslocamentos e blur para as revelações ficarem consistentes.
- Todo efeito tem um ramo de reduced-motion que mantém layout e contraste intactos.
- Uma ordem de construção monta a página estática primeiro e o movimento depois, evitando cenas de scroll embaralhadas.
O que cobre
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
Como instalar
Cinematic Scroll Storytelling
-
Clone o repositório.
git clone https://github.com/MengTo/Skills -
Aponte o Codex para o arquivo da skill.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Instale gsap e lenis e depois ligue o Lenis ao ticker do GSAP.
-
Marque as seções com os data attributes para revelações, pilhas e parallax.
-
Adicione por último as cenas fixadas atreladas ao scroll e depois rode a checklist de QA.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.