Estúdio motion · EstudoOutubro 2026

Vídeo feito
por código.

O fluxo que juntei a partir de três posts e uma dúzia de repositórios, o que a gente já tem, o que falta, onde o Blender entra e o que dá pra criar.

Para ler com calma · setas ou clique para navegar
Roteiro

Três partes, nesta ordem.

01Como funciona

O Claude não "faz um vídeo". Ele escreve um programa que desenha cada quadro. Por que isso muda a revisão.

Slides 03–06
02O fluxo

Oito etapas, do briefing à entrega, com quatro portões de aprovação seus. Som, autocrítica e Blender.

Slides 07–18
03O que criar

Ideias para a SulAmérica e para freela e portfólio, e o próximo passo que eu recomendo.

Slides 19–23
01 · Como funciona

O prompt é um décimo do resultado.

Os vídeos "de um prompt só" que viralizaram tinham por trás briefings de 9 a 19 mil caracteres, referência visual, assets reais e um ciclo de autocrítica. O resto é o sistema em volta do modelo. É esse sistema que vale montar.

01 · Como funciona

Uma pergunta: o que a tela mostra no segundo t?

t = 0,00 s · quadro 0
function render(t) {
  // desenha o estado exato do filme em t
  forma.largura = mola(t, 1.2, 110, 380)
  texto.opacidade = entra(t, 1.4)
}

Arraste a barra: qualquer instante sai na hora, sem "tocar" o que veio antes. Isso é o seek(t), e é a regra que não se dobra.

Sem relógio escondido, sem aleatório sem semente. O mesmo quadro sai igual toda vez.

Código

render(t) em um HTML

→
Playwright

chama 900 vezes (15 s a 60 qps)

→
ffmpeg

junta quadros, locução e trilha

→
MP4

cor BT.709, pronto pra subir

01 · Como funciona

Por que isso muda a revisão

Título entrou cedoMuda um número.

O tempo de entrada é um valor no código. Troca e renderiza de novo só aquele trecho.

Tela erradaTroca o arquivo.

O asset é um arquivo real. Substitui e o resto do filme fica exatamente igual.

Passou do pontoAjusta uma curva.

O exagero de um movimento é um parâmetro da mola, não um "gera de novo e torce".

Onde código perde

Foto realista, personagem e movimento orgânico. Nesses casos continua sendo foto, vídeo gerado por IA ou o seu After. Código ganha em produto, interface, dados, tipografia e explicador.

01 · Como funciona

Metade já está pronta.

Já temos · winback e Vital
  • render(t) determinístico em HTML
  • Gravação quadro a quadro com Playwright
  • ffmpeg com a cor BT.709 corrigida
  • Locução ElevenLabs + tempo de cada palavra (whisper)
  • Trilha que abaixa sob a voz (sidechain)
  • Visual saindo das nossas peças, não da agência
Falta
  • Briefing em formato fixo
  • Guia de estilo escrito a partir da referência
  • Roteiro por estados, com motivo pra cada cena
  • Molas: movimento com peso
  • Autocrítica com contact sheet e checklist
  • Volume medido (‑14 LUFS) e portões de aprovação
  • Tudo empacotado numa skill
02 · O fluxo

Oito etapas, quatro portões.

Cada etapa grava um arquivo na pasta do projeto. A seguinte lê o arquivo, não a conversa. Nos portões, você aprova antes de seguir.

01Briefing

Frase do filme, público, duração, formatos, assets reais.

campanha.json
02Referência

Nossas peças viram um guia de estilo escrito.

style_guide.md
03Roteiro

Cenas por estado, com tempo e motivo.

Portão 1
04Stills

Um quadro por cena, já criticado.

Portão 2
05Animatic

Baixa resolução, movimento e locução provisória.

Portão 3
06Render + som

Movimento final, locução, trilha e mix.

src/ · audio/
07Autocrítica

Contact sheet, nota, corrige os 3 piores.

Portão 4
08Formatos

16:9, 9:16 e 1:1 próprios, mais ganchos e CTAs.

out/
02 · Etapa 01 · Briefing

Um documento de produção, não uma vibe.

FILME    a frase que fica · público · duração · formatos
ASSETS   logo, telas reais, fontes e cores do DS,
         locução, trilha
VISUAL   o que manter da referência
         clichês proibidos
LINHA    nunca inventar tela, número ou logo
ENTREGA  roteiro, contact sheet, vídeo,
         quadro-pôster, arquivos-fonte

Sem briefing, o modelo preenche cada lacuna com o padrão mais seguro que conhece: título centralizado em degradê, tudo surgindo em fade, logo no fim. É por isso que os vídeos de IA parecem irmãos.

A linha dura

Ele pode inventar movimento de câmera. Nunca inventa a tela do produto. Se falta um asset, ele para e pergunta.

02 · Etapa 01 · Dados

O conteúdo vira dados. A animação vira biblioteca.

{
  "peca": "vital-nordeste-lancamento",
  "duracao": 25,
  "marca": "sulamerica-ds-v2",
  "assets": { "kv": "assets/kv.png", "app": "assets/tela.png" },
  "cenas": [
    { "id": "gancho",  "de": 0,  "ate": 3,  "tipo": "titulo-cinetico" },
    { "id": "produto", "de": 3,  "ate": 12, "tipo": "tela-com-cursor" },
    { "id": "cta",     "de": 20, "ate": 25, "tipo": "cta" }
  ],
  "variacoes": { "ganchos": 3, "formatos": ["9:16","1:1","16:9"], "ctas": 2 }
}
Checado antes de qualquer render
  • Todo asset citado existe
  • A fonte carrega (Figtree)
  • O texto cabe no componente
  • Só afirmação aprovada, nenhum número inventado
  • Regras da marca: frase proibida (ex.: "sem custo adicional" no Vital), estado com estado
A virada

Cenas revisadas viram biblioteca: título, tela com cursor, gráfico, CTA. O Claude escolhe e configura, em vez de reinventar o visual a cada vídeo. Trocar texto, cor ou CTA é mudar o arquivo, não o código.

02 · Etapa 02 · Referência

Dar uma gramática, ou ele traz a dele.

01

Escolher a referência: um quadro, um vídeo curto ou uma pasta das nossas peças (KVs, carrossel, one page).

02

O ffmpeg tira um quadro a cada 0,5 s e o Claude estuda.

03

Ele escreve o style_guide.md: paleta, tipos, duração dos planos, transições, câmera, textura.

04

Pega a gramática, nunca o conteúdo. Nada de copiar logo, texto ou cena.

Por que as nossas peçasNinguém mais tem essa biblioteca.

Nomear um estilo funciona melhor que descrever. E referência própria é o que impede o vídeo de parecer com todos os outros feitos por IA.

02 · Etapa 03 · Roteiro

O que o público sabe a cada segundo.

00–02 sGancho

Uma imagem que ganha a atenção

02–05 sProblema

O atrito, mostrado na tela

05–09 sRevelação

O produto entra por uma interação real

09–13 sProva

Uma tela ou um número sustenta a promessa

13–16 sFecho

Estado final limpo e CTA legível

A regra

Cada cena tem estado de entrada, estado de saída e um motivo. Se não dá pra explicar por que a cena 4 existe, a cena 4 sai.

Uma forma que nunca corta

O mesmo elemento muda de tamanho, cor e conteúdo de estado em estado, e o último quadro fecha no primeiro.

logo → botão Agendar → campo preenchido → carregando → confirmação → logo

02 · Etapa 06 · Movimento

Movimento com peso.

Easing fixo vai de A a B numa curva. A mola acelera, passa um fio do ponto e assenta, como coisa que tem massa. E continua sendo função do tempo: o quadro 812 sai sem simular os 811 anteriores.

Uma regra por tipo de objeto
UI

Botões e ícones: rápidos, quase sem passar do ponto.

Painel

Cards e telas: assentam de forma controlada.

Câmera

Lenta, quase invisível. Ninguém pode se perder.

Título

Entra firme e fica o tempo de ler.

Se tudo quica, nada parece preciso.

Bordas separadas

Cada borda numa mola um pouco diferente: o indicador estica e assenta.

Caixa antes do texto

A caixa cresce primeiro. O texto novo só entra quando cabe.

02 · Etapa 06 · Som

O som roda no mesmo relógio da imagem.

LocuçãoPuxa os cortes

O tempo de cada palavra (whisper) vira marcação na timeline. Já fazemos.

ElevenLabs · whisper
TrilhaMedida antes

Batidas, compassos e o drop medidos. Mudança de estado na batida, momento grande no drop.

librosa
MixVoz na frente

Trilha abaixa sob a voz (já fazemos), mais compressor e limitador para não estourar.

ffmpeg · Pedalboard
Volume‑14 LUFS

Medido, não no ouvido. É o padrão das redes: nem baixo demais, nem esmagado.

pyloudnorm
O teste

Fecha o olho e escuta o filme. Se o som não tem forma sem a imagem, ele não está pronto.

02 · Etapa 07 · Autocrítica

O Claude assiste aos próprios quadros.

A evidência que o ffmpeg monta
01

Contact sheet: 2 quadros por segundo, 6 por linha

02

Tira: 12 quadros seguidos no movimento mais rápido

03

Celular: quadros reduzidos a 360 px de largura

04

Loop: o vídeo duas vezes seguidas

05

Transições: quadros logo antes e logo depois de cada uma, que o contact sheet pula

06

Pulo e flash: checagem automática de quadro que salta ou pisca

O checklist
  • Texto legível no tamanho do celular
  • Nada fora da área segura
  • Assets reais, nada inventado
  • Tipo e cor iguais em todas as cenas
  • Nenhum quadro feio no meio da transição
  • Corte e som batendo juntos
  • Gancho nos 2 primeiros segundos
  • Último quadro bom pra virar pôster

Nota de 1 a 10, corrige os 3 piores, repete até 8 ou mais. Fecha com um relatório: tempos vistos, problemas, correções e o que ainda falta. Sem relatório, "ficou ótimo" não vale.

02 · Os portões

Liberdade entre portões, não no lugar deles.

Entre um portão e outro o Claude roda sozinho, por horas se precisar. Errar no portão 1 custa um texto. Errar depois do render custa o render inteiro.

Portão 1

Guia de estilo e roteiro. Você lê dois arquivos curtos.

Referência e assets confirmados

Portão 2

Stills. Um quadro de cada cena, já criticado.

Você vê o visual antes de qualquer movimento

Portão 3

Animatic. Baixa resolução, com locução.

Você aprova o ritmo

Portão 4

Versão final + formatos. É a entrega de validação.

Depois vem a rodada de ajustes, como sempre

Asset faltando é bloqueio, não convite para inventar. Referência confusa vira uma pergunta ou um quadro de teste, não 900 quadros bonitos e errados.

02 · Etapa 08 · Formatos e variações

Uma timeline, vários vídeos.

Mesma história e mesmos tempos. Muda a abertura, o formato e o CTA. Cada formato tem layout próprio, calculado, nunca recortado do 16:9.

3 ganchos
  • A: começa pelo problema
  • B: começa pelo resultado
  • C: começa por um recurso que surpreende
×
3 formatos
  • 9:16: elementos empilhados, tipo maior
  • 1:1: texto mais justo, pausas curtas
  • 16:9: elementos lado a lado
×
2 CTAs
  • Ex.: "Baixe o app"
  • Ex.: "Fale com seu corretor"
=
18vídeos
Manifesto

Cada entrega leva a lista do que foi usado: versão de cada asset, do template e do render. Evita mandar vídeo com KV ou tela desatualizada.

02 · Onde entra o Blender

O 3D vira uma camada.

O Blender roda por script, sem abrir a interface. Eu escrevo a cena em Python, ele renderiza quadro a quadro. É a mesma lógica do render(t).

Figma

SVG do logo, das fitas, do objeto

→
Blender

extruda, luz, material e câmera por script

→
PNG com alfa

uma imagem por quadro, fundo transparente

→
HTML + ffmpeg

texto, interface e locução por cima

Bom para
  • Logo e fitas em 3D
  • Objeto: cartão, celular com a tela real
  • Tipografia 3D
  • Câmera passando pela cena
Ruim para
  • Personagem e gente
  • Movimento orgânico

Por script fica duro. Aí continua foto, vídeo gerado ou After.

Máquina

PC de casa (4080 Super, 16 GB): render final.

Notebook (3050, 6 GB): só prévia rápida.

Extra: o Magnific gera modelo 3D a partir de imagem, e ele entra no Blender.

02 · As ferramentas

Quase tudo grátis, metade já instalada.

Já usamos
  • Playwright
  • ffmpeg
  • faster-whisper
  • OpenCV e Pillow
  • NumPy
  • ElevenLabs
Somar
  • pyloudnorm: volume final medido
  • Pedalboard: compressor e limitador
  • librosa: batidas da trilha
  • Blender: 3D, no PC de casa
  • Kokoro: voz grátis e local pro animatic, sem gastar crédito
Código para estudar

howseen-ai/claude-motion-design
Mesmo stack nosso. Checagens de pulo, flash e loop, motion blur, volume.

cth9191/animate
Revisão de texto cortado e sobreposto, comparação com a referência.

Licença MIT · li só os READMEs
Pular
  • Remotion, HyperFrames, Motion Canvas: frameworks que não precisamos
  • Tone.js: som sintetizado
  • Natron e ComfyUI: o After e o Magnific já cobrem
  • Kits que são só prompt
03 · O que criar

O que dá pra
criar com isso.

Onde o código ganha: produto, interface, dados, tipografia e explicador. Seis ideias para a SulAmérica, seis para freela e portfólio.

03 · SulAmérica

No emprego

01 · HTMLTutorial do app

Tela real do app, cursor clicando, uma forma que nunca corta. Ex.: como agendar consulta.

02 · Blender + HTMLVinheta das fitas em 3D

Âmbar e laranja juntas, girando e assentando no KV. Vira abertura de qualquer vídeo.

03 · HTML + locuçãoExplicador de jornada

O formato do winback, agora com autocrítica e os três formatos de uma vez.

04 · HTMLDados que se desenham

Resultado de campanha pra apresentação interna: gráfico que se desenha, número que rola.

05 · HTMLPosts em loop

5 a 8 segundos, loop perfeito, a partir de carrosséis já aprovados.

06 · Blender + HTMLLançamento de produto

Carteirinha em 3D e benefícios em tipografia que se move. Ex.: linha Vital.

03 · Freela e portfólio

Por fora

01 · HTMLLogo animado

Item extra na entrega de identidade. Cabe em projetos como Rodrigo Leite e Murmur. Preço é com você.

02 · HTML · serviçoPacote de lançamento

1 vídeo, 3 ganchos, 3 formatos, 2 CTAs e rodadas definidas. Escopo fechado, preço pela entrega, não pelo esforço.

03 · HTML + BlenderShowreel BRXNV

Os cases do portfólio em 30 a 45 segundos, com a sua referência, não a de todo mundo.

04 · HTMLReceita animada

Sakura e Mundo OK: ingredientes entrando, passos marcados na batida da trilha.

05 · HTMLConvite animado

Festa ou chá: vídeo vertical curto pra mandar no WhatsApp.

06 · Blender · testarProduto em 3D

Joia girando com luz controlada (Murmur). Modelo gerado de foto pode sair impreciso: vale um teste antes.

Próximos passos

Por onde eu começaria.

01 · Eu

Ler o código dos dois repositórios MIT e separar o que entra.

02 · Eu

Montar a skill video-html: as 8 etapas, os portões e o checklist.

03 · No PC de casa

Instalar o Blender e fazer um teste curto das fitas em 3D.

04 · Piloto

Vinheta de 8 s: fitas em 3D + logo, em 3 formatos. Testa tudo de uma vez.

Pesquisa completa em estudio-motion/01-pesquisa/fontes.md
Fontes

De onde veio

rari (@0xwhrrari) · 01/10/2026

Artigo "Motion Engineering: Build a Video Studio Around Opus 5.5". A base do fluxo, do checklist e dos portões.

seeco (@seeconvm) · 02/10/2026

Releitura do artigo acima com casos virais. Acrescenta o contrato de render, as molas que somam e a medição da trilha.

eigen (@e1genqq) · 13/10/2026

Artigo sobre transformar o fluxo em sistema: dados separados da animação, validação antes do render, matriz de variações, relatório de revisão.

Listas de repositórios · 27 e 28/10/2026

rari (15), Serena (12) e eigen (7). Daqui saíram pyloudnorm, Pedalboard, Blender, Kokoro e os dois repositórios MIT.

Nossas peças

Vídeo da jornada winback e vídeo de lançamento da linha Vital: o que já funciona hoje.

Ressalva

Os números de visualização e de custo dos posts não foram conferidos. Dos repositórios, li só os READMEs, não o código.