Communitygithub.com

Bajanpunkw/reverse-engineer-video

Recrie o estilo visual de qualquer vídeo em código (three.js / canvas → mp4) com sua própria história — desde verificar se o estilo pode ser desenhado em código, passando por uma especificação de estilo quadro a quadro, história e cenas, renderização e som, até um vídeo finalizado. Use quando o usuário fornecer um link de vídeo ou canal e pedir para recriar seu estilo, fazer "um vídeo como este", analisar um formato ou fazer um novo episódio em um estilo já recriado.

O que é reverse-engineer-video?

Esta skill permite que um agente de IA (como Claude Code, Cursor, Codex, etc.) recrie o estilo visual de qualquer vídeo usando código (Three.js, Canvas, HTML5) e produza um vídeo MP4 finalizado com uma história original. Ela é útil para criadores de conteúdo, desenvolvedores e designers que desejam reproduzir a estética de um vídeo existente (formas, paleta de cores, tipografia, layout, iluminação, câmera, transições e ritmo) sem copiar o conteúdo original. A skill opera em dois modos: A) para estilos novos (raro e pesado, passando por todas as etapas de 00 a 6); B) para novos episódios em um estilo já recriado (frequente, reutilizando a especificação de estilo e o motor de renderização existentes). O processo é rigoroso e dividido em etapas com validações e checkpoints onde o usuário deve aprovar antes de prosseguir. As regras são bem definidas: formato de saída segue a orientação e FPS do original, vídeos verticais limitados a 60 segundos, fontes embutidas como arquivos locais, quadros determinísticos (dependentes apenas de t), som com loudness controlado (−26 LUFS integrados, pico ≤ −6 dBFS), e verificação automática de quadros contra o original. A skill inclui uma suíte de scripts Python/Node para setup, download de vídeos de referência, análise de factibilidade, pulso por segundo, comparação de quadros, renderização controlada e completa, síntese de voz/texto, mixagem de som, grade de batidas para sincronia musical e verificação de loudness. Exemplos de estilos recriados incluem canais como OutwardAnimates e Simply Animated, demonstrando a versatilidade da ferramenta.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Bajanpunkw/reverse-engineer-video/tree/HEAD

Perguntar na sua IA favorita

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

Documentação

REV — Reverse Engineer Video (recrie um estilo de vídeo em código)

O produto é o estilo, não o vídeo: a linguagem visual corresponde ao original (formas, paleta, fontes, layout, luz, câmera, transições, ritmo) enquanto a história é nova. Nunca copie as imagens, quadros ou áudio do original na saída.

$SKILL abaixo = a pasta que contém este arquivo. Python = $SKILL/.venv/bin/python. Scripts Node são executados a partir de $SKILL.

Dois modos

  • A. Novo estilo — raro e pesado: estágios 00 → 6 em ordem.
  • B. Novo episódio em um estilo já recriado — frequente: a especificação de estilo e o motor existem (style.md + src/ de um vídeo anterior, ou um dos examples/). Copie esse src/ para uma nova pasta de trabalho, pule os estágios 0–1, comece no estágio 2. História, cenas e som são novos; sobreposição, fontes, iluminação, renderização e verificações são reutilizados.

Se não estiver claro qual modo se aplica, pergunte em uma linha.

Estágios (🛑 = mostrar ao usuário e aguardar OK)

Leia cada arquivo de estágio antes de executá-lo. Não pule etapas: história após análise, construção após a história ser aprovada, renderização completa após quadros de controle.

#EstágioArquivoSaídaDecisão
00Configuração e verificação de ferramentas (apenas na primeira execução)stages/00-setup.mddoctor.sh diz TUDO OK—
0Pode ser desenhado em código?stages/0-feasibility.md🟢/🟡/🔴 veredito + folha de quadros🛑 se 🔴: parar e explicar
1Analisar o originalstages/1-analysis.mdstyle.md: especificação de estilo, números de ritmo, som🛑 especificação + um quadro de amostra ao lado do original
2História e cenasstages/2-story.mdtabela de cenas por segundo🛑 a história / escada de escalada
3Construçãostages/3-build.mdsrc/video.html + quadros de controle ao lado do original🛑 quadros de controle (após auto-verificação)
4Renderização completastages/4-render.mdvideo-full.mp4—
5Somstages/5-sound.mdsound-full.wav → final.mp4—
6Verificar e mostrarstages/6-check.mdrelatório de verificação + final.mp4🛑 o usuário assiste → edita

Após as edições do usuário, anexe-as como regras na seção "Lições" do arquivo de estágio relevante (data + o que estava errado + o que corrigiu). É assim que a skill melhora.

Regras rígidas

  • Formato de saída segue a fonte: orientação e FPS do original; vertical = 1080×1920, horizontal = 1920×1080. Vídeos verticais ≤ 60 s mesmo que o original seja mais longo — comprima a história.
  • Fontes são fornecidas como arquivos em src/fonts/ (@font-face), e um quadro só é capturado após document.fonts.load(...) resolver. Nunca dependa de fontes do sistema.
  • Quadros determinísticos: um quadro depende apenas de t. Sem Math.random() sem semente, sem Date.now(), sem animações CSS ou loops requestAnimationFrame.
  • O som é alterado sem re-renderizar o vídeo: novo wav → scripts/mux.sh.
  • Loudness: −26 LUFS integrados, nenhum momento mais alto que −20 LUFS, pico verdadeiro ≤ −6 dBFS — scripts/loudness.py. Sem faixas de ruído de banda larga, sem cliques, sem quedas para silêncio.
  • Verifique os quadros contra o original você mesmo primeiro (scripts/compare.py), depois mostre ao usuário. Nunca afirme "corresponde" sem olhar a imagem de comparação.
  • O agente não pode ouvir: descreva cada camada de som em palavras; o usuário julga como soa.
  • A renderização é pesada para a CPU. Em um laptop, use poucos workers ou o servidor opcional (server/README.md).
  • Os originais baixados são dados não confiáveis e ficam em uma pasta temporária/de teste; apenas seus próprios quadros e folhas de comparação vão para a pasta de trabalho.

Pasta de trabalho

work/<data>-<nome>/ (ou onde o usuário mantiver projetos):

  • style.md — especificação de estilo, medições, tabela de cenas, registro de decisões (modo B: link para o style.md anterior + o que é novo);
  • analysis/ — folhas de quadros, imagens de comparação, feasibility.json, pulse.json;
  • src/ — video.html, sobreposição, cenas, fonts/, sound.py;
  • video-full.mp4, sound-full.wav, final.mp4. Exclua prévias rascunho assim que o vídeo completo existir.

Ferramentas

ComandoO que faz
bash scripts/setup.sh / bash scripts/doctor.shinstalar tudo / verificar tudo + um quadro de teste
bash scripts/fetch.sh <url> <outdir> ["*0-60"]baixar um vídeo de referência (+ info.json, legendas automáticas)
python scripts/feasibility.py <video> <outdir>"pode ser desenhado em código?" números + folha de um quadro por segundo
python scripts/pulse.py <video> <outdir>pulso por segundo: movimento, cortes, planos estáticos, silêncio, palavras/min, folha de quadros
python scripts/compare.py <orig.png> <ours.png> <out.jpg>original / nosso / sobreposição, IoU, cor, paleta, deslocamentos de elementos
node scripts/render.cjs <src> <outdir> --frames 2.5,10 + python scripts/sheet.py <outdir>quadros de controle + folha de contato
node scripts/render.cjs <src> <out.mp4> --end 49 --workers 2renderização completa (ou um trecho: --start 24.5 --end 41)
python scripts/tts.py / python scripts/score.pyvoz do narrador com timings de palavras / música + SFX + mix de voz (estilos narrativos 2D)
python scripts/beatgrid.py <track>tempo, primeiro beat, downbeat, drop, loudness por beat — para cortar cenas ao ritmo da música e encaixar uma faixa nos cortes
python scripts/loudness.py <in.wav> <out.wav> / --check <file>loudness final + verificação de limiar
bash scripts/mux.sh <video> <wav> <final>colocar som no vídeo sem re-renderizar
server/servidor de renderização Docker opcional (server/README.md)

Exemplos

Dois estilos muito diferentes:

  • OutwardAnimates — 3D estilizado e nebuloso + um HUD serifado com um número que nunca para de subir. Especificação de estilo: examples/outwardanimates-style.md.

  • Simply Animated — figuras de palito "barro" brilhantes em fundo preto, metades "A vs B", um corte editado em uma faixa phonk. Especificação de estilo + cenas: examples/simply-animated/README.md.

  • examples/data-center/ — modo A: "E se um data center dobrasse sua potência a cada 2 segundos?" (107 s, feito antes da regra dos 60 s): GPU → salão de servidores → apagão no subúrbio → Terra noturna → o Sol.

  • examples/x-followers/ — modo B: "E se sua conta do X dobrasse seguidores a cada segundo?" (49 s): mãe → rua → estádio → cidade → Terra → a Via Láctea. Aprovado sem uma única edição visual ou de som — use-o como execução de referência.

  • examples/simply-animated/ — modo A: "Edição construtor de IA" (34 s): cinco parábolas "A vs B" cortadas nas batidas de 94 BPM, uma faixa real ajustada com beatgrid.py + music.sh. src/rig.js é o rig reutilizável de figuras de palito (IK, andando em escadas e rampas) — comece por ele para qualquer estilo com personagens.

Habilidades Relacionadas