scroll-experiences
Installation
SKILL.md
Experiências dirigidas por scroll
As outras skills cobrem as peças: gsap-scrolltrigger a API, threejs-* a cena, motion-web o scroll-driven CSS. Esta cobre a composição — que é onde essas experiências quebram.
Decida a categoria primeiro
Cada uma tem arquitetura diferente. Escolher errado significa reescrever.
| Categoria | O que é | Custo |
|---|---|---|
| Reveal no scroll | Elementos aparecem ao entrar no viewport | Trivial. CSS ou IntersectionObserver |
| Parallax | Camadas em velocidades diferentes | Baixo. CSS scroll-driven resolve |
| Seção pinada | A seção trava e o conteúdo interno avança com o scroll | Médio. ScrollTrigger com pin |
| Cena de fundo persistente | Canvas ou WebGL fixo atrás, conteúdo rolando por cima | Alto. É o que a maioria quer ao dizer "coisas acontecendo no fundo" |
| Scrollytelling | A narrativa é a cena; o texto legenda | Muito alto. Projeto próprio |
Antes de subir de categoria, pergunte se o efeito não sai na de baixo. A maioria dos pedidos de "cena 3D de fundo" fica melhor resolvida com parallax em CSS mais um gradiente animado — sem 3MB de bundle e sem a bateria do celular.