SaneHe/clay-themed-stopmotion

Vídeo de Stop Motion em Argila com Tema Genérico

Este skill é usado para gerar vídeos curtos com estilo visual estável e tema substituível. Ele descreve o método de produção genérico "textura de argila + camadas de assets + movimento em etapas + legendas e áudio"; cidade, data, personagens, pontos turísticos, veículos, enredo e efeitos sonoros devem ser lidos do brief atual do usuário, não podendo ser fixados em um único projeto.

A entrega final deve incluir um projeto HyperFrames executável, assets locais reais, áudio, exportação MP4 e uma folha de contato final para inspeção de quadros. Uma prévia HTML não renderizada não é o produto final.

Definir as Variáveis do Tema

Antes de escrever código, extraia e registre a partir dos requisitos do usuário:

• Frase do tema: quem está fazendo o quê em que mundo;
• Tempo, local, época, ponto turístico ou visão de mundo;
• Número de personagens, aparência, roupas, adereços e ações;
• Materiais visuais: argila, papelão, tecido, madeira, metal ou outras texturas artesanais;
• Paleta de cores e idioma da abertura/encerramento;
• Duração, proporção, plataforma, legendas e requisitos de áudio.

Se o usuário fornecer apenas um vídeo de referência, analise primeiro seus materiais, ritmo de câmera, composição, legendas e áudio, depois escreva as variáveis do tema em DESIGN.md. O vídeo de referência oferece método e atmosfera, mas não determina automaticamente a história do novo vídeo.

Fluxo de Trabalho Padrão

1. Analisar a referência e escrever hipóteses. Registre duração, proporção, ritmo de câmera, pausas de stop motion, materiais, posição das legendas, música e efeitos sonoros de eventos. Conteúdo que não puder ser confirmado deve ser escrito como hipótese, não como fato.
2. Escrever o documento de design primeiro. Crie DESIGN.md, STORYBOARD.md e uma lista de assets. Defina cores do tema, materiais, fontes, tempos de câmera, legendas, cues de áudio e texto de encerramento.
3. Gerar assets em camadas. Fundo, personagens, adereços, pontos turísticos, texturas e efeitos locais salvos como PNG/JPG/WAV locais. Personagens e adereços de primeiro plano devem usar PNG transparente, mantendo consistência de posição de câmera, iluminação, proporção e material.
4. Fazer auditoria de atribuição de assets. Abra cada PNG de personagem/adereço e liste os objetos já contidos nele, como mochilas, copos, cartões, chapéus, sombras etc. Cada objeto visível deve ter apenas uma fonte: o PNG do personagem, uma camada de asset independente ou HTML/CSS. Não se deve adicionar uma versão simplificada em CSS para um objeto já desenhado no PNG do personagem. Consulte references/compositing-audit.md.
5. Completar a cena estática primeiro. Use index.html como entrada raiz; para retrato, coloque uma composição independente em compositions/. Faça cada cena funcionar em estado estático antes de adicionar movimento.
6. Adicionar movimento determinístico em etapas. Use timeline pausada do GSAP, tempos de início e fim de cena e um número limitado de steps(n). Use translação suave, zoom, rotação, tremor e pausa para simular a sensação artesanal de stop motion. Proibido: Math.random(), Date.now(), repeat: -1 e transformações CSS/GSAP que se sobreponham.
7. Adicionar legendas e encerramento. Legendas são camadas HTML, legíveis em diferentes proporções. No encerramento, coloque apenas o texto oficial solicitado pelo usuário; proibido: preview, draft, test, Codex ou prompts internos.
8. Adicionar áudio em camadas. Música e efeitos sonoros de eventos como áudio local. Cada <audio> deve ter data-start, data-duration, data-track-index, data-volume e fade in/out; cues com início diferente de zero em composição retrato aninhada devem adicionar data-hf-media-start-basis="local". Áudio placeholder só pode ser usado em rascunhos, não na timeline final. Não use ruído branco diretamente para sons de ambiente como ondas, vento ou fogo; se não houver material adequado, deixe vazio ou reduza a densidade sonora. Antes da entrega, verifique cada trilha e mixagem conforme references/audio-layout.md.
9. Recompor para a plataforma. Retrato não pode ser apenas um corte de paisagem. Defina data-width="1080" data-height="1920", mantenha o tema principal, pontos turísticos chave e legendas, coloque o texto na zona segura central e reposicione personagens e adereços. Consulte references/vertical-export.md.
10. Renderizar, extrair quadros e revisar. Execute lint, validate, render, ffprobe e contact sheet. Verifique proporção, duração, legendas, hierarquia de assets, objetos duplicados, quadros flutuantes, marcações internas no final, vídeo H.264 e áudio AAC; ouça efetivamente trilhas individuais e a mixagem final nos primeiros 0–5 segundos, nas transições principais e no final. Verificações com ffprobe e nível de áudio não substituem a verificação auditiva. Consulte references/workflow.md e references/audio-layout.md.

Convenções Gerais do Projeto

• Mantenha um único index.html raiz; proporções alternativas em compositions/, para evitar que o HyperFrames encontre múltiplas entradas raiz.
• Use assets rasterizados reais para pontos turísticos ou tema principal; formas CSS geométricas são permitidas apenas para layout temporário, não como ativo visual final.
• O conteúdo do tema é determinado pelo brief, não pode ter cidades, linhas, datas, profissões ou personagens fixos predefinidos no skill.
• Cada adereço deve ser marcado na lista de assets como "embutido no PNG" ou "camada independente". Se for embutido, não desenhe uma camada CSS com o mesmo significado.
• Use IDs e comentários explícitos para adereços de ambiente, como catracas, fogões, portas, trens ou filetes de chuva, evitando que objetos de ambiente pareçam marcas coladas nos personagens.
• Não use logotipos reais de empresas, informações pessoais ou música não licenciada; dê preferência a placas genéricas, texturas geradas e áudio determinístico local.

Comandos de Validação

npm install
npx hyperframes lint
npx hyperframes lint compositions/vertical.html
npx hyperframes validate --no-contrast
npm run render
npm run render:vertical

Após exportar em retrato, verifique com o ffprobe-static do projeto real:

FFPROBE=$(node --input-type=module -e "import p from 'ffprobe-static'; console.log(typeof p === 'string' ? p : p.path)")
python3 scripts/check_render.py outputs/final-vertical.mp4 \
  --ffprobe "$FFPROBE" --width 1080 --height 1920 --max-duration 60

A contact sheet final deve incluir pelo menos a abertura, ação principal, transições, clímax/resultado e encerramento. Renderização bem-sucedida não equivale a correção visual: se aparecerem quadros brancos, marrons, azuis ou cinzas inexplicáveis, pontos turísticos duplicados, adereços duplicados, objetos flutuantes ou textos de visualização interna, volte para a auditoria de atribuição de assets e refaça.

Documentos de Apoio

• references/workflow.md: brief genérico, lista de assets, estrutura de cena e critérios de aceitação.
• references/compositing-audit.md: atribuição de adereços embutidos, verificação de camadas duplicadas e artefatos visuais.
• references/vertical-export.md: zona segura 9:16 e regras de recomposição.
• references/audio-layout.md: layout genérico de música/efeitos e verificação de loudness.