Zman2087/faceless-studio

Vídeo animado

Tudo aqui é renderizado em remotion/ com zero créditos. Dois níveis — sempre tente o nível 1 primeiro:

1. Compor cenas pré-construídas em uma especificação (minutos, sem código).
2. Adicionar um novo tipo de cena ao motor quando uma ideia genuinamente precisar (código, testado, depois reutilizável por todos os agentes).

Antes de renderizar localmente: se remotion/node_modules estiver faltando, execute cd remotion && npm ci (a primeira renderização também baixa o Chrome headless do Remotion, ~170 MB, uma vez).

Nível 1 — o kit de cenas

cena (shots[].type)	melhor para	campos chave
kinetic	o gancho, uma piada de efeito	text, highlight, per_word (0.18) — palavras aparecem uma a uma
title	uma única linha em negrito	text ≤ 6 palavras, highlight
number	um número impactante	value, prefix, suffix, decimals, caption, color — conta para cima
bars	como as coisas se comparam em tamanho	title, unit, items[{label,value,color}]
compare	eles vs você, mito vs fato, antes/depois	title, left{label,items,color}, right{…}
list	"3 coisas", faça/não faça	items, style tick/cross/number
timeline	como aconteceu	items[{year,text}]
chat	uma história contada em mensagens	title (contato), messages[{from: me/them, text, at}]
quote	uma linha com fonte	text, by
media	b-roll, uma foto, o clipe de IA	src, kenburns, headline, fit

Toda cena aceita label (legenda), stamp (carimbo numérico), bg (foto/vídeo escurecido atrás, com credit) e transition (fade padrão, cut, slide, zoom, wipe). Sobreposições (headline, textover, lowerthird, stamp) ficam sobre qualquer cena. Referência completa: remotion/SPEC.md. Um exemplo funcional de cada nova cena: remotion/examples/animated.json.

Receitas

• Explicador sem rosto (20–40 s): gancho kinetic → number → bars/compare → list → payoff title que ecoa o gancho. Narração como audio, legendas a partir de words, fundo musical suave em 0.08–0.12.
• História de mensagem de texto: gancho kinetic ("Ela respondeu às 3 da manhã") → uma cena chat por troca (at espaçado 0.8–1.4 s, sincronizado com a narração) → reviravolta title. Mantenha cada bolha ≤ 10 palavras.
• Inserção animada em vídeo com fala: CLIP_1 … number ou compare por 2–3 s no momento exato (transition: "zoom") … de volta ao CLIP_1 com start definido para onde o clipe deve retomar.
• Mito vs fato: compare com left.color: "danger", right.color: "good", depois um stamp "FALSO" no próximo title.

Planeje os beats com video-script (tools/beats.mjs ajusta as cenas à narração), depois:

cd remotion
node render.mjs job/spec.json --validate
node render.mjs job/spec.json job/final.mp4 --preview job/check.jpg --at 0.1,<meio de cada cena>,<final-1>

Sempre olhe a faixa de pré-visualização antes de entregar: gancho totalmente desenhado em 0.1 s, nada cortado nas bordas, sem texto sobreposto, cor de destaque legível, tag gerada por IA e marca d'água presentes.

Regras de estilo

• Marca de settings.brand (tema da especificação): uma cor de destaque, usada para a única coisa que importa em cada cena.
• ≤ 7 palavras por título (headline), ≤ 12 por texto sobreposto (textover), ≤ 4 itens por coluna de lista/comparação (a tela do celular é pequena).
• Uma cena permanece na tela pelo menos 1.5 s por linha de texto.
• Números devem corresponder a citations; nunca anime um número que você não referenciou.
• Sem logotipos de marcas, fotos de pessoas reais ou capturas de tela de conversas reais.

Nível 2 — um novo tipo de cena

Apenas quando nenhuma combinação acima puder mostrar a ideia (ex.: rota de mapa, anel de progresso, reação em tela dividida).

1. src/types.ts: adicione XShot = ShotBase & { type: "x"; … } e adicione à união Shot.
2. src/shots/Shots.tsx: escreva o componente ao lado dos outros — anime com spring/interpolate usando useCurrentFrame() (nunca animações CSS ou Math.random: as renderizações devem ser determinísticas), use t.font, t.accent, tone(t, color), tamanho para 1080×1920, depois adicione uma linha if (s.type === "x") body = … em ShotView. Se estiver na tela em 0 s (base === 0), desenhe-o completamente sem entrada.
3. render.mjs: adicione "x" a types e validação para seus campos obrigatórios (o agente verificador depende dessas mensagens).
4. SPEC.md + a tabela acima: documente. Adicione a examples/animated.json.
5. Teste: npx tsc --noEmit -p ., node render.mjs examples/animated.json out/animated.mp4 --preview out/animated.jpg --at … e veja o resultado.