KasunJayasanka/product-motion-video

Product Motion Video (60s)

0. Inputs (pergunte apenas o que faltar, uma mensagem, no máximo 3 perguntas)

• TOPIC: produto/ideia (obrigatório)
• BRAND: URL ou arquivo .md (opcional) -> extrair nome, slogan, 3 benefícios, cores, tom. No máximo um web_fetch.
• STYLE REF: opcional; inferir 3 traços (ritmo, tipo, paleta) em uma linha. Sem pesquisa aprofundada. Se o usuário deixou {placeholders} sem preencher, trate como vazios, declare suposições em uma linha e construa.

1. Plano (<=15 linhas de raciocínio, sem ensaios)

Paleta (fundo, traço, 1 cor de destaque, 1 secundária), 1 fonte para título + 1 fonte para corpo (sistema/Google Fonts com fallback), 8 cenas.

Estrutura padrão de 60 segundos (segundos):

1. 0-5 Gancho: tipografia cinética, uma afirmação ousada
2. 5-13 Problema: glitch/tensão, contadores
3. 13-21 Revelação: logo/produto morfismo
4. 21-31 Funcionalidades 1-3: cards de UI, ícones pops, escalonados
5. 31-41 Prova: gráfico animado/contagem numérica
6. 41-49 Fluxo/como funciona: caminho desenhado + nós
7. 49-56 Montagem: cortes rápidos, batidas de 0,4s, texto em marquee
8. 56-60 CTA: logo, slogan, URL, pulsação

2. Construção (um arquivo .html, JS vanilla, zero dependências, <=18KB)

Arquitetura, mantenha pequeno:

• Palco 1920x1080 redimensionado para caber via CSS transform; todas as cores como variáveis CSS.
• Timeline mestre: scenes=[{t0,t1,build(stage), update(p)}] com p em 0..1 a partir de um único relógio rAF t=(now-start)/1000. Sem cadeias de setTimeout.
• Funções auxiliares (escrever uma vez, reutilizar): ease(p) (cubic/expo/back), lerp, clamp, stagger(i,n,p), type(el,text,p).
• Vocabulário de movimento (usar >=6): tipografia cinética, máscaras reveladoras, desenho de linha com stroke-dashoffset, contagens, camadas de paralaxe, cartões escalonados, morfismo de forma (caminho SVG via lerped d), glitch (fatias clip-path), marquee, aproximação de câmera (escala+translação no palco), transições de tela entre cenas.
• Regras: sobrepor transições de cena em 0,4s; todo elemento com easing (nunca linear); máximo de 2 pontos focais simultâneos; segurar texto-chave >=1,2s; animar apenas transform/opacity.
• Controles: play/pause (espaço), barra de scrub, reiniciar, parâmetro de busca ?t=SEGUNDOS, window.seek(t) para exportação.
• Respeitar prefers-reduced-motion não reproduzindo automaticamente a cena de glitch piscante.
• Áudio opcional: sons sintetizados via WebAudio nas mudanças de cena (desligado por padrão, botão de mudo). Sempre áudio externo.

3. Entrega

• Publicar via ferramenta Artifact como página; se não houver ferramenta Artifact, criar_arquivo em /mnt/user-data/outputs + apresentar_arquivos.
• Responder: 2 frases (o que é, suposições). Sem narração cena por cena.

4. Exportação para MP4 (apenas se o usuário pedir)

Playwright headless: para f de 0..1799 chamar seek(f/30), capturar tela 1920x1080 -> quadros; ffmpeg -framerate 30 -i f_%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4. Se ffmpeg/playwright estiver faltando, informar e dar ao usuário esta receita em vez de tentar novamente.

5. Disciplina de tokens

• Não ler outras skills, não pré-visualizar, não fazer passada de polimento a menos que solicitado.
• Reutilizar os mesmos layouts de card/tipo entre cenas; variar movimento, não marcação.
• Escrever o arquivo em UMA chamada de ferramenta. Editar com pequenas substituições str_replace para revisões, nunca reescrever.
• Limitar pesquisa a 1 fetch + 1 search.