motion-designpor LottieFiles

Motion Design Skill.

Um skill de Claude Code e Codex para movimento e vídeo: aplica princípios de design de movimento: temporização, suavização, coreografia e fundamentos de animação.

Motion e Vídeo

Baixar OpenDesign Ver guia de uso

LottieFiles/motion-design-skill · skills/motion-design/SKILL.mdSKILL.md

--- name: motion-design description: Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. --- ## When to Apply ## Quick Reference: 8-Step Checklist ## Three Pillars (CRITICAL) ## Motion Personality ## Property Selection ## Duration Table

Metadados iniciais e títulos de seção lidos do arquivo original em 14/09/2026 · 12.489 caracteres no total

01 O que faz

O Que o Skill motion-design Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Uma referência de design de movimento baseada apenas em princípios, para designers e desenvolvedores que animam interfaces. Ela parte de três pilares — intenção emocional, narrativa visual e ofício do movimento — e então refina cada decisão através de uma de quatro personalidades de movimento (Playful, Premium, Corporate, Energetic), cada uma com faixas de duração fixas, curvas de easing e percentuais de overshoot.

Receitas prontas abrangem pressionar botão, entrada de card, sucesso e shake de erro, apoiadas por tabelas de duração por tipo de elemento, regras de easing direcional, coreografia e orçamentos de stagger, um mapa de emoção-para-movimento e classes de peso. A orientação é expressa como números, padrões e restrições que se aplicam a qualquer sistema de animação que você já utilize.

O que ele produz

Três constantes de movimento de marca a definir: easing característico, paleta de duração e padrão de entrada
Especificações cubic-bezier prontas, emprestadas de padrões de plataforma
Receitas de padrões em múltiplas etapas com temporizações por etapa, como o follow-through do pressionar de botão

Veja o exemplo de prompt ↗

Como funciona

01
Defina Primeiro os Três Pilares
Identifique a intenção emocional, a microestória visual e o ofício que torna o movimento crível antes de escolher qualquer temporização ou curva.
02
Fixe Um Arquétipo de Personalidade
Escolha um único arquétipo — Playful, Premium, Corporate ou Energetic — e mantenha-o ao longo do projeto, já que cada um carrega sua própria faixa de duração, curva de easing e overshoot.
03
Use o Menor Número de Propriedades Que Funcione
As tabelas de propriedades associam cada objetivo de efeito a uma propriedade primária e secundárias opcionais; uma propriedade parece direta, duas parecem refinadas, três ou mais correm o risco de sobrecarregar o espectador.
04
Escale a Duração pela Distância
Comece pela duração do tipo de elemento e depois estique-a conforme a distância percorrida: 100px é a base, 200px torna-se 1.3x, 400px torna-se 1.6x.
05
Faça o Easing pela Direção
Entradas desaceleram com uma curva da família ease-out, então o movimento começa rápido e chega suavemente.

02 Encontre o ideal para você

Quando Usar o motion-design Skill

Use o skill motion-design no Claude Code ou Codex quando o trabalho for motion e vídeo deste tipo. Adequação e limites abaixo são retirados do próprio arquivo do skill.

Boa Combinação

Animações de UI como botões, cards, modais e transições de página
Microinterações e animações de feedback
Estados de carregamento, sucesso e erro
Planejar animações acionadas por scroll ou baseadas em progresso

Conheça os Limites

Cenas com três ou mais elementos não podem ter mais de um terço deles em movimento ativo ao mesmo tempo.
Feedback de erro elástico: estados de erro não têm overshoot, porque erros devem parecer firmes.

O Que Fornecer

O alvo emocionalDecida primeiro o que o espectador deve sentir, escolhendo entre alegria, calma, urgência ou elegância.
Um arquétipo de personalidade de movimentoNomeie a personalidade para que timing, easing e overshoot permaneçam coerentes: Lúdico, Premium, Corporativo ou Energético.
A propriedade primáriaDeclare o que realmente se move — posição, escala, rotação ou opacidade — antes de escrever qualquer animação.

03 Dentro da skill

Regras que o skill de motion design dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Nenhum Easing Linear para Movimento Espacial
Movimento espacial deve usar curvas de easing; o linear é reservado apenas para spinners e barras de progresso.
Nunca Apenas Opacidade para Mudança de Estado
Mudanças de estado importantes devem combinar opacidade com posição ou escala, em vez de aparecer sem deslocamento.
Mantenha as Três Camadas de Movimento
Toda animação carrega uma ação primária, uma riqueza secundária e uma vida ambiente de fundo; uma animação plana é aquela que perde uma camada.
Padrão Corporativo para UI
Quando nenhuma personalidade é declarada, use Corporativo para trabalho de UI e Lúdico para ilustrações.
Faça Entradas Mais Longas Que Saídas
Entradas duram 30-50% mais que saídas, porque os usuários se importam com o que aparece.
Nunca Atravesse um Terço da Tela Sem Desafio
Nenhum movimento percorre mais de 1/3 da tela sem uma mudança intermediária de keyframe.
Limite o Stagger Total
Qualquer que seja o padrão de stagger usado, o orçamento total de atraso deve ficar abaixo de 500ms.
Aplique os Princípios da Disney
Os princípios de animação da Disney são esperados, especialmente anticipation e follow-through.

04 Coloque em prática

Instale motion-design no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione motion-design ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

Forma genérica da CLI skills para skills/motion-design/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Add a card entrance to [the pricing section] of my [React dashboard]. The cards should feel Premium: start 20px below target at opacity 0, take a slight curve in the path, and let the shadow arrive about 50ms after each card. Stagger the four cards at 60ms with the total under 400ms, and dim the surrounding content to 80%.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Percorra o arquivo completo de checklist de qualidade em busca dos critérios de avaliação.
Confirme se cada duração corresponde ao seu tipo de elemento conforme as tabelas de duração.
Se o resultado parecer barato ou plano, adicione movimento de sombra e vida de fundo como camadas secundárias e ambientes.
Se não tiver personalidade, aplique um arquétipo de forma consistente em vez de easing genérico em tudo.
Verifique a adaptação de plataforma, acessibilidade e performance antes de publicar.

No OpenDesign importe o motion-design a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: LottieFiles
Repository: github.com/LottieFiles/motion-design-skill Branch main
Arquivo da skill: skills/motion-design/SKILL.md Checksum do conteúdo registrado na verificação; commit f9a8a04
License: MIT De LICENSE; SKILL.md indica "MIT".
Estrelas do repositório: 1.626 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório LottieFiles/motion-design-skill. Não é uma classificação ou contagem de uso para motion-design.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando AplicarGatilhos para usar o skill, além de uma árvore de decisão de quatro perguntas que direciona para timing, personalidade, princípios da Disney ou stagger.
Três Pilares (CRÍTICO)Intenção emocional, narrativa visual e ofício do movimento, além das três camadas de movimento que toda animação precisa.
Personalidade de MovimentoQuatro arquétipos com valores de duração, easing e overshoot, além de três constantes de movimento de marca.
Seleção de PropriedadesMapeia objetivos de efeito para propriedades primárias e secundárias, com um limiar de simplicidade.
Tabela de DuraçãoDurações por elemento, escalonamento de distância, proporção entrada versus saída e tempos de feedback interativo.
Seleção de EasingRegras de easing direcional, padrões cubic-bezier da indústria e escalas de duração e overshoot baseadas em material.
Padrões ComunsReceitas passo a passo para pressionar botão, entrada de card, estado de sucesso e shake de erro.
Fundamentos de CoreografiaElemento principal, consistência espacial, contramovimento, as regras de 1/3 e orçamentos de delay de stagger.
Mapa de Emoção para MovimentoSete emoções mapeadas para caráter, trajetória, easing e duração, além dos significados da trajetória como linguagem.
Classificação de PesoElementos pesados, médios e leves com orientações de duração, overshoot e damping.
Regras de QualidadeItens CRÍTICOS que nunca devem ser quebrados e recomendações ALTAS para duração, easing e consistência.
Referência Rápida de Solução de ProblemasCinco sinais de animação problemática com causas prováveis e correções, do robótico ao plano.

A Descrição da Própria Skill

"Aplica princípios de motion design para criar animações e transições tecnicamente sólidas e emocionalmente direcionadas. Fornece timing, easing, coreografia e princípios de animação Disney adaptados para UI. Use ao criar animações, transições, micro-interações, estados de carregamento, transições de página, efeitos acionados por scroll ou qualquer trabalho de motion. Funciona com CSS, Framer Motion, GSAP, Lottie, Spring ou qualquer sistema de animação."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 12.489 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill motion-design

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Isso me limita a uma única biblioteca de animação?

Não. O arquivo declara suporte para CSS, Framer Motion, GSAP, Lottie, Spring ou qualquer sistema de animação, então a orientação vem como decisões de timing, easing e coreografia em vez de código específico de biblioteca.

Quanto tempo deve durar a transição de um modal?

A tabela de duração define de 300-400ms para modais e diálogos, enquadrado como uma mudança de foco. Em contraste, tooltips e microfeedback ficam em 80-120ms porque precisam parecer instantâneos.

Um elemento elástico deve quicar mais do que um card de papel?

Sim. A tabela de easing baseada em material escala a duração e o overshoot pelo material implícito: elástico usa uma escala de duração de 0,8x com 15-25% de overshoot, enquanto papel permanece em 1,0x com 3-5% de overshoot.

Motion Design

Execute motion-design em uma Tarefa Real de Motion e Vídeo.

Baixe o OpenDesign, importe motion-design a partir do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills