vibe-video — Gerador de Vídeos Curtos Impulsionado por IA (Código → MP4)
Transforme qualquer ideia em um vídeo curto e atmosférico usando apenas código. A IA escreve animações em Canvas/JS, renderiza quadro a quadro e compõe em MP4 com BGM opcional.
Quando Usar
Use esta habilidade quando o usuário quiser criar um vídeo curto (15s–60s) que seja:
- Explicador de conhecimento — fatos do Nobel, princípios científicos, insights de psicologia
- Metáfora emocional — apego, ansiedade, deixar ir, memória
- Promoção de produto — recursos do app, história da marca, anúncio de lançamento
- Observação social — padrões comportamentais, fenômenos culturais
- Arte conceitual abstrata — poesia visual pura, animações em loop
Fluxo de Trabalho (5 Etapas, Não Pule)
Etapa 1: Esclarecer (faça no máximo 3 perguntas)
Confirme com o usuário:
- Duração — 15s / 30s / 45s / 60s (padrão 30s)
- Proporção de tela — 9:16 (retrato) / 16:9 (paisagem) / 1:1 (quadrado) (padrão 9:16)
- Estilo — veja os Presets de Estilo em
style-presets.md - Tópico e arco emocional — qual é a mensagem central? que sentimento deve deixar?
Etapa 2: Produzir Storyboard
Produza uma tabela de storyboard antes de escrever qualquer código:
| Tempo | Descrição Visual | Legenda (≤20 caracteres) | Dica visual/auditiva |
|-------|------------------|--------------------------|-----------------------|
| 0-3s | ... | ... | ... |
Regras:
- Cada legenda permanece ≥2s; conclusão principal ≥3s
- Gancho nos primeiros 3 segundos (fato contra-intuitivo / abertura emocional / ponto de dor central)
- 5–8 tomadas no total, ritmo lento→rápido→lento
- As descrições visuais devem especificar: forma, cor, direção do movimento, movimento da câmera
AGUARDE a confirmação do usuário antes de prosseguir. Se o usuário solicitar alterações, modifique apenas as tomadas especificadas. Se mais de 3 tomadas mudarem, produza novamente o storyboard completo.
Etapa 3: Escrever Código de Renderização
Copie assets/templates/animation.js + animation.html como seu ponto de partida — eles implementam o sistema de camadas, fades de legenda, um fundo PRNG com semente e o contrato window.seek(t), com pré-visualização ao vivo no navegador incluída. Edite STORYBOARD e as funções draw*().
Consulte rendering-guide.md para a especificação técnica completa. Referência rápida:
// Animação orientada por tempo — cada visual é uma função pura de t
// (sem Math.random(), sem Date.now() — use um PRNG com semente se necessário,
// para que qualquer quadro seja re-renderizado de forma idêntica para paradas e renderizações retomadas)
function seek(t) {
// t = tempo atual (segundos)
// Retorna o estado visual para este quadro
// Use interpolação linear para posição/opacidade/escala
}
// Sistema de camadas
// Camada 0: Fundo (gradiente / partículas)
// Camada 1: Assunto principal
// Camada 2: Decoração dinâmica (fios de luz / partículas / linhas)
// Camada 3: Sobreposição de legenda
// Exportação
// Playwright headless → captura de tela de cada quadro → composição com ffmpeg
Etapa 3.5: Storyboard → prompt H3 (pré-voo)
Insira isso entre o storyboard confirmado e a primeira linha do código de renderização. Storyboards são escritos para humanos; H3 precisa de uma gramática diferente. Traduzir antecipadamente é o que previne o único erro irreparável neste pipeline — uma tomada de IA que redesenha um personagem que você precisava fiel ao modelo.
# lint primeiro: lacunas na linha do tempo, janela H3 (4–15s), atribuição de engine, estimativa de crédito
node assets/templates/lint-storyboard.js examples/storyboard-sample.txt
Em seguida, por tomada H3, emita um bloco de prompt de seis seções e copie seus números de câmera e marcas de corte de volta para o código de animação, para que as duas camadas se movam juntas.
Procedimento completo, regras de campo, checklist e a tabela de lint: storyboard-to-h3.md.
Etapa 4: Renderizar & Compor
Pré-visualize os stills primeiro — verificar um quadro leva ~1s, um render completo leva minutos:
# verificação rápida em t=0 / 4 / 10s (usa automaticamente o Edge ou Chrome instalado)
node assets/templates/still.js --html animation.html --times 0,4,10
# renderizar quadros (12–15fps geralmente é suficiente; movimentos suaves se beneficiam de 24–30)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 15
# compor (defina FFMPEG=/caminho/para/ffmpeg se não estiver no PATH)
bash assets/templates/composite.sh ./frames output.mp4 30
# com BGM
bash assets/templates/composite.sh ./frames output.mp4 30 bgm.mp3
# híbrido: camada Canvas sobre uma placa de atmosfera gerada por IA (quadros transparentes, sem keying)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 56 --alpha true
bash assets/templates/composite.sh --overlay plate.mp4 ./frames output.mp4 30
Problema no Windows: se bash composite.sh se comportar mal (shim do Git Bash / PATH reduzido), execute o ffmpeg do Node com child_process.spawn diretamente — consulte rendering-guide.md Troubleshooting.
Comandos manuais legados:
# Renderizar quadros
node render.js # gera frames/frame_0001.png ...
# Compor com ffmpeg
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# Com BGM
ffmpeg -framerate 30 -i frames/frame_%04d.png -i bgm.mp3 -c:v libx264 -c:a aac -pix_fmt yuv420p -shortest output.mp4
Etapa 5: Entregar
Entregar: arquivo MP4 + storyboard + código-fonte. Tamanho alvo do arquivo: <50MB para 30s.
Arquivos nesta Habilidade
| Arquivo | Propósito |
|---|---|
SKILL.md | Este arquivo — definição principal da habilidade |
style-presets.md | 6 presets de estilo visual com paletas de cores e dicas de renderização |
rendering-guide.md | Especificação técnica: renderização Canvas, easing, regras de determinismo, solução de problemas |
metaphor-library.md | Mapeamentos de metáforas visuais para conceitos abstratos |
caption-guide.md | Tipografia de legendas, temporização e regras de tom |
bgm-guide.md | Guia de seleção de BGM por tipo de vídeo |
storyboard-to-h3.md | Pré-voo: lint do storyboard + blocos de prompt H3 de seis seções antes de escrever código |
../assets/templates/lint-storyboard.js | Linter de storyboard: lacunas na linha do tempo, janela H3 4–15s, atribuição de engine, estimativa de crédito |
../assets/templates/animation.js + animation.html | Esqueleto pronto para editar (camadas, legendas, fundo com semente, pré-visualização ao vivo) |
../assets/templates/render-playwright.js | Renderizador de quadros: detecção automática de navegador (Edge/Chrome/chromium), capturas de tela sincronizadas com pintura |
../assets/templates/still.js | Renderizador de quadro único para verificações rápidas e baratas |
../assets/templates/composite.sh | Compositor ffmpeg (vídeo / vídeo+BGM, sobrescrita FFMPEG=) |
../assets/templates/render-template.js | Variante Node-canvas (sem necessidade de navegador; CSS/fontes limitados) |
Exemplos de Prompts
Explicador de Conhecimento
Faça um vídeo de conhecimento de 30s 16:9 sobre por que cortar cebolas faz você chorar.
Estilo: tech-blueprint. Arco: fenômeno → mecanismo → solução.
Metáfora Emocional
Faça um vídeo emocional de 30s 9:16 sobre possessividade.
Estilo: soft-glow. Metáfora visual: fios de luz envolvendo → afrouxando → vagalumes.
Promoção de Produto
Faça uma promoção de produto de 15s 9:16 para um app de foco.
Estilo: minimal-line. Arco: ponto de dor → solução → resultado.
Licença
MIT — veja o arquivo LICENSE. Gratuito para uso pessoal e comercial.