site-to-reel

Site para Reel

Crie um curta-metragem vertical sobre um site usando o próprio site: páginas reais, cliques reais, estados reais. Cada frame é desenhado por um renderizador canvas como uma função pura do tempo, então capturado offline e codificado. Este skill é o fluxo de trabalho oficial destilado do reel Dawas Shlef. examples/dawas-shlef/ contém as timelines, falas, scripts de captura e notas de revisão daquele projeto como referência funcional. Trate-o apenas como referência. Não copie sua lista de cenas para um produto diferente.

Carregue junto com:

• video-director para os princípios de montagem e seus scripts scripts/check_timeline.py e scripts/qa_video.py.
• playwright-cli para cada etapa de navegador.

Se algum desses skills estiver faltando, avise. Não improvise ao redor.

Inegociáveis

Estes vêm do briefing que moldou o skill e se aplicam a todo projeto:

1. Apenas UI real. Capture o site local ao vivo. Mostre uma mudança de estado clicando no controle real e capturando o resultado real, nunca desenhando. Não invente telas, contagens ou notificações.
2. Deixe o mundo do usuário como encontrou.
   • Não redesenhe, modifique, publique ou implante o site.
   • Não lance campanhas nem envie formulários.
   • Crie apenas dados de demonstração, como um marcador, e remova-os depois. Registre o armazenamento antes e depois.
   • Nunca limpe dados existentes do usuário.
   • Pare os servidores e sessões de navegador que você iniciou. Deixe o servidor do site do usuário funcionando a menos que ele aprove a parada.
3. URL pública na tela, nunca localhost. A URL aparece cedo (por volta de 3 s) e no cartão final.
4. Afirmações ficam dentro de brand.json → claims. As palavras nunca são mais fortes que a fonte. Um crítico deve sinalizar qualquer outra coisa, por exemplo "sem necessidade de conta" quando o briefing não diz isso.
5. Vozes.
   • Nunca clone a voz de uma pessoa.
   • Nunca insinue que uma voz gerada é a gravação de uma pessoa real.
   • Um narrador TTS fala sobre o criador apenas na terceira pessoa, ou seja "feito por X", nunca "eu sou X". Linhas em primeira pessoa na tela são ajustadas.
   • Avise o usuário para rotular áudio de IA ao publicar.
6. Não chame um corte inacabado de final. Cortes silenciosos são "animáticos". Arquivos só são nomeados *-final quando o som existe e passou no QA.
7. Não afirme o que não mediu. Você não pode ver ou ouvir a saída. Relate as verificações que executou e os stills que olhou, e diga claramente o que ninguém viu ou ouviu, como pronúncia do TTS ou sensação em tempo real.
8. Nunca publique ou poste para o usuário. Você pode fazer upload para o GitHub deles quando solicitado, mas postar no Instagram e outras redes sociais é sempre responsabilidade deles.

Fluxo de trabalho (três portões de aprovação)

Estágio	O que você produz	Portão
0. Intake	Uma rodada de perguntas (abaixo). Leia o briefing, ativos e site. Preencha brand.json.
1. Tratamento e look	TREATMENT.md com a ideia em uma frase, gancho, lista de batidas com leituras, momento herói e afirmações. Um levantamento do site (somente leitura). 2–4 styleframes do renderizador real. Uma primeira timeline.json.	O usuário aprova.
2. Animáticos silenciosos	Capturas, a timeline completa, frames renderizados e codificados como *-animatic-silent.mp4. QA. Folhas de contato, transição e detalhes mais um storyboard, tudo a partir do MP4 codificado. Revisão crítica com uma rodada de correções. Notas de revisão.	O usuário aprova ritmo e enquadramento.
3. Finais	Narração (gravada ou TTS se o usuário escolher) ajustada à imagem aprovada. Trilha e SFX. Mixagem a −16 LUFS e ≤ −1 dBTP. Legendas. *-final.mp4. QA. Crítico com uma rodada de correções. Capa. Notas atualizadas.	O usuário ouve e aprova.

Use o modo ask-first quando o usuário estiver presente. Pergunte uma vez, depois faça todas as outras chamadas você mesmo e registre-as como DECISÃO: … porque … nas notas de revisão, para que cada uma possa ser revertida com uma resposta.

Perguntas de intake (uma rodada, opção recomendada primeiro)

Pergunte apenas o que o briefing e o site já não respondem.

1. O quê e para quem: a única coisa que o filme deve dizer, o público e o idioma/dialeto das legendas.
2. Plataforma e duração: Instagram Reels 9:16 a 1080×1920 (padrão), um corte principal de 45 s mais uma versão separada de 15 s, e se 16:9 é necessário (padrão não).
3. Fatos: as afirmações permitidas e a grafia exata da marca, nome do criador e URL pública.
4. Ativos: cores e fontes da marca, logotipo ou marca nominativa, e quais estados e funcionalidades do site mostrar.
5. Som: o usuário grava a narração (preferencial), ou TTS com divulgação, ou apenas música e legendas. Pergunte sobre direitos musicais.
6. Limites: o que não deve ser tocado (servidor do site, dados existentes do usuário, formulários).

Para "faça o vídeo agora" sem gravação disponível, pergunte como obter som. As opções são: música + legendas sem voz, o usuário grava, ou um narrador gerado. Se escolherem TTS, verifique o que está instalado antes de instalar qualquer coisa. Instalar edge-tts envia o texto do script para o serviço online da Microsoft, então obtenha o sim do usuário primeiro e deixe-o escolher a voz.

Estrutura do projeto

Copie templates/project/ para uma nova pasta de projeto e edite:

brand.json            nome, marca nominativa, criador, URL pública, tokens de paleta, fontes, afirmações, neverSay, voz, área segura
reel.html, reel.js    o renderizador (neutro em relação à marca; lê tudo da timeline)
vo-lines.json         linhas de VO: [início s, texto, fim s]
assets/fonts, assets/icons, assets/previews
capture3x/            capturas + boxes.json (escrito a partir da saída de tools/capture.js)
tools/
  survey.js           levantamento de página (somente leitura) (títulos, links, posições y, chaves de armazenamento)
  capture.js          capturas + caixas de chamada, dados de demonstração criados e restaurados
  cli3x.config.json / cli4x.config.json / render.config.json   configurações do playwright-cli
  build_timelines.py  timeline.json + timeline-ad15.json a partir de brand.json (+ vo/*.json)
  styleframes.js, stills.js, render-frames.js, shot-storyboard.js   scripts run-code
  make_vo.py, make_audio.py, make_srt.py                            voz, som, legendas
  review_frames.py, storyboard.py                                   folhas a partir do MP4 codificado

Comandos

CLI significa node "<argo>/node_modules/playwright/cli.js" cli, ou apenas playwright-cli se estiver instalado. Cada script run-code é um único async page => {}. Parâmetros viajam na query da URL da página, e --raw imprime apenas o valor retornado.

# captura (site local já em execução; sessão limpa em memória)
CLI -s=cap open --config=tools/cli3x.config.json "about:blank"
CLI -s=cap --raw run-code --filename=tools/survey.js
CLI -s=cap --raw run-code --filename=tools/capture.js      # salva {"caps": ...} em capture3x/boxes.json
CLI -s=cap close

# timeline + portão
python -X utf8 tools/build_timelines.py
python -X utf8 ~/.claude/skills/video-director/scripts/check_timeline.py timeline.json

# renderização (servidor estático temporário, parado depois)
python -m http.server 4380 --bind 127.0.0.1
CLI -s=render open --config=tools/render.config.json "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<dir absoluto frames>&times=1.2,24.5"
CLI -s=render --raw run-code --filename=tools/styleframes.js
CLI -s=render goto "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<dir absoluto frames>&from=0&to=1349"
CLI -s=render --raw run-code --filename=tools/render-frames.js   # filmes longos: execute em segundo plano ou em pedaços

# codificação (animático silencioso; para finais adicione -i out/audio/<film>-mix.wav -map 0:v -map 1:a -c:a aac -b:a 192k -ar 48000 -t <dur>)
ffmpeg -framerate 30 -start_number 0 -i <frames>/frame_%04d.png -frames:v 1350 -c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p -r 30 -vf setsar=1 -movflags +faststart out/reel-animatic-silent.mp4

# medição e revisão (sempre a partir do MP4 codificado)
python -X utf8 ~/.claude/skills/video-director/scripts/qa_video.py out/reel-final.mp4 --beats timeline.json --lufs -16 --tp -1 --out out/qa-reel
python -X utf8 tools/review_frames.py out/reel-final.mp4 timeline.json reel
python -X utf8 tools/storyboard.py out/reel-final.mp4 timeline.json reel
CLI -s=render goto "http://127.0.0.1:4380/out/storyboard-reel.html?shot=<abs>/out/storyboard-explained.png"
CLI -s=render --raw run-code --filename=tools/shot-storyboard.js

# estágio 3
python -X utf8 tools/make_vo.py && python -X utf8 tools/build_timelines.py && python -X utf8 tools/make_audio.py && python -X utf8 tools/make_srt.py

No Windows, execute Python como python -X utf8 com PYTHONIOENCODING=utf-8, caso contrário a saída em árabe quebra.

Ciclo de revisão

• Crítico. Após o estágio 2 e novamente após o estágio 3, forneça a um subagente de contexto fresco os MP4s, timelines, folhas e relatórios de QA. Peça uma lista ranqueada: deve-corrigir, deveria-corrigir, minúcias, cada uma com um timecode e uma correção concreta. Somente leitura, menos de 500 palavras, sem problemas inventados.
• Uma rodada de correções. Aplique uma rodada de correções e depois verifique novamente a partir do MP4 codificado.
• Correções com escopo. Para uma correção limitada a alguns frames, faça backup desses frames, re-renderize apenas aquele intervalo e depois compare com o backup. Frames fora da alteração devem ser idênticos byte a byte antes de re-codificar.
• O relatório do crítico é saída de modelo. Nunca conta como aprovação do usuário.

Entregáveis

• out/<film>-animatic-silent.mp4 (estágio 2) e out/<film>-final.mp4 (estágio 3).
• out/storyboard-explained.png, out/contact-sheet-<film>.jpg, out/review/, out/qa-*/.
• timeline*.json, vo-lines.json, vo/, out/audio/ (mix mais stems), out/subtitles-*.srt.
• out/cover/reel-cover.jpg e sua prévia de grade 3:4.
• voiceover-script-*.txt, marcado como narrado (motor, voz, divulgação) ou como não gravado.
• review-notes.md: metadados ffprobe, estrutura, cada verificação com seu número, a tabela do crítico e suas correções, DECISÕES, limitações declaradas claramente, comandos exatos e decisões deixadas para o usuário. O modelo é references/report-template.md.

Referências (leia quando chegar naquele estágio)

• references/motion.md: modelo de câmera, transições, temporização de texto, chamadas, legendas, cartão final, holds.
• references/capture.md: levantamento, captura, trocas de estado real, caixas, restauração de dados de demonstração.
• references/sound-and-voice.md: gravado vs TTS, ajuste de VO à imagem, silêncio herói, trilha, mixagem, legendas.
• references/instagram-reels.md: formato, zonas seguras, gancho, redação de CTA, capa, rótulo de IA.
• references/gotchas.md: todo bug que encontramos e sua correção.
• references/report-template.md: esqueleto das review-notes e mensagem final.
• examples/dawas-shlef/: o exemplo funcional completo (sem capturas ou fontes, então re-capture-as).