Vídeo de IA encadeado quadro a quadro, sem pulos, e um gráfico animado em código em cada seção. Com a chave Parado, Ligado e Raio-X, que mostra o que é vídeo e o que é código.
Site em Movimento é uma skill para o Claude Code (e o Codex) que monta um site cujo topo é um vídeo contínuo: a câmera avança conforme a pessoa rola a página. O vídeo é gerado por IA em clipes curtos encadeados, e scripts conferem que não há pulos entre eles. Abaixo do filme, cada seção ganha uma animação feita em código que explica o que ela diz. Serve para quem quer uma página de abertura com cara de filme. Você precisa do Claude Code e, se quiser vídeo de verdade, de um gerador de vídeo (Kling, Agnes, Kie ou outro); sem gerador, ela monta tudo em código.
Cada site é desenhado do zero. O que se repete é o método, os scripts que conferem o trabalho e o motor da página.
Cada clipe começa no último quadro real do anterior. Scripts medem se o gerador respeitou o quadro inicial e final e se há corte escondido no meio.
Kling pela assinatura, Agnes, Kie ou o seu próprio (um comando com início, fim, prompt e saída). Sem gerador, o filme vira cenas em código.
Uma chave no canto troca entre Parado, Ligado e Raio-X. No Raio-X, cada coisa que se mexe ganha uma etiqueta: vídeo de IA (com o custo) ou código.
Nenhum passo avança sem passar no portão dele. Os portões são scripts sem IA, de custo zero.
Pedir a um modelo de imagem que "a câmera ande" costuma devolver a mesma foto. A skill recorta o centro do quadro anterior, amplia e só redesenha o detalhe: o eixo da câmera fica garantido.
vetor.py confere o sentido do filme antes de gastar; fixacao.py mede se o gerador respeitou os quadros; cortes.py e continuidade.py acham cortes e congelamentos.
Três críticos com contexto limpo julgam as capturas, nunca o código: briefing, sistema visual e ofício (contra a referência, às cegas). Veredito só PASSA ou REPROVA.
O gerador de vídeo é opcional: sem ele, o site sai em código puro.
Claude Code (ou Codex), ffmpeg, Python 3 com numpy e Pillow, Node 18+ com Playwright.
pip install numpy pillow npx playwright install chromium
Um dos motores: kling (CLI pela assinatura), agnes ou kie (chave sua) ou custom (qualquer comando).
kling login # uma vez kling account -q # saldo
Para os keyframes: um servidor local (flux2-klein) sem custo, ou o gerador que você preferir.
curl localhost:8000/health
Comandos reais. A skill conduz tudo a partir do passo 3; os comandos abaixo mostram o que acontece por baixo.
Clone o repositório e ligue a pasta da skill no Claude Code (e no Codex, se usar).
git clone https://github.com/inematds/site-movimento ~/projetos/site-movimento ln -s ~/projetos/site-movimento/skill/site-movimento ~/.claude/skills/site-movimento bash ~/.claude/skills/site-movimento/tests/motores-contrato.sh # 4/4 motores OK
Junte de 3 a 10 imagens ou links de sites que você admira, escolhidos por um motivo cada.
/site-movimento Quero um site em movimento para <assunto>. As referências estão anexadas. Leia as referências, me entreviste e use o motor kling.
Um lote só de perguntas curtas (assunto, clima, a viagem da câmera, seções, ação, motor). Nada é gasto antes do seu sim.
# plano Prova no Kling 720p: 3 clipes + 1 loop = 120 créditos (medido) # plano Padrão: 5 clipes + 2 loops = 210 · Completo: 7 + 4 = 330
O primeiro keyframe sai do prompt; os seguintes, por aproximação. A folha mostra se algum passo virou a câmera ou ficou parado.
python3 $S/motores/imagem_local.py kf/kf01.png "<cena de abertura>" python3 $S/scripts/kf_aproxima.py kf/kf01.png kf/kf02.png "<a cena mais perto>" --fator 1.8 python3 $S/scripts/folha_kf.py kf/ # ok / OLHE / QUEBRA? / PARADO
Confira o sentido de graça; depois o filme sai em ordem, cada clipe começando no último quadro do anterior.
python3 $S/scripts/vetor.py filme/roteiro.json # PASSA antes de gastar MOTOR=kling bash $S/scripts/filme.sh filme/ # fixacao + cortes a cada clipe python3 $S/scripts/montar.py site filme/clipes/c1.mp4:0:-1 filme/clipes/c2.mp4:1:-1 python3 $S/scripts/continuidade.py site/frames 4 # PASSA — um movimento só
A página usa o motor de rolagem e a chave de movimento. Os críticos julgam capturas; o texto e as travadas passam por portões.
bash $S/scripts/pacote-criticos.sh topo "http://127.0.0.1:8871/site/" node $S/scripts/portao-texto.js site/index.html # texto limpo node $S/scripts/verificar.js jank "http://127.0.0.1:8871/site/" # máx < 50 ms
Qualquer IA entra pelo motor custom. Teste a fixação no primeiro clipe antes de encadear o filme.
export MOTOR=custom export MOTOR_CMD='meu-cli --start {inicio} --end {fim} -p {prompt} --sec {segundos} -o {saida}' bash $S/scripts/filme.sh filme/
Uma cópia de teste da home do eventos.inema.pro. A câmera sai da pista ao anoitecer, entra no terminal e para no painel de partidas, e o painel real da página sobe por cima do filmado. Abrir o piloto.
Kling 720p, clipes de 5 s: 300 créditos no total. 150 na 1ª versão (3 clipes + loop, um loop refeito), 60 para tirar as letras do painel (30 perdidos: as letras nasciam no keyframe, e o 1º refazer partiu de um quadro que já tinha letras) e 90 no filme vertical do celular (3 clipes 9:16). Fixação entre 0,91 e 0,997, zero cortes, 285 quadros no computador e 361 no celular.
Moldura que desliza nas áreas, rota com avião na agenda, barra de gravação, linha que liga as quatro portas, arquivos entrando na pasta e um avião que decola no rodapé.
1ª rodada: lista de notícias vazia, frase final apagada, chave cobrindo conteúdo e o filme sem "pousar" no painel real (corrigidos). 2ª rodada: letras deformadas no painel e faixas pretas enquanto os quadros carregam. As duas foram corrigidas depois (painel sem letras, quadros espaçados primeiro e pôster no lugar do preto), mas ainda não passaram por uma 3ª rodada. Continua aberto: as cores herdadas do eventos (bloco amarelo do PRO, botões salmão).
Mesmo briefing para um modelo rápido e barato e para o modelo mais forte. Detalhes em 7-delegacao.md.
15 peças de interface julgadas às cegas: o modelo menor teve 2 de 5 aprovadas, o topo 8 de 10. O menor passou em todos os testes automáticos e errou a identidade visual.
Os três críticos rodados nos dois modelos deram os mesmos vereditos e a mesma maior diferença, em menos de um minuto cada.
O modelo menor julga e conserta; o topo cria. Ffmpeg, SSIM, cortes, montagem e capturas ficam com scripts, sem modelo.
Antes de inventar uma animação, a skill procura no catálogo: busca ⌘K, grade bento, 404 jogável, dia e noite, rodapés com física, cortina, flor, mapa e quebra-blocos, menu que se transforma, menu em tela cheia, navegação que pula, adesivo holográfico, mascote que segue o cursor, dock líquido, botões de geleia, letreiro de placas, rastro de imagens, galeria giratória e carregamento que revela a página. Todas com Raio-X.
Só o que foi feito está marcado como feito.
montar.py --vertical. No celular em pé a página usa frames-v/.