| name | mira-img-animator |
| description | Transforma imagens (fotos, logos, diagramas) em animações D3.js interativas e self-contained. Use sempre que o usuário pedir para animar uma imagem, criar efeitos visuais a partir de uma imagem, transformar imagem em partículas, gerar visualizações interativas de uma imagem, ou combinar "imagem + animação + D3". Também quando mencionar "partículas", "dissolve", "explode", "morph", "wave", "pixel art animado", "imagem animada com D3", "efeito visual em imagem", "animação interativa de imagem", ou transformar uma imagem estática em algo dinâmico. Funciona com JPG, PNG, SVG, GIF e WebP.
|
D3 Image Animator
Transforma imagens em animações D3.js interativas. Foco em fotos e imagens reais (JPG, PNG),
gerando sempre um HTML standalone (arquivo único, com D3 via CDN e imagem embutida em base64).
Fluxo de Trabalho
1. Receber a Imagem
Origem possível:
- Upload direto → arquivo em
/mnt/user-data/uploads/
- URL da web → baixar via
web_fetch
- Imagem no contexto → Claude já a vê e pode analisar seus elementos
Formatos: JPG e PNG são primários. WebP, GIF, SVG e BMP também funcionam, mas podem precisar de
conversão via scripts/image_to_base64.py --convert-to png.
Otimização para fotos: fotos reais são grandes e densas. Redimensione para max 800px de largura
antes de processar partículas — use scripts/resize_image.py antes de scripts/extract_pixels.py.
2. Analisar a Imagem
Antes de gerar código, analise a imagem para decidir a abordagem:
- Tipo de conteúdo: foto, logo, diagrama, ilustração, ícone, gráfico, texto
- Complexidade: simples (poucas formas), média, complexa (foto detalhada)
- Cores dominantes: extrair paleta para usar na animação
- Elementos identificáveis: formas geométricas, texto, contornos, regiões
3. Escolher o Tipo de Animação
Catálogo completo de efeitos em references/ANIMATION_CATALOG.md. A escolha depende do tipo de imagem
e do efeito desejado.
Regra geral de decisão:
| Tipo de imagem | Animação recomendada |
|---|
| Logo/ícone simples | Partículas, morph, draw-on |
| Foto/imagem complexa | Partículas (sampled), wave, dissolve, pixelate |
| Diagrama/fluxograma | Force-directed, draw-on, highlight |
| Texto/tipografia | Partículas de texto, scramble, typewriter |
| Gráfico/chart | Transições de dados, staggered bars |
Se o usuário não especificou o tipo, pergunte mostrando 2-3 opções que fazem sentido para a imagem,
com breve descrição visual de cada.
4. Gerar o Código
Padrões D3.js testados em references/D3_PATTERNS.md.
Regras fundamentais do código gerado:
- HTML standalone — arquivo único
.html com tudo embutido (CSS, JS, D3 via CDN)
- D3.js v7 — sempre via CDN:
https://d3js.org/d3.v7.min.js
- Canvas para performance — use Canvas (não SVG) com mais de 5.000 elementos
- SVG para interatividade — use SVG para hover/click em elementos individuais
- Imagem como base64 — converter e embutir no HTML para ser self-contained
- Responsivo — a animação se adapta ao tamanho da tela
- Controles — botões play/pause/reset quando relevante
- Performance —
requestAnimationFrame para loops, limitar partículas a ~50.000
Converter imagem em base64:
python scripts/image_to_base64.py <caminho_da_imagem>
Extrair paleta de cores dominantes:
python scripts/extract_palette.py <caminho_da_imagem> --colors 6
Extrair dados de pixels (posição + cor) para partículas:
python scripts/extract_pixels.py <caminho_da_imagem> --sample-rate 4 --min-alpha 128
5. Estrutura do HTML Gerado
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Nome da Animação]</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
</style>
</head>
<body>
<div id="container"></div>
<script>
</script>
</body>
</html>
6. Salvar e Entregar
Output sempre HTML standalone. Salve e use present_files para entregar:
output_path = "/mnt/user-data/outputs/animacao_d3_[nome].html"
Nota: se o usuário pedir React (.jsx), consulte references/REACT_PATTERNS.md; o padrão é HTML standalone.
Diretrizes de Qualidade
- Estética: seguir o skill
frontend-design — cores coesas, tipografia elegante, backgrounds atmosféricos
- Animação fluida: mínimo 30fps, idealmente 60fps; testar com imagens grandes
- Interatividade significativa: hover, click, drag devem fazer algo visualmente satisfatório
- Código limpo: comentários em português, variáveis com nomes descritivos
- Fallback gracioso: se a imagem não carregar, mostrar mensagem amigável
Tratamento de Erros
Cenários de erro e tratamento em references/ERRORS.md.
