ErtanLabs Motion

O que ErtanLabs Motion faz?

O trabalho de motion graphics torna-se genérico de uma forma previsível: cada escolha que um briefing deixa em aberto é preenchida com o que é mais comum, e um vídeo montado a partir de escolhas mais comuns é indistinguível de milhares de outros. Esta skill torna as escolhas abertas explícitas, dá a cada uma uma fonte rastreável, renderiza deterministicamente e mede o arquivo antes que alguém o veja.

Regra da casa: toda escolha visível tem um dono. Se você não pode apontar de onde veio uma fonte, cor, curva ou som, ninguém a escolheu.

O percurso

Fase	Etapa	Deixa para trás
A · Decidir	A1 Examinar a máquina	Resultado de --doctor, backend escolhido
	A2 Desmontar o briefing	Logline, canvas, inventário, trilha sonora, limites, suposições marcadas
	A3 Encontrar o mundo de origem	O artefato cuja gramática a peça empresta, dispositivo narrativo, beat herói
	A4 Escrever o padrão, depois derrubá-lo	A versão mais comum e suas substituições
	A5 Manter o ledger	ledger.md ao lado da composição
B · Fazer	B1 Planejar em quadros	Tabela de beats com pausas planejadas
	B2 Pesar cada elemento	Classes de peso, liderar e seguir
	B3 Deixar o mundo definir tipo, cor, som	Linhas do ledger preenchidas a partir da fonte
	B4 Provar, depois renderizar	Quadros heróis inspecionados, depois o arquivo
C · Provar	C1 Medir e olhar	Relatório de check.py, contato, índice de problemas
	C2 Etiquetar alegações e entregar	Entrega agrupada por evidências

Modos de trabalho

• Sprint (peças curtas com uma ideia, ou "apenas faça"): escolha você mesmo o mundo de origem, escreva um ledger de cinco linhas (logline, mundo, beat herói, três padrões substituídos, canvas), construa. Prova e medição ainda são executadas.
• Studio (trabalho de marca, peças mais longas, briefings pouco claros): renderize o quadro herói para dois mundos de origem candidatos com --stills e mostre as duas imagens lado a lado; as pessoas julgam imagens mais rápido que descrições. O usuário escolhe; sem ninguém disponível, mantenha aquele cujo quadro herói sobrevive ao teste do olho de miniatura (C1) e anote o motivo no ledger.
• Série (episódios para um canal ou campanha): leia todos os ledger.md anteriores do projeto primeiro. Um novo episódio não pode repetir tanto o mundo de origem anterior quanto a estrutura de beat herói anterior; constantes de marca carregam uma tag fixed e estão isentas.
• Revisão (notas sobre uma peça entregue): mapeie cada nota para linhas da tabela de beats e escreva a alteração como um diff da tabela de beats, linha antiga → nova linha. Exemplo: "muito lento no início" → grid 6-30 → 4-16, hold 30-60 → 16-40, cada linha posterior desloca −20 quadros. Renderize apenas o intervalo alterado (--range) para revisão, depois a peça completa, e anexe o diff ao ledger.
• Narrador explicativo (videoensaios, documentários, história, dinheiro, crime ou ciência conduzidos por voz, visual de colagem de papel): a narração é o relógio e cada frase se torna um beat. Duas regras carregam a maior parte da qualidade: uma pausa termina com sua frase, e cada fato na tela é falado ou tem origem em um recorte. Leia references/paper-collage-explainer.md e comece a partir de assets/collage-template.html.

Nível de produção

Independente do modo, toda peça tem um nível, escrito no ledger:

• Gráfico (padrão): a gramática do mundo de origem em um canvas plano. Adequado para sobreposições, terços inferiores, peças de UI, dados e qualquer coisa que um editor componha.
• Filme: o artefato em seu lugar, visto através de uma câmera, iluminado por uma fonte que o mundo explica, com materiais, vida entre os beats, três ou quatro cenas e som projetado com música. Adequado para showreels, páginas de destino e capas de repositórios, filmes de marca, lançamentos, vitrines de mapas e rotas, e sempre que alguém pedir "cinematográfico", "vivo", "premium" ou "menos plano". Leia references/film-level.md antes de planejar; ele adiciona uma lista de cenas acima da tabela de beats e suas próprias verificações.

Fase A · Decidir

A1 Examinar a máquina

node scripts/render.mjs --doctor

A saída decide o backend: Node, Playwright ou um Chrome/Edge instalado, ffmpeg, ffprobe, NVENC. Relate ao usuário em uma linha. Se o caminho HTML não estiver disponível, B4 lista as alternativas; se o usuário já tiver um projeto Remotion ou HyperFrames, trabalhe dentro dele.

A2 Desmontar o briefing

1. Logline: a frase única que o vídeo diz. Sem uma, a peça vira decoração; elabore uma e confirme-a.
2. Canvas: proporção, duração, fps, destino. Tamanhos e zonas seguras: references/formats-and-safe-zones.md.
3. Inventário: filmagens, capturas de tela, logotipos, fotos, dados, placas de IA. O material existente molda o conceito em vez de ser colocado sobre ele.
4. Trilha sonora: narração, música ou nenhuma. Com narração ou música, o áudio define o tempo (references/sound-and-sync.md). O áudio fornecido pelo usuário é final: nunca adicione ou remova pausas, corte, estique ou redefina o tempo sem a aprovação do usuário; ajuste a imagem.
5. Limites: fontes e cores da marca, elementos obrigatórios e proibidos, prazo.

Desconhecidos tornam-se suposições no ledger, marcadas como assumed. Faça uma pergunta apenas quando a resposta mudaria o mundo de origem.

A3 Encontrar o mundo de origem

Não escolha "um estilo". Escolha um artefato real do mundo do assunto e empreste sua gramática: uma tábua de marés, um folheto de farmácia, um painel de partidas de aeroporto, um rolo de sismógrafo, um dossiê redigido, uma mesa de editor com recortes. Um artefato resolve várias decisões juntas – o tipo em que é definido, as tintas e materiais que dão a paleta, a maneira como as coisas mudam nele (virar, imprimir, carimbar, preencher, traçar), sua superfície – para que as decisões concordem entre si.

1. Liste cinco artefatos que pessoas que lidam com o assunto realmente manuseiam ou leem.
2. Prefira aquele com movimento embutido: algo que vira, imprime, preenche, traça, carimba ou rola por si só.
3. Empreste regras, não imagens. Não uma foto de um bilhete atrás do texto, mas a lógica do bilhete: uma perfuração separa, um número de série conta, um carimbo cancela.

references/source-worlds.md descreve 31 mundos agrupados pela forma como se movem. Trate-o como calibração; o melhor mundo para um trabalho muitas vezes não está na lista.

Nomeie mais duas coisas:

• Dispositivo narrativo: uma frase sobre como a logline se torna visível ("a curva da maré traça e a água no quadro segue a caneta").
• Beat herói: o beat que carrega a logline. Ele recebe a pausa planejada mais longa e a maior mudança de estado ou escala na peça. Após a renderização, a pausa mais longa medida por check.py deve ser a do herói; se não for, a ênfase está no lugar errado. Sob narração, a pausa ainda termina com sua frase e a pausa após ela. Se o herói precisar de mais tempo, peça uma pausa mais longa enquanto a voz ainda está sendo escrita ou gravada; com uma narração finalizada, ajuste a pausa e nunca segure a imagem sobre a próxima linha.

A4 Escrever o padrão, depois derrubá-lo

A primeira ideia geralmente é a mais comum. Torne-a visível, depois substitua-a:

1. Escreva a versão padrão deste vídeo em uma linha honesta: o que um modelo médio faria a partir deste prompt.
2. Escolha pelo menos três decisões nessa linha (tipo, paleta, layout, entrada, transição, som) e escreva uma substituição para cada uma com sua fonte: o mundo de origem, o material, os dados ou a trilha sonora.
3. Um padrão que você não pode substituir com uma razão pode permanecer; ele vai para o ledger marcado como owned default.

A5 Manter o ledger

Preencha-o antes de construir, mostre-o e salve-o como ledger.md ao lado da composição. É também a memória para o próximo episódio.

LEDGER · <projeto> · <data>
Logline:
Canvas: 1080×1920 · 30 fps · 8 s · Reels · zona segura: vertical
Mundo de origem:
Dispositivo narrativo:
Beat herói (quadros):
Versão padrão (uma linha):

| Camada     | Decisão                  | Fonte / razão                   | Padrão que substitui |
|------------|--------------------------|---------------------------------|----------------------|
| Tipo       |                          |                                 |                      |
| Paleta     | valores hex + função de cada | amostrado de ...                |                      |
| Layout     |                          |                                 |                      |
| Base de tempo | fps, classes de peso, pausas |                              |                      |
| Textura    |                          |                                 |                      |
| Som        |                          |                                 |                      |
| Transições |                          |                                 |                      |

Direitos (fontes, música, dados, imagens):
Suposições:

Fase B · Fazer

B1 Planejar em quadros

Uma tabela de beats é uma folha de exposição compacta: movimento escrito como dados antes do código. Intervalos são [in, out) em quadros; pausas recebem suas próprias linhas.

BEAT SHEET · 30 fps · 240 quadros (8 s) · 1080×1920
| Beat | Quadros | Elemento    | Classe    | Ação                            | Carrega    | Som          |
|------|---------|-------------|-----------|---------------------------------|------------|--------------|
| 1    | 6-30    | grade       | marca     | linhas traçam, escalonadas      | entra      | caneta       |
| 1    | 30-60   | -           |           | PAUSA                           |            |              |
| 2    | 60-168  | curva maré  | peça fixa | traça; água segue a ponta       | liga       | maré baixa   |
| 2    | 168-198 | -           |           | PAUSA (herói)                   |            | silêncio     |
| 3    | 198-200 | título      | carimbo   | pousa na água                   | aterrissa  | uma batida   |
PAUSAS: 30-60, 168-198, 200-240 → proporção de pausa planejada 42%

Carrega nomeia o que o espectador ganha: um elemento entra, duas coisas ligam, um estado muda, ou um beat aterrissa na trilha sonora. Uma célula Carrega vazia marca decoração; corte-a.

Proporção de pausa é a parcela de quadros em que nada significativo se move. Explicativos e trabalhos de título geralmente ficam em torno de 20-35%, montagens com corte musical mais baixas, peças contemplativas mais altas. Grão e deriva lenta abaixo de 2 px são textura, não movimento. check.py mede a proporção para que plano e resultado possam ser comparados.

Com narração ou música, converta timestamps de palavras e beats em números de quadro e escreva-os na tabela. Sob narração, cada beat também recebe uma deixa, sua primeira palavra estressada: o elemento principal do beat está no lugar até a deixa, e nenhuma pausa se estende para a próxima frase.

B2 Pesar cada elemento

Dê a cada elemento uma classe de peso; a classe escolhe sua curva e duração do conjunto em references/motion-and-timing.md, então as durações diferem porque as massas diferem, não por gosto.

Classe	Elementos típicos	Chegam	Saem	Curva
adereço	pontos, tags, números pequenos	6-12 q	4-8 q	settle in, launch out
painel	títulos, cartões, blocos de gráfico	14-24 q	10-16 q	heavy
peça fixa	câmera, planos de água, mapas, campos grandes	30-90 q	20-45 q	heavy; linear para máquinas
marca	linhas, rotas, sublinhados, caligrafia	comprimento ÷ ~30 px por quadro	desvanece	pen
carimbo	cancelamentos, valores finais, cortes	1-2 q	-	step

• Liderar e seguir. A qualquer momento um movimento lidera; qualquer outro movimento é causado por ele (a caneta atinge o extremo, então sua etiqueta abre).
• Ordem de dependência. Um elemento aparece apenas depois do que depende está na tela: um eixo antes de seus dados, uma rota antes de seu marcador.
• Quadro pôster. O quadro 0 é frequentemente a miniatura, então componha-o como uma imagem legível e acabada e deixe o movimento crescer a partir dele.
• Quadro puro. Cada valor é calculado apenas a partir do número do quadro: sem CSS de tempo real, timers ou aleatoriedade sem semente (references/composition-contract.md).

B3 Deixar o mundo definir tipo, cor, som

• Tipo é herdado do mundo de origem. A ênfase deve sobreviver ao teste do olho de miniatura (C1): uma palavra marcada apenas por matiz desaparece em tamanho pequeno em escala de cinza, então enfatize com tamanho, peso, posicionamento ou tempo. Defina <html lang> e use capitalização sensível ao local; render.mjs testa glifos do texto realmente na página. Detalhes: references/typography.md.
• Cor: toda cor tem uma função nomeada (fundo, tipo, sinal, uma série de dados). Uma cor sem função é removida. Amostre valores em vez de inventá-los: python scripts/check.py --palette reference.jpg. Detalhes: references/color-and-texture.md.
• Som: declarações de som são sempre Medidas ou Não verificadas, porque o áudio não pode ser inspecionado a olho. Cada entrada na coluna Som aponta para uma causa visível ou para o fundo. Detalhes: references/sound-and-sync.md.

B4 Provar, depois renderizar

Backend	Quando
HTML + render.mjs	Padrão sempre que --doctor passar. Comece a partir de assets/composition-template.html (ou assets/collage-template.html para narradores explicativos); contrato em references/composition-contract.md.
Remotion / HyperFrames	O usuário já trabalha em um. Mesmo ledger e tabela de beats, sintaxe diferente: references/backends.md.
Pré-visualização de artefato	Apenas se o ambiente oferecer um tipo de artefato de movimento ou vídeo, e apenas como pré-visualização; um entregável ainda é um arquivo renderizado.
Placas	Cenas que o código não pode desenhar de forma convincente (pessoas, lugares reais em movimento) vêm de filmagens ou de um modelo de vídeo como placas sem texto; tudo tipográfico permanece na composição. references/backends.md.

Mapas, globos e rotas: leia também references/maps.md (§7a para rotas de vitrine).

Prove o beat herói antes de construir o resto:

node scripts/render.mjs comp/index.html --stills 0,170,last             # pôster, herói, quadro final
node scripts/render.mjs comp/index.html --range 150-210 --scale 0.5     # beat herói na metade do tamanho
node scripts/render.mjs comp/index.html -o comp/out.mp4                  # renderização completa
node scripts/render.mjs comp/index.html --alpha -o comp/overlay.mov     # ProRes 4444 com alfa

Abra as imagens de prova com sua ferramenta de imagem para...