/ Diretório / Playground / Motion.dev Animations Skill
← Todos os servidores ↗ GitHub
● Comunidade 199-biotechnologies ⚡ Instantâneo

Motion.dev Animations Skill

por 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill

Descreva o movimento que você deseja; obtenha o código Motion.dev que roda a 60fps + com física de primavera, suporte a movimento reduzido e sem mudança de layout.

motion-dev-animations-skill é uma habilidade do Claude Code que escreve animações de nível de produção com Motion.dev (anteriormente Framer Motion). Ele é ativado automaticamente com menções de animação, efeitos de rolagem, Motion.dev, física de primavera, etc., e emite código direcionado a 60fps +, impacto de pacote <50KB, acessibilidade total (prefere movimento reduzido) e zero CLS. Abrange animações de entrada, efeitos de rolagem, interações de gestos, microinterações e animações de layout.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

motion-dev-animations-skill.replay ▶ pronto
0/0

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

Casos de uso

Usos do mundo real: Motion.dev Animations Skill

Adicione uma entrada fade-up de herói com escalonamento

👤 Desenvolvedores de front-end ajustando páginas de destino ⏱ ~15 min beginner

Quando usar: Seu herói parece estático e você deseja uma animação de carregamento refinada.

Fluxo
  1. Descreva o efeito
    Adicione uma entrada gradual escalonada ao H1, subtítulo e CTA do herói. Escalonamento de 60ms.✓ Copiado
    → Código Motion.dev com motion.div, mola de transição, atraso via escalonamento
  2. Fallback de movimento reduzido
    Certifique-se de que o movimento reduzido prefere pular a animação de forma limpa.✓ Copiado
    → gancho useReducedMotion ou consulta de mídia CSS aplicada

Resultado: Um herói que se sente vivo sem sacrificar a acessibilidade.

Armadilhas
  • Animando propriedades que acionam o layout (largura, parte superior) — Em vez disso, use transformação (tradução/escala) — acelerada por GPU, sem CLS
Combine com: magic-ui-mcp

Crie revelações e paralaxe acionadas por rolagem

👤 Desenvolvedores de front-end com design avançado ⏱ ~25 min intermediate

Quando usar: Sua página de destino longa precisa de seções que se desdobram na rolagem.

Fluxo
  1. Revelar na rolagem
    Anime cada seção conforme ela entra na janela de visualização (uma vez, limite de 30%).✓ Copiado
    → useInView com uma vez + valor
  2. Primeiro plano paralaxe
    Adicione um deslocamento de paralaxe sutil para o SVG decorativo do primeiro plano.✓ Copiado
    → useScroll + useTransform mapeando scrollYProgress para y

Resultado: Experiência de rolagem que adiciona profundidade sem distração.

Armadilhas
  • Paralaxe que causa enjôo — Mantenha os deslocamentos pequenos e pule totalmente sob preferência de movimento reduzido

Crie um cartão magnético arrastável com suspensão flutuante

👤 Designers de interação/desenvolvedores frontend ⏱ ~20 min intermediate

Quando usar: O cartão do produto precisa de polimento de microinteração.

Fluxo
  1. Elevação flutuante
    Ao passar o mouse: levante 4px, escala de sombra sutil; volte de licença.✓ Copiado
    → whileHover com primavera; Transformações compatíveis com GPU
  2. Arrasto magnético
    Torne-o arrastável com limites elásticos, dragElastic 0,15.✓ Copiado
    → arrastar + arrastarRestrições + arrastarElastic definido corretamente

Resultado: Uma deliciosa interação com cartão sem custo de desempenho.

Animar reordenação de lista com layout

👤 Desenvolvedores de front-end criando painéis/galerias de tarefas ⏱ ~25 min intermediate

Quando usar: A reordenação da sua lista parece chocante; você deseja transições suaves.

Fluxo
  1. Habilitar layout em itens
    Adicione animações de layout aos itens da lista; animar entrada/saída também.✓ Copiado
    → <layout motion.li> + AnimatePresence
  2. Movimento reduzido
    Desative as animações de layout em preferência de movimento reduzido.✓ Copiado
    → Aplicado condicional; reordenação instantânea para usuários que solicitaram

Resultado: Reordenamentos que parecem físicos, mas respeitam as preferências do usuário.

Combinações

Combine com outros MCPs para 10× de alavancagem

motion-dev-animations-skill + magic-ui-mcp

Magic UI para componentes pré-construídos, motion.dev para bits personalizados

Use o letreiro do Magic UI para logotipos; motion.dev para uma paralaxe de rolagem personalizada abaixo.✓ Copiado
motion-dev-animations-skill + claude-design-auditor-skill

Movimento de auditoria para suporte de movimento reduzido

Depois de adicionar animações, audite com scope=motion para capturar regressões de movimento reduzido.✓ Copiado
motion-dev-animations-skill + claude-code-design-skills

Figma-to-code + animações em um fluxo

Converta o quadro Figma; em seguida, adicione as animações de foco e entrada especificadas.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
motion-dev (SKILL) describe the animation (element + intent + constraints) Sempre que você quiser código de animação, esp. com restrições de acessibilidade e desempenho 0

Custo e limites

O que custa rodar

Cota de API
Nenhum
Tokens por chamada
Pequeno para código; grande somente se você despejar componentes complexos
Monetário
Livre
Dica
Descreva bem a intenção da animação - 'fade-up com escalonamento de 60 ms, duração de 200 ms' batidas 'torná-la agradável'.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum
Saída de dados: Nenhum da habilidade; rede não envolvida

Solução de problemas

Erros comuns e correções

Jank na rolagem

Verifique se você está animando transformações, não acessórios de layout (largura/parte superior). Use a mudança de vontade com moderação.

Verificar: Chrome DevTools → Performance → layout shift count
Animação ignorada em movimento reduzido

Envolva com useReducedMotion e cause um curto-circuito nas variantes de animação.

Verificar: System → Motion preferences → reduce motion; reload
Pacote grande depois de adicionar movimento

Importe apenas o que você precisa de 'motion/react'; evite reexportar tudo.

Verificar: Bundle analyzer on the chunks

Alternativas

Motion.dev Animations Skill vs. outros

AlternativaQuando usarTroca
magic-ui-mcpVocê deseja componentes animados pré-construídos, não movimentos personalizadosMenos personalizado, mais rápido de adotar
cc-frontend-skillVocê deseja orientação geral de front-end, não Motion.dev especificamenteNão focado em animação
excalidraw-skillVocê quer diagramas, não animações da webProblema diferente

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills