Contrato de Ativação
Use para sites/landings (qualquer stack) ou vídeos renderizados em código (showreel, promocional, clipe de lançamento) na linguagem visual de um motion designer: cortes de cor chapada sem margem, tipografia pesada e condensada em caixa alta, cantos de HUD mono, movimento cinético sincronizado com batida ou shaders 3D estilo risografia via WebGL2. Não use para dashboards, sites de documentação ou apps focados em formulários.
Regras Rígidas
- Todos os caminhos abaixo são relativos à pasta desta skill (
SKILL_DIR); execute ferramentas comonode "$SKILL_DIR/assets/palette/palette.mjs" …. - Responda no idioma do usuário; escreva o conteúdo do site/vídeo no idioma do projeto.
- Conclua a entrevista (intake) ANTES do design ou código. Nunca hardcode cores hex: a cor vem dos tokens de função do
palette.mjs(ink,bone,action,machine,on-*,hud-on-*). - Texto sobre um campo usa
on-<campo>; nunca renderize uma combinaçãoforbiddenPairscomo texto/fundo. - Um movimento marcante (signature move) por cena; alterne cenas intensas e suaves; nunca coloque 3 campos com a mesma função em sequência; poses-chave duram ≥1 batida; use uma única família de easing.
- Web: anime transform/opacity; respeite
prefers-reduced-motion(estados finais estáticos, sem loops, sem pins); pause canvases fora da tela; use pin apenas com viewport ≥1024px; sem overflow em 375px. - Nunca invente depoimentos, métricas ou clientes; mantenha o conteúdo existente.
- Rejeite a lista anti-slop (
references/design-system.md§8).
Portões de Decisão
| Situação | Ação |
|---|---|
| Baseado em tipografia, cortes de cor chapada | Swiss Kinetic: design-system.md, assets/web, assets/video |
| 3D, tátil, estilo pôster/impressão | Riso Shader: shader-print.md, assets/shader/ |
| Ambos | Híbrido: campo de shader atrás de tipografia cinética sobre áreas chapadas (tokens on-*) |
| Cor da marca conhecida | `palette.mjs --brand "#HEX" --format css |
| Preset | --list (mostra nome, tags, amostras) → --preset <nome> |
| Me surpreenda | Infira setor/mood do README, conteúdo, CSS ou palavras do usuário → --surprise --mood "<tags>" --seed <n>; explique o motivo; um novo sorteio via --exclude <nome> |
| Site | references/web-techniques.md; adapte assets/web/* para a stack |
| Vídeo | Copie assets/video/reel-template/; references/video-pipeline.md |
| Site + vídeo | Vídeo primeiro como storyboard, depois site a partir das mesmas cenas |
Passos de Execução
- Detecte o output (site/vídeo/ambos) e a stack; leia o conteúdo existente e os assets da marca.
- Entrevista (intake), UMA pergunta por turno: estilo (Swiss Kinetic / Riso Shader / Híbrido / Me surpreenda), depois paleta (Cor da marca / Preset / Me surpreenda).
- Fontes vindas do
fontPairingdo preset ou dedesign-system.md§2. BPM: prefira 120 (quadros inteiros por batida em 30 e 60fps; 144/150 em 60fps); outros tempos arredondam batidas para quadros. - Escreva uma tabela de cenas
# | cena | função do campo | movimento marcante | batidasusando o ritmo canônico (§7). - Construa a partir dos assets correspondentes.
- QA: web →
assets/qa/qa-screenshots.js(1440 + 390, overflow, console), julgue apenas após animações estabilizarem; vídeo → quadros de teste, render completo,ffprobe, folha de contato. - Relate resultados e o que não pôde ser verificado (ex.: áudio nunca é escutado).
Contrato de Saída
Retorne: paleta (+ motivo da surpresa) e resumo de contraste, tabela de cenas, arquivos criados/modificados, caminhos das evidências de QA, limitações conhecidas.
Referências
references/design-system.md— funções, tipografia, temporização, easing, movimentos, ritmo, anti-slop.references/palettes.md— entrevista, presets, formatos de tokens.references/web-techniques.md— GSAP/Lenis/canvas, acessibilidade, performance.references/video-pipeline.md— canvas determinístico → navegador headless → ffmpeg, áudio.references/shader-print.md— ray tracing WebGL2, meio-tom com 3 tintas, desregistro.