rendydev404/product-motion-ad

Product Motion Ad (Remotion + ElevenLabs)

Resultado final: MP4 1920×1080 30 fps, 30–45 segundos, hook forte, VO no idioma alvo que soa humano, SFX profissional, transições rápidas estilo referência, e fluxo = fluxo do produto original. Entregue ao usuário com SendUserFile.

Template testado está em template/ (pasta desta skill). Exemplo completo de 13 cenas de projetos reais está em references/example-scenes-threads-automation.tsx.txt e references/example-promo-threads-automation.tsx.txt. Leia references/script-and-storyboard.md antes de escrever o roteiro e references/elevenlabs.md antes de criar o áudio.

Princípios que não podem ser violados

1. O produto deve estar claro nos primeiros 8 segundos: nome do produto + "faz o que para quem".
2. Ordem das cenas = ordem do fluxo de uso do produto (registro/login -> setup -> processo principal -> resultado -> funcionalidades avançadas -> prova de resultado -> CTA). Não aleatório.
3. Uma frase de VO = uma cena = uma vantagem + sua prova visual (UI em movimento: formulário sendo preenchido, botão clicado, cartão de resultado aparecendo, números subindo). Não apenas texto.
4. Fatos da fonte do produto, não invenção: leia o código/landing/onboarding/página "como funciona". Números de exemplo (visualizações, pontuações) podem ser ilustrativos, mas informe ao usuário que são ilustração.
5. Ritmo rápido como na referência: transições de 10 frames (T = 10), animações dentro da cena aceleradas speed 1.5–3. Não desacelere a cena para preencher VO lento — corrija o VO.
6. VO humanizado: uma única tomada completa, estilo conversa, ritmo rápido, sem tags de emoção em cada linha. Não frases separadas (isso que deixa robótico).
7. Siga as regras de performance do usuário: meça uma vez no início e no final, não renderize repetidamente sem motivo.

Fluxo de trabalho

1. Coletar materiais (em paralelo quando possível)

• Produto: no repositório, procure texto de landing, onboarding, página de como funciona/funcionalidades, nomes de features na UI (Grep por strings da UI). Fora do repositório: peça descrição/URL. Escreva tabela fluxo de vantagens: Etapa | Ação do usuário | Vantagem | Prova visual (UI exibida).
• Marca: cores e fontes do CSS (globals.css, tema Tailwind, CSS da landing), logo de public/. Preencha template/src/theme.ts (C, GRADIENT, font, BRAND).
• Referência de estilo (se houver vídeo): extraia frames com ffmpeg nativo do Remotion e veja a contact sheet: npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png (filtros fps=/tile NÃO estão disponíveis no ffmpeg do Remotion; use -r e scripts/contact-sheet.cjs). Anote: fundo (blob borrado/grid de pontos), como o texto aparece, cortes secos, UI 3D, clique do cursor, glow, ritmo.

2. Roteiro & storyboard

Siga references/script-and-storyboard.md: hook de 3 batidas (curiosity gap), 1 linha ≤ 10 palavras por cena, estilo conversa, primeira frase iniciada com palavra de abertura ("Eh,") para que a palavra-chave não seja pronunciada errada no segundo 0, CTA curto. Mostre o roteiro + sequência resumida de cenas ao usuário apenas se o briefing for ambíguo; caso contrário, vá direto para a execução.

3. Projeto Remotion

• Copie template/ para uma nova pasta no repositório do usuário (ex. promo-video/), npm install.
• Se estiver dentro de outro repositório Next.js/TS: adicione essa pasta ao exclude no tsconfig.json raiz e ao globalIgnores do ESLint. A pasta já tem .gitignore (node_modules, out).
• Copie o logo para promo-video/public/ e defina BRAND.logo.
• Escreva cenas por produto em src/scenes.tsx (use o padrão dos exemplos: useFrame(), useRise/rise, glass/white, StepTag, Words, typed+Caret, Cursor, BlurFilter). Cena genérica makeFeature é apenas para protótipo.
• Preencha DEFS em src/Promo.tsx: ordem das cenas, cue (frase de abertura da fala VO), beats (hook), speed, transições, dark, sfx.

4. Áudio ElevenLabs (veja references/elevenlabs.md)

• VO em uma tomada -> public/vo/full.mp3; transcrição Scribe por palavra -> public/vo/words.json. Verifique a transcrição (palavra pronunciada errada? linha faltando?).
• Pacote SFX de 10 arquivos -> public/sfx/*.mp3.
• Timeline automática: cena começa 6 frames antes da frase cue ser pronunciada; SFX são colocados no tempo de design da cena (dividido por speed).

5. Render & verificação

• npm run typecheck e depois npm run render (porta 3456 — porta 3000 frequentemente ocupada pelo dev server Next, a renderização falhará com "not a valid Remotion project").
• Execute a renderização em background se > 2 minutos.
• Verifique o visual: node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chk e leia a sheet. Para segundos específicos, forneça uma lista de segundos. (A amostragem -r do ffmpeg frequentemente exibe frames iniciais vazios falsos — verifique segundos específicos se tiver dúvida.)
• Verifique: texto sem blur permanente, não cortado/quebrado, etiqueta de etapa não coberta pelo painel, animações-chave concluídas antes da troca de cena, texto na tela = palavras do VO.
• Envie com SendUserFile (exiba render), informe duração, tamanho, e o que não foi verificado (ex. nível de áudio não ouvido diretamente).

Armadilhas já ocorridas (evite)

Problema	Causa	Solução
Texto do hook com blur contínuo	valor de blur da fase anterior (out1) permaneceu 1	calcule blur por fase: apenas entrada/saída
Vídeo ficou lento	cena esticada para acompanhar VO lento	VO mais rápido e roteiro mais curto; speed mantido
VO robótico	clipes por frase + tag [excited] em cada linha + linguagem formal	uma tomada, estilo conversa, sem tags repetidas
Primeira palavra pronunciada errada ("akun"->"kurun")	v3 frequentemente erra na primeira palavra	comece com "Eh," / "Nah," e verifique a transcrição Scribe
Render falhou "getStaticCompositions undefined"	porta 3000 ocupada pelo Next dev	--port=3456
Erro fps=/tile	ffmpeg do Remotion limitado	-r + contact-sheet.cjs (sharp)
Frase quebrada em 2 linhas e avatar cortado	flex item encolheu	flexWrap: "nowrap", reduza a fonte
Painel cobrindo etiqueta de etapa	translateY da câmera muito grande	limite o movimento da câmera, scale(0.92)
Chip/cartões colidindo	posições polares muito próximas	verifique a contact sheet, ajuste ângulo/raio
useId() em url(#id) quebrou	id contém :	useFilterId() (sanitização)
MCP ElevenLabs não carregou após login	nova ferramenta aparece apenas em nova sessão	use a ferramenta diretamente se disponível; senão, claude -p headless (veja referências)
MCP falhou "Protected resource ... does not match"	host region	claude mcp add -s user --transport http elevenlabs https://api.us.elevenlabs.io/v1/mcp