Motion Dev Animations skill

O que ela faz

A skill ensina o Claude a criar animações com o Motion, a biblioteca que sucedeu o Framer Motion, em projetos React, Next.js, Svelte e Astro. Ela escolhe o padrão pelo que vai mexer: entrada na tela, hover, toque e arrastar, efeito na rolagem ou troca de layout.

Cada padrão vem com tempos e física prontos, como entrada de 0,6 a 0,8 segundo, intervalo de 0,1 a 0,2 entre itens e mola com rigidez entre 300 e 400. Ela traz exemplos de topo que sobe com fade, card que levanta no hover, botão magnético e parallax.

O trabalho segue quatro passos: entender o pedido, planejar, implementar e verificar. Anima só transform e opacidade pra não pesar, respeita quem desligou animação no sistema e mira 60 quadros por segundo sem a página pular. Pra transição só em CSS, Vue ou SVG complexo, indica outro caminho.

Nas palavras de quem fez

Quando usar

• Pôr animação de entrada no topo da landing page
• Revelar as seções conforme a pessoa rola a página
• Dar resposta de hover e clique em cards e botões
• Fazer parallax ou barra de progresso de leitura
• Animar a troca de abas e a reordenação de listas

Depois de instalar, é só pedir assim

• Anima o topo dessa landing page em Next.js com o título e os botões subindo em sequência
• Faz as seções aparecerem conforme eu rolo, uma vez só, sem pesar no celular
• Põe um efeito de hover nos cards de preço e respeita quem desligou animação

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas