Motion design para sites em 2026: o guia completo com Claude Code (GSAP, Motion, Rive e performance)

Motion bom em 2026 não chama atenção para si. Ele conduz leitura, explica mudança de estado e dá ritmo ao scroll sem travar o navegador.

O problema agora não é falta de biblioteca. É excesso de opção sem critério. Tem CSS scroll-driven para base, GSAP para scroll com pinning, Motion para micro-interações em React, Lenis para smooth scroll, Rive para interação com estados e Lottie para loops simples. Sem uma regra de decisão, o projeto acumula scripts, quebra acessibilidade e perde fluidez.

Este guia organiza esse mapa. Você sai com tabela de decisão por trabalho, regra prática entre CSS e GSAP, setup com Claude Code que gera código revisável, leitura de cases premiados e limites de performance e acessibilidade que decidem o que fica no ar.

Motion virou camada funcional da interface em 2026. Ele indica hierarquia, confirma ação e mantém contexto durante a transição, em vez de servir como enfeite.

Essa mudança aparece no discurso da comunidade. Em 31/ago/2026, um quiz no Hacker News propôs adivinhar modelos de IA apenas pelo web design. No mesmo dia, outra thread revisitava estilos associados a 1993. O ponto central não era nostalgia. Era leitura de padrões. Quando todo site usa o mesmo hero genérico com o mesmo fade genérico, o visitante percebe repetição antes de perceber intenção.

Os sites premiados responderam com direção oposta. Em vez de mais animação, eles aplicaram animação com motivo. Scroll que revela por camadas, física simples que responde ao cursor, ASCII que vira textura, cards que reagem ao hover com propósito. O movimento serve à leitura, não compete com ela.

De efeito especial a sistema de orientação

A diferença entre motion decorativo e motion funcional está na pergunta que ele responde. Motion funcional responde onde estou, o que mudou e para onde vou. Scroll com scrub mostra progresso. Transição de saída explica que um elemento saiu de cena. Pinning segura contexto enquanto o conteúdo avança. Micro-interação confirma que o clique funcionou.

Quando o motion não responde a essas perguntas, ele vira custo. Custo de JS, custo de manutenção e custo cognitivo para quem lê.

O que este guia cobre e o que fica para os satélites

Este pilar entrega o mapa e a regra de decisão. Os guias satélites aprofundam cada fluxo com código, prompts e auditoria. A lógica é simples. Decida aqui, execute no satélite, audite antes de publicar.

Cada biblioteca vence em um trabalho principal. A escolha certa reduz bundle, simplifica manutenção e deixa o prompt para o Claude Code mais direto.

A tabela abaixo resume lib, trabalho, peso ou custo conhecido e quando usar. Os números trazem fonte e data. O restante é qualitativo para evitar chute.

GSAP para scroll cinematográfico

GSAP segue como referência para scroll com narrativa porque separa timeline, trigger e sincronia com clareza. A mudança relevante de contexto é comercial e prática. Após a compra da GreenSock pela Webflow em out/2024, a distribuição passou a 100% gratuita desde 30/abr/2025. A versão é a v3.15.0, com média de 4,6M de downloads por semana no npm e presença em mais de 11M de sites, segundo gsap.com, npm, noqode.fr de 13/mai/2026 e artofstyleframe de 25/mai/2026.

Na prática, isso tira o atrito de licença da decisão. O critério passa a ser técnico. Se há pin, scrub, parallax por camadas ou sincronia entre scroll e timeline, GSAP com ScrollTrigger é o caminho direto. O Claude Code escreve esse código bem quando recebe estrutura de seções, nomes de pin e comportamento esperado em mobile.

Motion para micro-interações em React

Motion resolve o trabalho que GSAP não deveria fazer em app React. Layout animado, transição de saída e gestures pertencem ao ciclo do componente. A geração v13 marca a fase após Framer Motion, com import a partir de motion/react e média de 42M de downloads por semana no npm. Os recursos centrais como layout, AnimatePresence e animateView são gratuitos, além do Motion UI de jul/2026, segundo motion.dev e npm. Há ainda MCP de busca com nome search-motion-codex e parceria com Cursor citada na documentação do ecossistema.

O ganho aparece em telas com lista, filtro, modal e navegação. AnimatePresence explica saída, layout explica reorderação, gestures explicam resposta ao toque e ao cursor. Peça ao Claude Code componentes pequenos com estados claros de entrada, saída e hover, em vez de um arquivo gigante de animação.

micro-interações com Motion

Rive e Lottie para vetores interativos

Rive e Lottie não competem pelo mesmo trabalho. Rive cuida de interação com estados. Lottie cuida de reprodução simples. A distinção por state machine explica a adoção em produtos com interação contínua, como Spotify Wrapped e Duolingo, com base citada de 2B de usuários, segundo youngju.dev, snigdha e wikivibe de 12/jun/2026. Para loops simples, dotLottie segue relevante porque reduz faixa de 60 a 90% ante JSON, segundo as mesmas referências.

O caso Razorpay Sprint26 mostra o teto do Rive em marketing. A página combinou mais de 100 triggers Rive com Three.js e recebeu destaque em 31/ago/2026 no Awwwards. O ponto não é repetir a escala. É notar o padrão. Triggers espalhados pela página transformam scroll em painel interativo, em vez de vitrine estática.

Rive vs Lottie com Claude Code

Use CSS para a base e GSAP para sincronia. Essa frase resume a regra 80/20 que organiza o scroll em 2026.

CSS scroll-driven cobre reveal, fade por progresso e parallax simples com suporte aproximado de 87% no desktop e 71% no mobile em meados de 2026, sem pinning, segundo artofstyleframe de 25/mai/2026. A regra 80/20 citada na mesma análise diz que a maior parte do scroll pode ficar em CSS, enquanto GSAP entra nos casos com pinning, scrub fino e coordenação entre camadas.

Essa divisão ajuda o prompt. Pedir tudo em GSAP gera JS onde CSS resolveria. Pedir tudo em CSS gera gambiarra onde GSAP resolveria com timeline e pin.

A regra 80/20 na prática

Comece cada seção com três perguntas. Há pin que segura conteúdo enquanto o resto avança. Há scrub que amarra progresso do scroll a uma timeline. Há parallax com velocidades distintas que precisa de sincronia por pixel. Se a resposta for não para as três, fique em CSS. Se houver sim para ao menos uma, planeje GSAP com ScrollTrigger.

Essa triagem reduz retrabalho com Claude Code. O modelo não precisa adivinhar arquitetura. Você informa quais seções são CSS e quais são GSAP, com nomes de containers e comportamento em mobile.

Sincronia entre Lenis e ScrollTrigger

Lenis cuida da sensação do scroll. ScrollTrigger cuida da narrativa ligada ao scroll. A ponte entre eles é curta e conhecida. O padrão lenis.on(scroll, ScrollTrigger.update) mantém as posições sincronizadas, segundo youngju.dev de 16/mai/2026, adamarant de 28/mai/2026 e snigdha de 18/jun/2026. Sem essa ponte, animações disparam fora de hora e pin calcula posição errada.

ScrollSmoother resolve o mesmo tema por outro caminho. Ele é nativo do ecossistema GSAP, com parallax por atributos como data-speed e data-lag, segundo gsap.com/docs e annnimate. Lenis trabalha no nível de window sem exigir wrapper. A escolha passa por stack e controle. Para páginas com GSAP dominante e parallax declarativo, ScrollSmoother simplifica. Para smooth scroll agnóstico com integração pontual, Lenis pesa cerca de 3KB e cumpre o trabalho.

scroll cinematográfico com GSAP e Lenis

Skills definem padrão, MCPs trazem docs e auditoria, prompts mantêm revisão. Esse trio separa decisão de execução e evita código que ninguém consegue manter.

O ponto de partida mais direto é o repositório iart-ai/web-animation-skills no GitHub. Ele reúne 9 skills com foco em web animation: gsap-web, 60fps-animation, page-transition-animation, accessible-animation, micro-interaction, glassmorphism, svg-animation, lottie-animation e ascii-animation. A instalação usa npx skills add ou o marketplace (repo iart-ai). O repositório traz exemplos de prompts para hero com GSAP, padrão 60fps, transição de página, variação acessível, micro-interação, SVG, Lottie e ASCII.

Esse conjunto funciona porque cada skill carrega um padrão. A skill de GSAP puxa timeline e ScrollTrigger. A skill de 60fps puxa transform e opacity. A skill acessível puxa preferência de movimento reduzido. O Claude Code deixa de improvisar e passa a seguir um guia.

MCPs, toolkit e skill de React que completam o fluxo

Para docs vivas de GSAP, há MCPs dedicados. O pacote com escopo @vinhnguyen/gsap-mcp e a implementação bl00dclot com 18 tools aparecem no npm como pontes entre o modelo e a documentação. Use para conferir API de ScrollTrigger e ScrollSmoother antes de gerar timeline complexa.

O toolkit associado a wilwaldon organiza o restante do fluxo. Ele combina frontend-design oficial da Anthropic, coleção freshtechbro com 23 skills, skill jezweb para Motion, Playwright MCP para auditoria no navegador, Chrome DevTools MCP para performance, Context7 para docs e Figma MCP para handoff de layout. Cada peça tem função. Design define padrão, Motion define interação em React, Playwright e Chrome DevTools verificam, Context7 atualiza docs, Figma preserva intenção visual.

Em React, some a skill gsap-react com padrão useGSAP citada no skillsplayground. Ela orienta o hook correto para montar e limpar timelines dentro do ciclo do componente, o que evita vazamento de listeners no scroll.

Fluxo de revisão antes de publicar

Um fluxo simples funciona em quase todo projeto. Primeiro, defina no prompt quais seções são CSS e quais são GSAP, com nomes de IDs e comportamento mobile. Depois, peça arquivos separados por responsabilidade, com tokens de easing e duração centralizados. Por fim, rode auditoria no navegador com Playwright MCP e cheque timeline, CLS e resposta a prefers-reduced-motion.

Esse fechamento importa porque motion quebra em detalhe. Pin sem espaço reserva desloca layout. Scroll sem sincronia dispara cedo. Transição sem saída confunde. Auditoria pega esses erros antes do visitante.

Os SOTDs do período premiam direção clara, não volume de efeitos. Cada case abaixo usa stack distinta para um motivo legível.

Oryzo AI, SOTD de 13/abr/2026 pelo estúdio Lusion, combina GSAP com Three.js para transformar produto de IA em narrativa por camadas. O scroll conduz, o 3D ilustra, o texto ancora. Waabi, com design da Antinomy em React com Motion e Next.js, mostra o outro extremo. Micro-interações precisas em interface técnica, sem pesar a leitura. Studio K95, com GSAP, Three e Nuxt, usa a mesma lógica em portifólio. Entrada por camadas, scroll com ritmo, tipografia que responde.

Made With GSAP, também SOTD, funciona como catálogo vivo do que a lib faz bem. Cards com hover, hero com drag e explosão de texto mostram física e resposta ao cursor sem depender de vídeo. Aino.agency, SOTD com ASCII e física em vanilla e página total de 30kb de JS, prova que restrição gera identidade. Pouco JS, muita direção. Oimachi, SOTD de 21/ago/2026, e Magnetism, SOTD de 20/ago/2026, ambos com GSAP, fecham o arco com scroll editorial e camadas que respeitam leitura.

Codrops Telescope, de out/2025, com ScrollSmoother e ScrollTrigger, antecipa a regra atual. Scroll suave com wrapper nativo, triggers por seção e parallax declarativo. É o exemplo para estudar quando a dúvida for entre Lenis e ScrollSmoother.

Padrões que se repetem nos vencedores

Três padrões aparecem em quase todos. Primeiro, scroll com hierarquia. Uma ideia por viewport, com reveal que respeita ordem de leitura. Segundo, resposta imediata ao gesto. Hover, drag e cursor com feedback direto, sem atraso. Terceiro, textura com pouco custo. ASCII, ruído sutil e física simples criam assinatura sem vídeo pesado.

Nenhum desses padrões exige stack exótica. Exige decisão sobre o que anima, quando anima e por que anima.

Motion que trava scroll, desloca layout ou ignora preferência do usuário não deveria publicar. Performance e acessibilidade são critério de aceite, não polimento final.

A base de performance segue estável. Animar transform e opacity evita reflow, manter timelines curtas reduz jank, reservar espaço para pins evita deslocamento, e auditar com Playwright MCP e Chrome DevTools MCP revela regressão antes do deploy. Context7 ajuda a conferir API atual, Figma MCP preserva medidas do layout aprovado. Esse encadeamento transforma gosto em verificação.

Acessibilidade segue o mesmo rigor. Toda animação relevante precisa de equivalente sem movimento por prefers-reduced-motion, com alternativa estática legível e sem perda de conteúdo. Transições automáticas precisam de controle, foco visível não pode sumir durante animação, e conteúdo essencial não pode depender de hover. A skill accessible do conjunto iart-ai e a verificação no navegador cobrem esse checklist sem improviso.

motion performático 60fps e acessibilidade

Quando tirar motion em vez de otimizar

Algumas animações não merecem otimização. Merecem remoção. Intro longa que atrasa leitura, parallax que compete com texto, loop que distrai de formulário e transição que esconde feedback de ação entram nessa lista. O critério é direto. Se o motion atrasa tarefa, confunde estado ou consome atenção sem explicar nada, retire e meça leitura de novo.

GSAP ainda vale a pena agora que a distribuição é gratuita?

Vale para scroll com pinning, scrub e sincronia entre camadas. A distribuição é 100% gratuita desde 30/abr/2025, após a compra da GreenSock pela Webflow em out/2024. São v3.15.0, média de 4,6M de downloads por semana no npm e uso em mais de 11M de sites, segundo gsap.com, npm, noqode.fr de 13/mai/2026 e artofstyleframe de 25/mai/2026. Isso tira o custo de licença da conta. Para reveal simples, prefira CSS scroll-driven e reserve GSAP para o que exige timeline.

Motion substitui GSAP em projetos React?

Não como regra. Motion assume micro-interações, layout, gestures e AnimatePresence dentro do ciclo do componente. São import a partir de motion/react na geração v13, média de 42M de downloads por semana no npm e recursos centrais gratuitos, além de Motion UI de jul/2026, segundo motion.dev e npm. GSAP assume scroll com narrativa e pinning. Em muitos projetos React, os dois convivem com fronteira clara.

Rive ou Lottie para animação vetorial no site?

Rive para interação com estados e triggers, Lottie para loops simples. A base de state machine tem adoção em Spotify Wrapped e Duolingo, com base citada de 2B de usuários. Isso sustenta Rive para interação. Já o dotLottie com redução em faixa de 60 a 90% ante JSON sustenta Lottie para loops leves, segundo youngju.dev, snigdha e wikivibe de 12/jun/2026. O caso Razorpay Sprint26, com mais de 100 triggers Rive e Three.js e destaque em 31/ago/2026 no Awwwards, mostra o teto interativo do Rive.

Como pedir motion ao Claude Code sem gerar página pesada?

Separe decisão, geração e auditoria. Defina no prompt o que fica em CSS scroll-driven e o que vai para GSAP, Motion, Lenis, Rive ou Lottie. Use as 9 skills do conjunto iart-ai/web-animation-skills com instalação por npx skills add ou marketplace, apoie docs com MCPs como @vinhnguyen/gsap-mcp e bl00dclot com 18 tools, e audite com Playwright MCP e Chrome DevTools MCP, segundo GitHub iart-ai e npm. O toolkit com frontend-design oficial da Anthropic, freshtechbro com 23 skills, jezweb Motion, Context7 e Figma MCP organiza esse fluxo de ponta a ponta.

Motion em 2026 premia clareza. CSS scroll-driven resolve a base com suporte aproximado de 87% no desktop e 71% no mobile em meados de 2026, segundo artofstyleframe de 25/mai/2026. GSAP assume pin e scrub. Motion assume interação em React. Lenis assume smooth com cerca de 3KB e sincronia conhecida. Rive assume estados, Lottie assume loops com dotLottie mais leve. O setup com Claude Code amarra tudo com skills, MCPs e auditoria no navegador.

Use este pilar como hub. Quando precisar de scroll com narrativa, aprofunde o fluxo com GSAP e Lenis. Quando precisar de resposta em componente, aprofunde micro-interações com Motion. Quando precisar de vetor com lógica, aprofunde a escolha entre Rive e Lottie. Quando precisar publicar sem travar, aprofunde performance e acessibilidade. Decida aqui, execute no guia satélite e audite antes de publicar.

• GSAP site oficial (distribuição gratuita e plugins, 2026)
• Noqode sobre GSAP gratuito (Webflow, plugins livres e uso comercial, 13/mai/2026)
• Artofstyleframe sobre scroll e motion (licença, SplitText 3.13 e regra CSS-vs-GSAP 80/20, 25/mai/2026)
• Motion docs e Motion no npm (v13, motion/react, 42M downloads/semana)
• YoungJu Dev sobre animação web (panorama de libs, 16/mai/2026)
• Adamarant sobre Lenis e GSAP (stack enxuto e reduced-motion, 28/mai/2026)
• Snigdha sobre libs de animação (tabela React/Next.js com Lenis, Rive e dotLottie, 18/jun/2026)
• Wikivibe sobre Rive e Lottie (state machine, 2B usuários, 12/jun/2026)
• Awwwards, seleção de animação (cases Oryzo AI, Waabi, Studio K95, Made With GSAP, Oimachi, Magnetism)
• Awwwards, Razorpay Sprint26 (100+ triggers Rive com Three.js, destaque 31/ago/2026)
• Codrops, zoom em camadas com ScrollSmoother (recriação Telescope, out/2025)
• Annnimate sobre ScrollSmoother (data-speed, data-lag e decisão contra Lenis)
• iart-ai web-animation-skills no GitHub (9 skills, install e prompts exemplo)
• Toolkit frontend para Claude Code (frontend-design oficial, freshtechbro 23 skills, MCPs Playwright e DevTools)
• GSAP MCP de vinhnguyen no npm (intent analysis e setup React/Next.js)
• GSAP MCP bl00dclot no GitHub (18 tools estáticas, sem runtime)
• Skillsplayground sobre gsap-react (hook useGSAP com cleanup)
• Quiz: adivinhe a IA pelo web design e estilos web de 1993 (Hacker News, 31/ago/2026)