graphics-animados

Gráficos Animados

Você é o diretor, o designer e o editor. O trabalho é um curta-metragem que pareça intencional: um visual, uma história clara, movimento que significa algo e um arquivo que rode em qualquer lugar.

Tudo é controlado por uma ferramenta, scripts/mg.py, e um pequeno runtime, assets/mg.js. Um filme é uma página HTML com cenas; cada quadro é computado apenas a partir do tempo, para que uma renderização seja idêntica em cada execução.

Requer Python 3.8+, pip install playwright pillow, python -m playwright install chromium e ffmpeg. Verifique estes primeiro; pergunte antes de instalar qualquer coisa.

O fluxo de trabalho

Siga os passos em ordem. Os passos 1–2 são uma conversa; não renderize antes que o visual e o storyboard estejam acordados, a menos que o usuário tenha dito "apenas faça".

1. Briefing — pergunte apenas o que está faltando

Decisão	Padrão se não informado
Mensagem — a única coisa que o espectador deve lembrar	pergunte; nunca adivinhe isso
Onde será exibido → formato	16:9 para YouTube/web/slides · 9:16 para Reels/Shorts/TikTok · 1:1 ou 4:5 para feeds
Duração	15–30 s redes sociais · 30–60 s lançamento · 60–90 s explicativo
Marca — cores, fontes, logotipo	escolha um estilo, depois substitua seu acento
Som — música, narração, silencioso	rascunho silencioso primeiro; deve funcionar mudo de qualquer forma

2. Estilo — deixe o usuário escolher

python scripts/mg.py styles                          # os 16 looks, com sua personalidade de movimento
python scripts/mg.py pick styles.png --format 9:16 --title "Título deles"

pick renderiza o próprio título do usuário em cada estilo em uma única folha. Mostre-a e pergunte qual eles querem. Se não tiverem opinião, recomende um desta tabela e diga o motivo em uma frase.

O filme é…	Comece com
Lançamento de produto ou funcionalidade, UI	saas-glass, clean-minimal, sunset-gradient
Clipe social com gancho forte, hype, palavras grandes	bold-kinetic, neo-brutal, sunset-gradient
Números, relatório, retrospectiva do ano	data-story, corporate
História, ensaio, citação, documentário	editorial, cinematic-dark, paper-craft
Ferramenta para desenvolvedores, CLI, arquitetura	mono-terminal, blueprint, neon-cyber
Marca premium, convite, propriedade	luxury, cinematic-dark
Infantil, educação, celebração	playful, paper-craft
Retrô, jogos, música	retro-vhs, neon-cyber

Um estilo é cor + tipografia + como as coisas se movem (entrada, easing, velocidade, transição). Misturar dois estilos em um único filme parece um erro. Para um visual de marca, escreva um pequeno JSON que estenda um estilo — veja references/styles.md.

3. Storyboard — escreva antes de qualquer HTML

Escreva storyboard.json: uma lista ordenada de cenas. Uma ideia por cena, no máximo 12 palavras na tela; a primeira cena é o gancho.

{"scenes": [
  {"type": "title",   "kicker": "Semana de lançamento", "title": "Entregue mais rápido com *Orbit*", "subtitle": "Deploys que sua equipe vai gostar"},
  {"type": "bullets", "title": "Três coisas mudam", "items": ["Um comando", "Rollbacks de 4 segundos", "Previews por branch"]},
  {"type": "stat",    "kicker": "Mediana de deploy", "value": 4.2, "suffix": " s", "label": "antes era 3 minutos"},
  {"type": "bars",    "title": "Deploys por semana", "items": [{"label": "Antes", "value": 12}, {"label": "Depois", "value": 58}]},
  {"type": "cards",   "title": "Feito para equipes", "items": [{"title": "Seguro", "text": "SSO e log de auditoria"}]},
  {"type": "quote",   "text": "Paramos de temer *sextas-feiras*.", "by": "Head de Plataforma"},
  {"type": "end",     "title": "Experimente *Orbit* hoje", "cta": "orbit.exemplo"}
]}

*palavra* marca a palavra de acento. A duração da cena é calculada a partir das palavras, a menos que você forneça "dur". Qualquer cena pode ser {"type": "html", "html": "…", "dur": 4} para marcação personalizada. Mostre o storyboard ao usuário como uma tabela curta (cena · na tela · segundos) e obtenha um sim.

4. Construir

python scripts/mg.py new film --style saas-glass --format 16:9 --storyboard storyboard.json --accent "#ff5a1f"

Isso escreve film/index.html, film/theme.css e film/mg.js. Abra index.html em um navegador para uma prévia ao vivo com um controle de avanço. Em seguida, edite o HTML manualmente para dirigi-lo: reordene batidas, mude uma entrada, adicione um gráfico ou SVG. A referência de atributos — animações, easings, transições, movimentos de câmera, loops, código de canvas personalizado — está em references/authoring.md. Leia antes de editar manualmente.

Regras que mantêm uma renderização exata (o linter as impõe):

• O movimento vem apenas de atributos data-* ou callbacks MG.frame(t) / MG.scene(). Sem transition/animation CSS, sem timers, sem Date.now(), sem Math.random() — use MG.rand(seed).
• Fontes, imagens e scripts residem na pasta do projeto. Uma renderização que precisa da rede não é repetível.
• Filmes não são renderizados aqui. Renderize gráficos com --alpha e sobreponha-os ao clipe (passo 6).

5. Veja antes de renderizar

python scripts/mg.py lint film                 # determinismo, nomes desconhecidos, tempo de leitura, seguranças longas
python scripts/mg.py sheet film sheet.png      # folha de contato + relatório de fora do quadro / cortado / texto sobreposto

Abra a folha e olhe para ela. Verifique-a em relação a references/motion-craft.md (hierarquia, áreas seguras, um foco por quadro). Corrija, reexecute, repita. Renderizar é a etapa lenta; a folha leva segundos.

6. Renderizar

python scripts/mg.py render film draft.mp4 --scale 0.5            # rascunho rápido para avaliar o ritmo
python scripts/mg.py render film draft.mp4 --scale 0.5 --range 4-9  # apenas a parte que você alterou
python scripts/mg.py render film final.mp4 --audio music.mp3      # qualidade total, música com fade out no final
python scripts/mg.py render film lower-third.mov --alpha          # transparente ProRes 4444 (ou .webm)
python scripts/mg.py render film loop.gif --scale 0.4             # GIF para chat e documentação

Mostre o rascunho, anote, mude, re-renderize o intervalo alterado. Uma renderização de qualidade total no final. Para colocar gráficos transparentes sobre filmagens:

ffmpeg -i clip.mp4 -i lower-third.mov -filter_complex "[0][1]overlay=0:0:enable='between(t,2,7)'" -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a copy out.mp4

Som, sincronismo de narração e legendas: python scripts/mg.py cues film cues.json lista cada cena e horário de início da animação; use-o para posicionar efeitos sonoros e legendas com exatidão. Veja references/sound-and-captions.md.

7. Verificar, depois entregar

python scripts/mg.py check final.mp4 --project film

Ele confirma tamanho, taxa de quadros, duração, codec e formato de pixel em relação ao projeto, e avisa sobre pausas mortas (nada se movendo), quadros pretos, cortes ou áudio quase silencioso. Entregue apenas após OK. Forneça ao usuário o arquivo, uma linha de fatos (duração, tamanho, estilo) e o que ele pode pedir para alterar.

Padrão de qualidade — verifique cada filme contra isso

1. Gancho nos primeiros 2 segundos. Algo legível e se movendo até o quadro 15.
2. Um foco por quadro. Se duas coisas entram juntas, são um grupo.
3. Legível no mudo, em um celular. Texto do corpo ≥ 4% do lado menor; segurar ≈ 0,4 s + 0,16 s por palavra após a última entrada.
4. Nada fica parado por mais de ~2,5 s — as cenas carregam um movimento lento de câmera por padrão; mantenha-o.
5. Entradas rápidas, saídas mais rápidas, seguranças honestas. Entrada 0,3–0,8 s, saída cerca de 70% disso.
6. Escalonar, não estoure. 0,04–0,1 s entre irmãos; escalonamento total abaixo de ~0,8 s.
7. Uma linguagem de transição por filme; uma segunda apenas para o grande momento.
8. Áreas seguras. 5% de cada borda; em 9:16 mantenha os 20% inferiores e 12% superiores livres de texto.
9. Termina na ação — o quadro final nomeia o que fazer a seguir e segura ≥ 1,5 s.

Quando outro motor se encaixa melhor

mg.py cobre tipografia, layout, gráficos, UI-estilo e sobreposições transparentes com zero etapa de construção. Mude quando o trabalho for outra coisa — references/engines.md tem os comandos, licenças e compensações:

Necessidade	Use
Componentes React, lotes orientados a dados, um projeto Remotion existente	Remotion (observe sua licença empresarial)
Linhas do tempo GSAP, clipes de vídeo/áudio dentro da composição, HTML primeiro para agente	HyperFrames (Apache-2.0)
Matemática, equações, geometria, visuais de algoritmo	Manim Community
Animação TypeScript feita à mão com um editor	Motion Canvas
Animação que é incorporada em um aplicativo ou site	Lottie / CSS / GSAP — não um vídeo
Cenas 3D, shaders	Three.js controlado por MG.frame(t), ou Blender
Cortar filmagens, apresentações de slides, legendas em um clipe	a habilidade criação-de-vídeo

Nunca migre um projeto funcional para outro motor sem ser solicitado.

Arquivos de referência — carregue apenas o que a tarefa precisa

Arquivo	Leia quando
references/authoring.md	editando cenas manualmente; qualquer atributo, nome de easing ou transição; código de canvas/SVG personalizado
references/styles.md	escolhendo, misturando ou criando um estilo; cores e fontes da marca
references/motion-craft.md	julgando uma folha de contato ou rascunho; ritmo, hierarquia, tipografia, erros comuns
references/sound-and-captions.md	música, efeitos sonoros, sincronismo de narração, legendas, volume
references/engines.md	Remotion, HyperFrames, Manim, Motion Canvas, Lottie, 3D
references/recipes.md	padrões prontos: terço inferior, vinheta de logotipo, linha de letras cinética, corrida de gráficos, maquete de UI, contagem regressiva, cartão final

Limites honestos

• As fontes recorrem ao que a máquina tem. Para uma correspondência exata, coloque os arquivos de fonte no projeto e declare @font-face (verifique a licença da fonte primeiro).
• Um rascunho em --scale 0.5 julga o ritmo, não a nitidez.
• As verificações detectam falhas mecânicas; o gosto ainda precisa de olhos. Sempre olhe para a folha de contato e o rascunho você mesmo e diga o que viu, não o que supõe.
• Use apenas recursos que o usuário possui ou que são licenciados para o uso; anote a fonte e a licença de qualquer coisa que você trouxer.