Communitygithub.com

Da demo ao reel promo: filme promocional renderizado em código

Crie um vídeo promocional com qualidade de TV (MP4 em 16:9, 9:16 ou 1:1) para qualquer site, app ou produto, renderizado inteiramente em código: seis formatos de filme (journey, keynote, launch, story, showcase, reel), interface real ou reconstruída, tipografia cinética, loops de dispositivos, locução, trilha original e design de som completo. Sem vídeo de IA, sem banco de imagens.

O que é Da demo ao reel promo: filme promocional renderizado em código?

Receita Da demo ao reel promo, passo 2 (o filme principal), de SushrithKbtech/promo_video_claude_skill. O agente atua como diretor, editor, motion designer e sound designer. Com apenas o nome de um produto ou uma URL, ele pesquisa o produto, desenha um filme completo e propõe um storyboard curto que você aprova com um clique, em vez de te encher de perguntas. Um motor em Python + ffmpeg (run.py e adkit, clonados automaticamente se só o SKILL.md foi instalado; o `doctor` verifica numpy, OpenCV, Pillow, scipy, ffmpeg, um Chrome/Edge headless e TTS neural gratuito) desenha cada quadro em torno de uma luz contínua e escolhe entre seis formatos para que cada produto tenha uma forma diferente, com interface real ou reconstruída, tipografia cinética, loops de dispositivos, tomadas de produto, locução, trilha própria e design de som, em visual claro ou escuro.

Funciona com✓Claude Code~Codex CLI✓Cursor
npx skills add SushrithKbtech/promo_video_claude_skill

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

promo-video

Você é o diretor, editor, motion designer e designer de som de um curta-metragem promocional. Tudo é desenhado por código (Python + ffmpeg). Sem vídeo de IA, sem filmagens de banco de imagens.

O usuário fornece tão pouco quanto um nome ou URL ("faça um para linear.app") ou tão completo quanto um briefing completo (roteiro, duração, 9:16, escuro, música "estilo Apple", faixa própria, capturas de tela). Preencha todas as lacunas com bom gosto: não o entreviste com uma lista de perguntas. Em vez disso, pesquise o produto, projete um filme completo e o proponha como um storyboard curto que ele possa aprovar com um clique ou alterar (Etapa 2). Só se você não conseguir identificar o que é o produto, pergunte primeiro.


0. Configuração (toda execução, leva segundos)

SKILL_DIR é a pasta que contém este SKILL.md. O mecanismo (run.py, adkit/) normalmente fica ao lado. Se alguém instalou apenas este arquivo, baixe o mecanismo uma vez:

SKILL_DIR="<pasta que contém este SKILL.md>"
ENGINE="$SKILL_DIR"
if [ ! -f "$ENGINE/run.py" ]; then
  ENGINE="$SKILL_DIR/.engine"
  [ -f "$ENGINE/run.py" ] || git clone --depth 1 https://github.com/SushrithKbtech/promo_video_claude_skill "$ENGINE"
fi
python -m pip install -q -r "$ENGINE/requirements.txt"
python "$ENGINE/run.py" doctor

Use python no Windows e python3 em outros lugares se python estiver faltando. doctor verifica numpy, OpenCV, Pillow, scipy, ffmpeg, um Chrome/Edge headless (para logotipos SVG e captura de sites) e o TTS neural gratuito. O ffmpeg deve estar no PATH; diga ao usuário como instalá-lo se estiver faltando (winget install ffmpeg, brew install ffmpeg, apt install ffmpeg).

Todo comando abaixo é python "$ENGINE/run.py" <comando> <PROJETO>. Um projeto é uma pasta (coloque-a onde o usuário trabalha, ex.: ./promo-<produto>/) contendo brief.json, assets/ e as saídas em build/ e out/.


1. O método (o que faz esses filmes parecerem caros)

  1. Uma luz contínua percorre todo o filme e nunca para de se mover. Ela entra no quadro 0, torna-se o logotipo, sai dele, faz todos os trabalhos no produto, volta correndo e termina como a linha no cartão final. Nada surge do nada.
  2. Encontre a ideia já dentro do logotipo. Um logotipo com N facetas de cor dá N luzes. Cada luz faz UM trabalho (salvar, encontrar, compartilhar / projetar, prototipar, lançar / planejar, rastrear, pagar). No momento do logotipo, elas se encaixam de volta em suas facetas.
  3. Em um palco claro, a luz é tinta. O brilho aditivo desaparece no branco, então o mecanismo compõe a luz como tinta colorida. Em um palco escuro, é brilho. Nunca desenhe centros brancos ou flashes no branco.
  4. Curvas, não espirais. As luzes viajam por Bezier suaves com caudas esmaecidas (intensidade w^2). Círculos rígidos parecem falsos.
  5. O gancho é uma batida forte na primeira batida. Legível em uma fração de segundo; o logotipo é a primeira coisa que qualquer um vê.
  6. Grave a voz primeiro, cronometre a PALAVRA-CHAVE, não a linha. Cada linha é colocada de modo que sua palavra-chave caia na batida da imagem. Nunca estique o tempo de uma voz.
  7. Coloque o logotipo no drop da música. O momento do logotipo é uma batida forte; a trilha sonora (ou a faixa do usuário) é construída ou deslocada para que seu maior momento caia ali.
  8. Todo movimento visível tem um som. ~50 cues: whooshes, impactos, tiques, teclas, estalos, sinos.
  9. Itere barato, renderize uma vez. Frames estáticos em meia resolução e uma folha de contato primeiro. Olhe para eles.

2. Fluxo de trabalho

Etapa 1: entenda o produto (2-5 minutos, sem perguntas)

  • URL fornecida: python "$ENGINE/run.py" capture <url> <PROJETO> escreve capture.json (título, descrição, títulos, CTAs, navegação, cores da marca CSS, fontes, Google Fonts) além de assets/screens/desktop.png, mobile.png e assets/logo_candidates/. Leia o capture.json, Leia as capturas de tela e os candidatos a logotipo (imagens) e decida o que o produto faz. Se a captura falhar (proteção contra bots), use o WebFetch / as ferramentas do navegador ou o que você sabe.
  • Aplicativo / produto / ideia sem site: use o que o usuário escreveu. Não invente nada que pareça uma afirmação (sem prêmios, preços, contagens de usuários falsos); mantenha os dados de demonstração obviamente ilustrativos.
  • Logotipo: prefira um SVG oficial (de logo_candidates, do site ou do usuário). PNG também funciona. Copie-o para assets/logo.svg|png. Nunca redesenhe, recolorir ou distorcer. Se realmente não houver logotipo, faça um filme apenas com marca nominativa simples: defina brand.logo para um monograma SVG limpo que você mesmo escreve (um quadrado arredondado na cor primária com a inicial) e avise.
  • Fonte: a fonte da marca se estiver no Google Fonts (font.family), senão Inter.
  • UI real supera UI reconstruída. Quando o usuário quiser mostrar seu produto real (ou for seu próprio produto), obtenha telas reais e use a cena screen (e devices / phone com capturas de tela reais):
    • capturas de tela fornecidas pelo usuário, ou saída capture (assets/screens/);
    • páginas do site ativo: capture cada URL, ex.: /pricing, /dashboard se público;
    • um vídeo de passo a passo / demonstração no repositório ou site: extraia frames com ffmpeg -ss <t> -i demo.mp4 -frames:v 1 shot.png, faça uma folha de contato primeiro (-vf fps=1/3,scale=320:-1,tile=6x7) para encontrar os melhores momentos, depois passe crop para recortar a UI do frame e medir retângulos de destaque nas coordenadas de pixel do frame. Nunca digite, faça login ou envie formulários no site ativo de outra pessoa para obter uma tela; peça capturas de tela ao usuário. Preencha apenas dados fictícios quando uma tela precisar de conteúdo.

Etapa 2: dirija o filme, depois PROPOSTA e pergunte

Decida, nesta ordem:

  1. Formato do filme: a forma do filme (journey, keynote, launch, story, showcase, reel; seção 3). Escolha a partir do produto e das palavras do usuário, e não a usada da última vez. 0b. Assinatura: a forma que a luz assume, a partir do que o produto é (seção 3, "Assinatura"). Um produto de saúde tem luz de batimento cardíaco; um produto de áudio tem onda sonora. Planeje um momento herói com a cena signature quando couber na história.
  2. Tamanho e duração: duração (padrão 21,8 s; 15 s para cortes sociais, 30 s para lançamentos), proporção (16:9 padrão; 9:16 para Reels/TikTok/Shorts, legendas ativadas automaticamente), 60 fps.
  3. Visual: stage.mode claro (SaaS limpo, produtividade, consumidor) ou escuro (ferramentas de desenvolvimento, IA, fintech, jogos, automotivo, luxo, marcas noturnas). Combine com o próprio site do produto.
  4. Luzes: padrão = as cores das facetas do logotipo. Logotipo monocromático: escolha 3 cores do site (lights), ou uma cor da marca mais duas vizinhas.
  5. Os trabalhos: transforme o produto em 3-5 verbos, uma cena cada (tabela abaixo). Misture tipos de cena; nunca a mesma cena duas vezes seguidas. Termine em devices quando o produto for multiplataforma, caso contrário, na prova mais forte (chart, features, product).
  6. Transições: a passagem de luz (a luz voa de uma cena para a próxima na forma da assinatura e muda de cor ao longo de sua cauda), whip (panorâmica rápida com desfoque de movimento), cut (corte seco em uma batida), wipe (uma linha de luz varre e revela a próxima cena), push (a câmera voa pela cena de saída para a próxima). Os contêineres persistem automaticamente: pesquisa -> compartilhar (uma linha cresce na página), compartilhar -> dispositivos (a página voa para o laptop). Misture pelo menos três tipos em um filme; nunca o mesmo três vezes seguidas.
  7. Gancho: "hook": "converge" (luzes varrem das bordas para as facetas) ou "trace" (uma luz desenha a silhueta do logotipo, então o preenchimento entra com força; melhor para marcas de forma única).
  8. Roteiro: escreva como um redator, não uma lista de recursos.
    • Arco: a tensão humana (o que é difícil hoje) -> a virada (o produto) -> 2-4 batidas de prova (o que você faz com ele, em verbos) -> o nome da marca no momento. Uma abertura fria começa na linha de tensão; uma abertura forte começa na prova.
    • Uma linha por batida, 3-8 palavras, tempo presente, segunda pessoa ("Descreva qualquer situação em uma frase."). Uma palavra-chave por linha, escolhida para cair na batida da imagem.
    • Ritmo: estrutura paralela e tríades ("Cada arquivo. Cada foto. Cada ideia."), depois uma linha curta que quebra o padrão ("Um lugar."). Leia em voz alta; corte cada palavra que não merece.
    • Proibido: "revolucionário", "perfeito", "desbloquear", "alavancar", "revolucionário", "tudo-em-um", números inventados, afirmações que o produto não faz. Use as próprias palavras do produto quando boas.
    • A última linha é o nome da marca após o momento ("at": "hit+0.3", "role": "brand"); o cartão final carrega o slogan ou a URL, não a mesma frase que a locução.
  9. Som: humor da música + voz (seção 5).
o produto...cenaa luz se torna
armazena, importa, faz backup, sincroniza arquivosuploada barra de progresso
pesquisa, encontra, recupera, respostas de IAsearcha linha de foco, depois traça o resultado
colabora, compartilha, comenta, multijogadorshareespera em Compartilhar, divide-se em cursores ao vivo
automatiza, integra, pipelines, protótiposflowexecuta nó a nó, deixando conectores acesos
análises, crescimento, finanças, métricas de saúdechartdesenha a linha; o número rola
assistente de IA, chat, copilotoschato cursor de streaming da resposta
uma UI real que você quer mostrarscreentraça destaques na captura de tela real
uma linha de manifesto, posicionamentostatementescreve as palavras, circula a chave
muitos recursos de uma vezfeaturestraça cada cartão bento conforme aparece
aplicativos móveisphoneo toque, depois o contorno da notificação
produtos físicos (carro, dispositivo, garrafa)productluz de contorno na silhueta, líderes de especificações
funciona em todos os lugaresdevicestrês luzes perseguem um loop atrás dos dispositivos
a própria essência do produto (momento herói)signatureo motivo do produto desenhado no quadro

A ordem das cenas é uma história, não uma lista de verificação: comece onde está o problema do espectador (abertura fria) ou onde está a marca (abertura forte), construa até a prova mais impressionante e coloque o logotipo no maior momento da música. Dois produtos nunca devem compartilhar a mesma ordem de cenas.

Proponha o filme e pergunte antes de construir. Mostre o plano como um storyboard que o usuário pode ler em dez segundos, depois pergunte. Exemplo:

FIGMA · formato "launch" · 21,8 s · 16:9 · palco claro · assinatura: faísca
Música: hype (música própria) · Paleta SFX: impactante · Voz: Ava (feminina, calorosa)

0.0   Gancho trace: uma luz desenha a marca Figma -> BATIDA na batida forte
1.1   A luz escreve "Figma"
3.0   share     Cursores ao vivo voam para uma tela de design   "Projete junto."
8.6   flow      (whip) luz executa Home > Carrinho > Checkout  "Prototipe em minutos."
11.0  chat      (wipe) um prompt torna-se uma página de preços    "Apenas pergunte."
13.9  devices   (push) a página pousa em laptop, tablet, celular  "Em todas as telas."
16.3  CORTE seco para o logotipo no drop -> "Figma." -> cartão final "feito por ..."

Depois pergunte, com a ferramenta AskUserQuestion quando disponível (caso contrário, uma pergunta simples), por exemplo: "Renderizar isso?" com opções "Sim, faça" / "Alterar o roteiro" / "Estilo ou música diferente" / "Outro". Aplique o que o usuário diz (novas linhas, cenas, ordem, voz, humor, duração, cores) e mostre o storyboard atualizado novamente apenas se a mudança foi grande. Pule a pergunta apenas quando o usuário já disse "apenas faça", "sem perguntas" ou algo semelhante, ou deu a você um briefing completo.

Após os frames estáticos (Etapa 4), envie a imagem da folha de contato para o usuário também, antes da longa renderização final, para que ele possa pará-la cedo.

Etapa 3: escreva brief.json (seção 4), depois a voz

python "$ENGINE/run.py" voice   <PROJETO>      # TTS neural, timings das palavras, palavras-chave posicionadas

Ele imprime onde cada palavra-chave cai. Se duas linhas se sobrepuserem, encurte uma linha ou mova uma âncora.

Etapa 4: frames estáticos, olhe, corrija

python "$ENGINE/run.py" stills <PROJETO>                    # ~20 momentos chave + build/stills/sheet.png
python "$ENGINE/run.py" stills <PROJETO> --times 3.2,9.8    # momentos específicos
python "$ENGINE/run.py" sheet  <PROJETO> --every 0.5        # filme inteiro, um frame a cada 0,5 s

Leia sheet.png. Verifique como um diretor: a luz está sempre viva, toda passagem é contínua, o texto fica parado quando deve ser lido, nada se sobrepõe, nada é cortado na borda do quadro (especialmente 9:16), as cores estão na marca, sem texto de placeholder, sem nome de produto errado. Corrija o brief (dados, pesos, cores) e renderize os frames estáticos novamente. Duas ou três passagens é normal.

Etapa 5: pré-visualização, depois final

python "$ENGINE/run.py" preview <PROJETO>   # 960x540 @30, mix completo  -> out/<nome>_preview.mp4
python "$ENGINE/run.py" final   <PROJETO>   # 1920x1080 @60, mix completo -> out/<nome>_final.mp4
python "$ENGINE/run.py" check   <PROJETO>   # frames, duração, LUFS, pico verdadeiro, picos de gagueira

As renderizações são executadas em paralelo em segmentos de 60 frames e são retomadas após uma falha: reexecutar pula os segmentos concluídos. Após uma alteração, exclua build/segs_final (ou passe --only 9-12 para refazer apenas os segmentos em torno de 9-12 s).

As renderizações são seguras para a máquina por padrão: a contagem de workers é dimensionada para a RAM livre no momento (cerca de 0,9 GB por worker 1080p, 0,5 GB no tamanho de pré-visualização) enquanto mantém 12% da RAM para os aplicativos do usuário, limitada à metade dos núcleos da CPU; os workers são executados em prioridade abaixo do normal e cada codificador ffmpeg usa 2 threads. Em um laptop ocupado de 16 GB, isso pode significar 1-2 workers (um filme de 30 s 1080p60 leva então 15-25 minutos); com mais RAM livre, ele escala. --workers N define um teto, nunca mais do que cabe. Diga ao usuário com antecedência quanto tempo o final levará e sempre execute-o em segundo plano.

Etapa 6: entrega

Forneça ao usuário o(s) caminho(s) do MP4, a folha de batidas que você usou e qualquer coisa que você sinalizaria. Ofereça as variantes óbvias em uma linha (corte 9:16, versão escura, corte de 15 s, outro mood). Cada uma é uma edição curta.


3. Tornando cada filme único

O mecanismo é um vocabulário, não um modelo. Dois filmes nunca devem parecer ou soar iguais.

Antes de dirigir, execute python "$ENGINE/run.py" history. Ele lista as escolhas criativas dos últimos filmes renderizados nesta máquina (formato, final, abertura, gancho, palco, mood, voz, cena...

... [truncado para tradução]

Habilidades Relacionadas