Guia definitivo — Site Next.js com foco em Motion e Scroll

Sites de alto padrão em motion (estilo Awwwards) usam 3 camadas complementares — não uma biblioteca só:

Opcional: Three.js / React Three Fiber apenas se houver cena 3D.

Excluídas por redundância: Website Builder Setup (duplica o UI/UX Pro Max), Taste Skill (sobrepõe Impeccable + Design Motion Principles), Claude Design Skillstack (só se entrar 3D).

3.1 Criar o projeto Next.js

Se a pasta do projeto está vazia (ou só tem .claude\), crie o app dentro dela — o ponto final é essencial para as skills e o projeto ficarem na mesma pasta:

cd C:\caminho\da\sua\pasta
npx create-next-app@latest .

Respostas recomendadas no instalador:

Se o projeto Next.js já existe: pule direto para 3.2.

3.2 Instalar as bibliotecas de motion

npm install gsap lenis motion

As skills ensinam o Claude a usar essas bibliotecas, mas não as instalam — quem instala é você.

3.3 Conferir

npm run dev

Abra http://localhost:3000 — deve aparecer a página padrão do Next.js. A pasta deve conter, lado a lado:

seu-projeto\
├── .claude\skills\      ← skills instaladas
├── app\                 ← páginas do Next.js
├── node_modules\
├── package.json         ← com gsap, lenis e motion listados
└── ...

A CLI skills instala no projeto por padrão (o global é que exige -g — nunca use). Rode tudo de dentro da pasta do projeto:

cd C:\caminho\do\seu\projeto

npx skills add greensock/gsap-skills --copy -a claude-code -y
npx skills add LottieFiles/motion-design-skill --copy -a claude-code -y
npx skills add kylezantos/design-motion-principles --copy -a claude-code -y
npx skills add emilkowalski/skills --copy -a claude-code -y
npx skills add vercel-labs/agent-skills --copy -a claude-code -y
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --copy -a claude-code -y

npx impeccable install   # instalador próprio: escolha Claude Code no prompt

Flags:

• (sem -g) → escopo de projeto: instala em .claude\skills\ da pasta atual
• --copy → copia em vez de symlink (no Windows, symlink pode exigir Developer Mode; cópia é commitável no git)
• -a claude-code → só para o Claude Code, sem espalhar para outros agentes
• -y → sem perguntas interativas

Gestão depois: npx skills list · npx skills update · npx skills remove [nome]

Etapa 1 — Fundação de design → Impeccable

Antes de invocar a skill, escreva o briefing. Salve como BRIEFING.md na raiz do projeto, contendo:

• Básico: o que é o site, objetivo, público-alvo (e em que dispositivo chega), marca/tom de voz, seções e conteúdo
• Específico de motion: personalidade do movimento (elegante e contido? cinematográfico? brincalhão?), 3–5 referências visuais concretas com o que exatamente agrada em cada uma, e anti-referências (o que NÃO quer)

Depois invoque:

/impeccable init

Use o arquivo BRIEFING.md como base para todas as respostas da entrevista.
Se algo não estiver coberto no briefing, aí sim me pergunte.

Isso gera PRODUCT.md e DESIGN.md — que todas as skills seguintes respeitam. Quanto mais decisão você toma no briefing, menos decisão a IA toma sozinha no código.

Etapa 2 — Design system e telas base → UI UX Pro Max

Build a landing page for [nicho, objetivo, seções] using Next.js App Router

⚠️ Peça tudo estático nesta etapa — sem animações ainda. A react-best-practices (Vercel) já atua automaticamente garantindo componentes performáticos.

Etapa 3 — Fundação de scroll (OBRIGATÓRIA — sem ela nada anima)

Esta etapa faltava na primeira versão do fluxo e é a causa nº 1 de "segui tudo e nada animou". As 4 causas clássicas de falha em Next.js:

1. Componentes sem 'use client' — animação não executa em Server Component
2. gsap.registerPlugin(ScrollTrigger) ausente — nada dispara, sem erro visível
3. Lenis e ScrollTrigger não sincronizados — triggers disparam errado ou nunca
4. Falta do hook useGSAP — animações quebram na navegação entre páginas

Prompt de fundação (cole no Claude Code):

Fix and set up the scroll animation foundation for this Next.js App Router project:
1. Create a client component "SmoothScrollProvider" that initializes Lenis in the root layout
2. Sync Lenis with GSAP ScrollTrigger properly: lenis.on('scroll', ScrollTrigger.update)
   and drive Lenis from gsap.ticker with lagSmoothing disabled
3. Register ScrollTrigger once in a shared gsap setup file
4. Install and use the @gsap/react useGSAP hook for all animation components
5. Verify every animation component has 'use client'
Then add a simple test: fade-in the first section heading on scroll, so I can confirm it works.

Teste antes de continuar: o título deve fazer fade-in e a rolagem deve estar suave com inércia. Só avance quando funcionar — todas as animações dependem desta base.

Etapa 4 — Onde animar → Skills for Design Engineers

find animation opportunities in this codebase

Devolve onde motion agrega e o que deve ficar estático — antídoto contra animar tudo.

Etapa 5 — Coreografia → Motion Design Skill (LottieFiles)

Choreograph the entrance sequence for the hero section
Choreograph the scroll journey through the [features] section

Define timing, easing e ordem — sem código ainda. Peça para salvar num MOTION.md.

Etapa 6 — Implementação (ver catálogo completo na seção 6)

• Scroll → GSAP Skills (pinning, scrubbing, reveals, parallax…)
• Micro-interações → Motion.dev Animations + Design Motion Principles (hover, modais, magnetic button, transições de página)

Regra: uma animação por vez, teste no navegador, commit.

Etapa 7 — Auditoria (três passadas, nesta ordem)

improve the animations in this codebase          ← Emil Kowalski (8 categorias)
Audit the motion design in this codebase          ← Design Motion Principles (anti-slop, relatório HTML)
/impeccable critique                              ← Impeccable
/impeccable polish

Etapa 8 — Acessibilidade e performance → Vercel Agent Skills

Review my UI and check accessibility
Review this codebase for React performance issues

Confere prefers-reduced-motion (obrigatório num site cheio de animação) e as 40+ regras de performance.

Etapa 9 — Guarda contínua

npx impeccable detect

Rode antes de cada entrega (ou no CI): falha se anti-padrões de design voltarem.

Pré-requisito: Etapa 3 (fundação) funcionando. Implemente na ordem abaixo — das fáceis às avançadas.

Nível 1 — Fáceis

Smooth scroll (Lenis) — já pronto pela fundação da Etapa 3.

Scroll-triggered reveal (fade/slide/zoom):

Add scroll-triggered reveal animations to all sections: elements fade up and in when entering
the viewport, with a subtle stagger between children. Use ScrollTrigger with toggleActions,
respect prefers-reduced-motion.

Scroll progress (barra de leitura):

Add a thin scroll progress bar fixed at the top of the page that fills proportionally
to page scroll, using ScrollTrigger with scrub.

Marquee infinito:

Create an infinite marquee of [logos/texto] that scrolls continuously and reacts to scroll:
it speeds up and reverses direction based on scroll velocity.

Nível 2 — Scroll-linked (scroll como timeline)

Scrubbing:

Create a scroll-linked animation for [seção]: the timeline progress maps 1:1 to scroll
position using ScrollTrigger scrub: true. At 50% scroll the animation is at 50%.

Parallax:

Add parallax depth to the hero: background, midground and foreground layers move at
different speeds on scroll using ScrollTrigger scrub with different y distances per layer.

Zoom on scroll:

Make the [imagem/cena] scale from 1 to 1.4 linked to scroll position with
ScrollTrigger scrub, centered transform-origin.

Velocity/skew:

Add a velocity-based skew effect: images skew slightly based on scroll speed
(ScrollTrigger getVelocity), easing back to 0 when scrolling stops.

Nível 3 — Estruturais

Pinning (sticky sections):

Pin the [seção] to the viewport while its inner content animates through 3 steps as the
user scrolls, then release. Use ScrollTrigger pin: true with a scrubbed timeline —
make sure pinning works with Lenis.

Horizontal scroll:

Create a horizontally scrolling section: vertical scroll moves a row of [cards/painéis]
horizontally. Pin the section, translate x with scrub, and set the scroll distance to
match the content width.

Text reveal (split text):

Animate the [headline] with SplitText: reveal line by line with a masked slide-up as it
enters the viewport. Split paragraph text word by word with a scrubbed opacity stagger.

(O SplitText hoje é gratuito no GSAP.)

Nível 4 — Avançadas (deixe por último)

Image sequence / canvas scrub (estilo Apple): primeiro exporte o vídeo como sequência de imagens (ex.: 120 frames JPG em public/sequence/). Depois:

Create an Apple-style canvas image sequence: preload the frames from /public/sequence/,
draw them to a canvas, and scrub through the frames with ScrollTrigger linked to a
pinned section.

Scrollytelling (composição de pinning + scrubbing + text reveal):

Build a scrollytelling section with 4 steps: the visual stays pinned while scroll advances
a master timeline; at each step the text block swaps and the [gráfico/cena] updates.
Use one scrubbed ScrollTrigger timeline with labels per step.

⚠️ Scroll snap — conflito com Lenis

O scroll-snap-type nativo do CSS não funciona junto com Lenis — brigam pelo controle da rolagem. Use o módulo oficial de snap do Lenis:

Add section snapping using the official Lenis Snap module (lenis/snap), so scrolling
settles on each section — do NOT use CSS scroll-snap-type, it conflicts with Lenis.

Se uma animação "não acontecer":

This scroll animation isn't firing — check for missing 'use client', ScrollTrigger
registration, Lenis sync, and markers. Add ScrollTrigger markers temporarily to debug.

Os markers: true mostram na tela onde os gatilhos estão — é assim que se depura ScrollTrigger.

Regras de ouro:

1. Uma animação por vez → teste no navegador → commit. Pedir tudo de uma vez torna erros impossíveis de isolar.
2. Nunca pule a Etapa 3 (fundação) — é a causa nº 1 de "nada anima".
3. Depois de cada bloco de animações, rode improve the animations in this codebase.
4. Briefing rico = resultado sem "cara de IA". Decisão no papel > decisão da IA no código.
5. prefers-reduced-motion não é opcional — as skills tratam disso, mas confira na auditoria final.
6. Animação linda que trava o scroll não ganha prêmio: performance é parte do motion.

• Smooth Scrolling in Next.js with Lenis & GSAP (2026)
• Best JavaScript Scroll Animation & Scrollytelling Libraries 2026
• GSAP vs Framer Motion
• Catálogo de skills: index-skills-02.html (Hub de Skills)