Anima num slide do Mira um SVG que o usuário FORNECE, dando movimento próprio à forma (não troca uma forma por outra, isso é morph). O usuário passa 1 arquivo .svg e descreve o movimento em palavras: bater asas, girar uma roda, deslizar, pulsar, ter o contorno desenhado, percorrer uma curva. Usa GSAP vendorado localmente (offline, file://) e escolhe a técnica conforme o movimento: transform (rotate/scale/scaleX/translate/skew), DrawSVGPlugin (o traço se desenha) ou MotionPathPlugin (movimento por curva). Ponto técnico central: para animar uma PARTE (uma asa, uma engrenagem), a parte precisa ser um elemento separado; se o SVG vier como path único fundido, a skill separa a parte, cortando a silhueta por um eixo com clipPath, ou editando o path para isolar/remover trechos (ex.: remover as antenas de dentro do path da asa para elas não se moverem em cópia). A skill também remove fundo opaco (ex.: branco) e define a origem do movimento no ponto certo (svgOrigin: eixo da dobradiça ou centro de rotação). Herda a Regra Zero (loop interno obrigatório) e respeita prefers-reduced-motion (estado final estático). Card limpo no padrão mira-animator: título sem ícone (máximo 6 palavras), laranja FF904D. Use SEMPRE que o usuário disser "/mira-svg-animator", "anima esse svg", "faz a borboleta bater asas", "gira essa roda/engrenagem", "faz esse desenho se mexer", "desliza esse svg", "faz pulsar", "o traço/contorno se desenha sozinho", ou passar um SVG pedindo movimento. Se o usuário quer uma forma virando OUTRA, use mira-svg-morph (arquivo) ou mira-icon-morph (Iconify). Para metáfora densa/emergente (partículas, explosão), use mira-animator (D3).
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryGeneralStars0
About this skill
Anima num slide do Mira um SVG que o usuário FORNECE, dando movimento próprio à forma (não troca uma forma por outra, isso é morph). O usuário passa 1 arquivo .svg e descreve o movimento em palavras: bater asas, girar uma roda, deslizar, pulsar, ter o contorno desenhado, percorrer uma curva. Usa GSAP vendorado localmente (offline, file://) e escolhe a técnica conforme o movimento: transform (rotate/scale/scaleX/translate/skew), DrawSVGPlugin (o traço se desenha) ou MotionPathPlugin (movimento por curva). Ponto técnico central: para animar uma PARTE (uma asa, uma engrenagem), a parte precisa ser um elemento separado; se o SVG vier como path único fundido, a skill separa a parte, cortando a silhueta por um eixo com clipPath, ou editando o path para isolar/remover trechos (ex.: remover as antenas de dentro do path da asa para elas não se moverem em cópia). A skill também remove fundo opaco (ex.: branco) e define a origem do movimento no ponto certo (svgOrigin: eixo da dobradiça ou centro de rotação). Herda a Regra Zero (loop interno obrigatório) e respeita prefers-reduced-motion (estado final estático). Card limpo no padrão mira-animator: título sem ícone (máximo 6 palavras), laranja FF904D. Use SEMPRE que o usuário disser "/mira-svg-animator", "anima esse svg", "faz a borboleta bater asas", "gira essa roda/engrenagem", "faz esse desenho se mexer", "desliza esse svg", "faz pulsar", "o traço/contorno se desenha sozinho", ou passar um SVG pedindo movimento. Se o usuário quer uma forma virando OUTRA, use mira-svg-morph (arquivo) ou mira-icon-morph (Iconify). Para metáfora densa/emergente (partículas, explosão), use mira-animator (D3).
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Anima num slide do Mira um SVG que o usuário FORNECE, dando movimento próprio à forma (não troca uma forma por outra, isso é morph). O usuário passa 1 arquivo .svg e descreve o movimento em palavras: bater asas, girar uma roda, deslizar, pulsar, ter o contorno desenhado, percorrer uma curva. Usa GSAP vendorado localmente (offline, file://) e escolhe a técnica conforme o movimento: transform (rotate/scale/scaleX/translate/skew), DrawSVGPlugin (o traço se desenha) ou MotionPathPlugin (movimento por curva). Ponto técnico central: para animar uma PARTE (uma asa, uma engrenagem), a parte precisa ser um elemento separado; se o SVG vier como path único fundido, a skill separa a parte, cortando a silhueta por um eixo com clipPath, ou editando o path para isolar/remover trechos (ex.: remover as antenas de dentro do path da asa para elas não se moverem em cópia). A skill também remove fundo opaco (ex.: <rect> branco) e define a origem do movimento no ponto certo (svgOrigin: eixo da dobradiça ou centro de rotação). Herda a Regra Zero (loop interno obrigatório) e respeita prefers-reduced-motion (estado final estático). Card limpo no padrão mira-animator: título sem ícone (máximo 6 palavras), laranja #FF904D. Use SEMPRE que o usuário disser "/mira-svg-animator", "anima esse svg", "faz a borboleta bater asas", "gira essa roda/engrenagem", "faz esse desenho se mexer", "desliza esse svg", "faz pulsar", "o traço/contorno se desenha sozinho", ou passar um SVG pedindo movimento. Se o usuário quer uma forma virando OUTRA, use mira-svg-morph (arquivo) ou mira-icon-morph (Iconify). Para metáfora densa/emergente (partículas, explosão), use mira-animator (D3).
About this listing
Category
General
Reported license
MIT
Listing language (estimated)
Portuguese
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI