Skill pra Claude Code e Codex · Design e frontend
A animation-expert é a skill que faz a sua IA animar interface com critério: define o papel de cada movimento, escolhe entre CSS, WAAPI, GSAP e ScrollTrigger pelo efeito e não por hábito, e entrega animação que funciona no celular, respeita quem prefere menos movimento e não trava a rolagem. Vem com uma galeria de 24 estudos executáveis pra ver antes de pedir.
Ou as 25 skills com 9 bônus no Pack de Skills por R$ 497.
O problema
Pedir animação pra IA costuma dar em duas coisas: tudo aparecendo com o mesmo fade, ou um efeito bonito no computador que quebra no celular e some quando você volta a rolar. Três sintomas, e o que muda com a skill.
| Sem a skill | Com a animation-expert |
|---|---|
| Todas as seções entram com o mesmo fade de baixo pra cima, na mesma duração, e a página inteira vira template genérico em câmera lenta. | Cada movimento tem papel: título entra por linha, imagem abre por máscara, lista escalona, com intensidades diferentes que levam o olho pela hierarquia. |
| O efeito roda uma vez e nunca mais, você volta pro topo e está tudo parado, ou o último botão da página nunca chega no estado final. | Ela separa animação disparada de animação atrelada ao scroll, recalcula o estado quando você volta e limita o fim pra que o último CTA sempre apareça. |
| No celular a página engasga, o conteúdo some se o script falha, e quem configurou o sistema pra reduzir movimento recebe tudo igual. | Conteúdo visível antes do JS, transform e opacity no lugar de propriedade cara, loop pausado fora da tela e a preferência de movimento reduzido respeitada. |
O que sai dela
Animação implementada na sua página, com o motivo de cada escolha e testada do jeito que o visitante usa.
papel, alvo, motor, gatilho, repetição e versão mobile de cada efeito
com o prefixo do componente e sem importar a galeria inteira pro projeto
duas descidas completas, parada no meio, direção invertida e tela redimensionada
sem loop de scroll próprio, sem medir layout a cada quadro e sem motor duplicado
Como funciona
Antes de animar, entende a página que já existe, a stack e a direção visual, e não transforma um ajuste pedido em redesign.
Papel, alvo, motor, gatilho, repetição, final legível, versão mobile e como limpar tudo ao sair, registrando só as decisões que importam.
CSS pra hover e loop simples, WAAPI pra sequência leve, GSAP com ScrollTrigger pra coordenação e scrub, e nada de biblioteca concorrente no mesmo componente.
O estado inicial só é aplicado depois que o motor carregou, então se o script falhar o conteúdo continua ali, legível.
Desce, volta ao topo e desce de novo, para no meio, inverte a direção, redimensiona, abre o FAQ e vai até o último botão.
Antes de comprar
As bibliotecas que a galeria usa vão junto, locais e com licença gratuita pra uso comercial.
O limite dela
O foco é animação de interface web: entrada, scroll, hover e microinteração. Vídeo, motion pra rede social e animação de personagem ficam fora dela.
Rive, Canvas e WebGL entram só quando DOM e SVG não resolvem, e ela explica o ganho visual antes de adotar uma superfície gráfica pesada.
Uma demonstração oficial ensina a técnica, só que não autoriza copiar foto, marca ou código de ninguém, e a skill separa inspiração de licença.
O que você recebe
O preço
Só a animation-expert
R$57pagamento único
Comprou avulsa e depois quis tudo? Me chama que eu abato o que você já pagou.
Pack de Skills
R$ 1.665R$497ou 10x no cartão
As 25 avulsas dão R$ 1.665. O pack se paga na nona skill.
02 · Design e frontend
Antes de você perguntar
Sem a skill, a IA costuma aplicar o mesmo efeito em tudo e testar só no computador. Com ela, cada movimento tem papel e contrato, o motor é escolhido pelo efeito, o conteúdo nunca depende do script pra aparecer e o teste inclui voltar a rolar, celular e movimento reduzido.
Funciona. Se o projeto já usa Motion, ela usa Motion; se não, escolhe entre CSS, WAAPI e GSAP. O que ela evita é instalar dois motores concorrentes no mesmo componente.
Não. O GSAP e o ScrollTrigger têm licença gratuita inclusive pra uso comercial, e as bibliotecas já vão locais dentro da skill.
Deixa quando é mal feita. A skill usa transform e opacity, pausa loop fora da tela, não mede layout a cada quadro e mantém a página útil antes de o script carregar. Pra velocidade do site inteiro, a page-speed-expert também está no catálogo.
Pode, a licença cobre o seu trabalho para terceiros. O que não vale é revender ou redistribuir a skill.
Pagamento único, garantia de 7 dias, 12 meses de atualização. Ou leve as 25 no pack.
