O que animonkey faz?
por Dustkey LLC
Um método de estúdio para criar motion graphics de produtos que parecem os das melhores startups: uma história que se encaixa na música, títulos que se leem sozinhos, transições que transformam em vez de cortar, personagens que interpretam o que o produto resolve e a UI real em destaque. Ele fornece um template Remotion que compila (template/), scripts para música, voz, mixagem, controle de qualidade e entrega (scripts/), e documentos de referência com os números (references/).
O ofício se repete; o visual não. Cada filme ganha sua própria linha visual — paleta, tipografia, acabamento do personagem, luz, câmera, personalidade do movimento, música — definida a partir da marca do cliente. A skill fornece os parâmetros para fazer vídeos com essa qualidade, não para repetir um. Nunca copie a linha visual, a música, o roteiro ou o storyboard de outro filme.
Antes de começar
- Leia
references/template.md(como o template é construído e sua API) e, antes de escrever código Remotion, a documentação da versão instalada (as APIs@remotion/media,@remotion/threeeConfigmudam entre versões). - Ferramentas: node ≥ 20, ffmpeg/ffprobe,
uv(Python 3.12) para os scripts; para voz, um ambiente commlx-audio,faster-whisper,mlx-whisper,speechbrainelibrosa(Apple Silicon). - Disco: ≥ 5 GB livres para renderizar (
df -h /). Nunca exclua arquivos do usuário para liberar espaço sem perguntar. - Um novo projeto começa como uma cópia:
cp -R <skill>/template <project>/video && cd <project>/video && npm install.
O fluxo de trabalho
Cada etapa termina em algo visível. Os gates (G0–G3) são aprovados com base em quadros, contatos ou vídeos, nunca em uma descrição.
0 · Briefing
Reúna (e peça o que estiver faltando, em um único lote): o que o produto faz HOJE e o que não faz; para quem é; onde o vídeo será usado (landing page, app store, anúncios, evento); duração(ões); formatos (16:9, 9:16, 4:5); idiomas; com ou sem voz e em qual modo; música (com licença comercial); a marca (logotipo, cores, tipografia, tom); a UI real (capturas de tela, design tokens do código, ícones) e referências que o cliente gosta. Escreva a verdade do produto no plano: nada no filme pode prometer o que o aplicativo não faz.
1 · A linha visual → G0
Defina os dez eixos da linha com references/art-direction.md e compare com o registro de linhas usadas (used-lines.md, privado; se não existir, crie a partir de used-lines.example.md). Escreva em kit/palette.ts, style.ts, brand.ts (+ scripts/font-metrics.py se a tipografia mudar) e project/cast.ts. Renderize três quadros da linha (o problema com o elenco, a UI, o fechamento) com scripts/still.sh e obtenha aprovação.
2 · A história e os títulos
Com references/storytelling.md: preencha os slots (onde o valor nasce, o elenco, a matéria-prima que cada personagem deixa cair, a perda, a reviravolta, a peça da marca viajante, a ação de um toque, a tríade, a prova, a objeção, o slogan). Distribua os atos sobre a forma da música e escreva os títulos como especificações em project/titles.ts com references/kinetic-typography.md. Leia-os em sequência com o som desligado: eles devem contar todo o filme. Execute npm run check até passar em ambos os idiomas.
3 · A música e a grade
Com references/audio-and-voice.md: escolha a faixa para a linha, mapeie-a (scripts/mapear-musica.py), corte-a por compassos, se necessário (scripts/cortar-por-compases.py) e coloque bpm e v0 em makeGrid em project/timeline.ts. A partir daqui, cada evento é escrito com bar()/beat().
4 · Animatic → G1
Os títulos reais animados, os objetos como silhuetas no lugar e o plano de fundo, sobre a música (e a voz de scratch). O que é aprovado é o TIMING. O que é aprovado aqui é o que será entregue.
5 · Produção por blocos → G2
Do maior para o menor risco (a prova na mão e o plantio-e-recompensa primeiro), cada bloco em project/blocks/ e registry.tsx:
- personagens, poses, luz e câmera 3D:
references/characters-3d.md; - a UI do produto em DOM colada ao 3D, toques e push-ins legíveis:
references/product-ui.md; - curvas, receitas de câmera, transições de transformação, planos de fundo físicos e entregas:
references/motion-and-grounds.md. Revise cada bloco com uma folha de contato e cortes de 100% (references/production-and-qa.md).
6 · Integração, verificações e master → G3
npm run check, renderize (scripts/render.sh), scripts/film-qa.py e scripts/hoja-contacto.py no MP4; a voz (scripts/voz/) e a mixagem (scripts/mezclar.py) medidas. Assista ao master sem som como alguém que não conhece o produto.
7 · Variantes e entrega
Idiomas, verticais através de uma janela, cortes de 6 a 15 s com várias aberturas, um master sem voz: references/marketing-and-formats.md. Entregue com scripts/entregar.py (nomes que nunca sobrescrevem, capas, folhas de contato, manifesto).
8 · Registrar
Adicione a linha do filme a used-lines.md e sua assinatura a USED_LINES no próximo projeto. Registre as decisões do cliente nas próprias palavras deles: elas são o gosto para o próximo filme (references/taste.md).
Inegociáveis
- A música manda. Tudo em quadros de grade; eventos dentro de ±2 quadros de uma batida; mova a voz, nunca a grade.
- Um título = uma linha centralizada de 2 a 5 palavras, medida com a tipografia real (sem DOM), com um único acento; se não couber, encurte o texto, não a fonte.
- Nada aparece por opacidade ou muda por crossfade: a câmera, um objeto ou uma transformação carrega tudo.
- O problema é interpretado por personagens; o que eles deixam cair no problema retorna como resultado do produto.
- A UI é a do produto real, redesenhada em DOM e legível quando é lida (≥ 3,4 px/pt).
- Uma peça da marca viaja pela história e retorna ao logotipo; o fechamento fica parado com o domínio.
- Verticais sem refazer: o mesmo filme através de uma janela; textos como estão; alargue a janela onde algo não couber.
- Cada projeto tem sua própria linha; dois filmes do estúdio não se parecem (anti-similaridade em
art-direction.md). - Uma verificação precisa poder falhar, e um render verde não prova nada: olhe a folha de contato e os quadros de 100%.
- Nenhum dado real do cliente e nenhuma capacidade inventada na tela.
O que ler e quando
| Você precisa… | Leia |
|---|---|
| Para começar, entender o template, comandos | references/template.md |
| Para definir o visual do projeto (paleta, tipografia, acabamento, luz, música) | references/art-direction.md |
| Estrutura, atos, personagens interpretando o processo, roteiro e voz | references/storytelling.md |
| Especificações dos títulos, entradas e saídas, medição, outra tipografia ou idioma | references/kinetic-typography.md |
| Curvas, câmera, transições, planos de fundo, ritmo, métricas de movimento | references/motion-and-grounds.md |
| Para projetar um elenco, poses, IK, encenação 3D, mãos, sombras | references/characters-3d.md |
| Para recriar e animar a UI do produto e colá-la ao 3D | references/product-ui.md |
| Para escolher e cortar a música, voz com IA, a mixagem | references/audio-and-voice.md |
| Cortes de anúncio, verticais, idiomas, entregáveis | references/marketing-and-formats.md |
| Gates, regras mensuráveis, renderização, ferramentas, operações | references/production-and-qa.md |
| Para decidir entre duas opções que ambas funcionam | references/taste.md |
Scripts
| Script | Para que serve |
|---|---|
template/scripts/check.sh | verifica sem renderizar (títulos, sincronia, planos de fundo, contraste, cortes, linha repetida) em dois idiomas |
template/scripts/still.sh | quadros únicos para revisão e para os gates |
template/scripts/render.sh | master e variantes: silencioso em partes, com verificação de disco e áudio multiplexado com ffmpeg |
template/scripts/proyecto-json.sh | a linha do tempo como JSON para os scripts Python |
template/scripts/font-metrics.py | a tabela de medição de outra tipografia (estática ou variável) |
scripts/mapear-musica.py | tempo, primeiro tempo forte, grade e seções de uma faixa |
scripts/cortar-por-compases.py | a música cortada pelos segmentos da grade, sem cliques |
scripts/mezclar.py | música + voz com ducking, baixos protegidos e um relatório de medição |
scripts/voz/ | script de voz dos títulos → design → clone → escolha → coloque |
scripts/film-qa.py | cortes, movimento, planos de fundo e cor no MP4 |
scripts/hoja-contacto.py | folha de contato como PDF ou PNG |
scripts/comparar-videos.py | dois renders comparados com tolerância |
scripts/entregar.py | entrega com capas, folhas de contato e um manifesto, nunca sobrescrevendo |
Casos privados
Se existir uma pasta private-cases/ (ela nunca é publicada), ela contém a análise completa de produções reais do estúdio: leia-a para entender por que o método é como é, nunca para copiar sua linha visual, sua música, seu roteiro ou sua história.