Repolode
Enviar
LottieFiles

LottieFiles/motion-design-skill

Uma skill para ensinar princípios de motion design a agentes de programação com IA, cobrindo timing, easing e coreografia para animações de UI em qualquer biblioteca.

Ver no GitHub
Estrelas
2,329
Forks
149
Issues abertas
1
Último commit
há 5 meses

O que é?

Motion Design Skill é um conjunto de instruções que ensina agentes de IA a pensar como designers de movimento antes de escrever qualquer código de animação. A skill aborda como escolher timing, easing, coreografia e a intenção emocional por trás de um movimento, em vez de apenas gerar código para uma biblioteca específica.

A skill adapta os 12 princípios de animação da Disney a interfaces e inclui um checklist de 8 etapas, arquétipos de personalidade para movimentos e tabelas de referência de duração e easing. Também oferece receitas prontas para animações de entrada e saída, feedback de estado como carregamento, sucesso e erro, movimentos ambientes em loop e escalonamento de vários elementos.

Ela foi projetada para funcionar com CSS, Framer Motion, GSAP, Lottie e sistemas baseados em spring. A instalação é feita com npx skills add, e a skill é compatível com mais de 40 agentes de programação, incluindo Claude Code, Cursor, Codex e GitHub Copilot.

Recursos principais

  • 01Aborda timing, easing, coreografia e intenção emocional antes da implementação
  • 02Adapta os 12 princípios de animação da Disney ao trabalho com UI
  • 03Inclui receitas para entrada e saída, feedback de estado, movimento ambiente e escalonamento de vários elementos
  • 04Oferece tabelas de consulta de duração e easing, além de um checklist de qualidade
  • 05Independente de biblioteca, pode ser usada com CSS, Framer Motion, GSAP, Lottie e física de spring

Casos de uso

  • Adicionar animações de entrada a componentes de card ou lista em um app web
  • Criar transições de carregamento, sucesso e erro para o botão de envio de um formulário
  • Definir a ordem de exibição dos widgets de um dashboard
  • Revisar código de animação existente com base nos princípios de motion design

Tópicos

#agent-skills#animation#motion-design#ui#micro-interactions#easing#lottie

Perguntas frequentes

O que é motion-design-skill?
Uma skill para ensinar princípios de motion design a agentes de programação com IA, cobrindo timing, easing e coreografia para animações de UI em qualquer biblioteca. Motion Design Skill é um conjunto de instruções que ensina agentes de IA a pensar como designers de movimento antes de escrever qualquer código de animação. A skill aborda como escolher timing, easing, coreografia e a intenção emocional por trás de um movimento, em vez de apenas gerar código para uma biblioteca específica.
motion-design-skill é gratuito? Qual é a licença?
motion-design-skill é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
motion-design-skill ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de motion-design-skill foi em 18 de mai. de 2026.
Para que posso usar motion-design-skill?
Adicionar animações de entrada a componentes de card ou lista em um app web Criar transições de carregamento, sucesso e erro para o botão de envio de um formulário Definir a ordem de exibição dos widgets de um dashboard Revisar código de animação existente com base nos princípios de motion design
Onde consigo motion-design-skill?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/LottieFiles/motion-design-skill

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados