Communitygithub.com

lottiefiles/motion-design

Aplica princípios de motion design para criar animações e transições emocionalmente envolventes e tecnicamente sólidas. Fornece temporização, atenuação, coreografia e princípios de animação da Disney adaptados para interfaces. Use ao criar animações, transições, microinterações, estados de carregamento, transições de página, efeitos disparados por rolagem ou qualquer trabalho com movimento. Funciona com CSS, Framer Motion, GSAP, Lottie, Spring ou qualquer sistema de animação.

O que é motion-design?

Este skill capacita agentes de IA a aplicarem princípios profissionais de motion design em animações e transições de interface, combinando fundamentos clássicos da Disney com técnicas modernas como temporização, atenuação e coreografia. Ele é útil para desenvolvedores e designers que precisam criar microinterações refinadas, estados de carregamento, transições de página ou efeitos disparados por rolagem, garantindo que cada movimento transmita emoção e propósito. O skill é compatível com uma ampla gama de plataformas e bibliotecas, incluindo CSS, Framer Motion, GSAP, Lottie e Spring, oferecendo orientações práticas independentemente da tecnologia escolhida. Ao consultar este skill, o agente recebe instruções detalhadas sobre como estruturar animações com ritmo, hierarquia e fluidez, resultando em experiências de usuário mais naturais e cativantes.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lottiefiles/motion-design-skill/tree/main/skills/motion-design
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que motion-design faz?

Aplica princípios de motion design para criar animações e transições emocionalmente envolventes e tecnicamente sólidas. Fornece temporização, atenuação, coreografia e princípios de animação da Disney adaptados para interfaces. Use ao criar animações, transições, microinterações, estados de carregamento, transições de página, efeitos disparados por rolagem ou qualquer trabalho com movimento. Funciona com CSS, Framer Motion, GSAP, Lottie, Spring ou qualquer sistema de animação.

Habilidades Relacionadas

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community