johdav999/VideoAIAgent

cinetic

Você está dirigindo um curta-metragem, não animando uma página web. Imagem, texto e som são um sistema único, dirigido por um único arquivo de timeline, e nada está finalizado até que seja renderizado, medido e criticado.

• Motores. Remotion 4.0.529 (React, orientado a quadros) é o padrão. HyperFrames 0.8.79 (HTML com uma timeline GSAP pausada) é a alternativa. O ofício é independente do motor; a §7 lista as regras que diferem por motor.
• Números. Cada número aqui é um padrão comprovado de trabalhos já entregues: um ponto de partida do qual você pode se afastar quando tiver uma razão declarada. Não é uma lei da natureza.
• Marca. Quando o usuário fornece uma marca (cores, fontes, logotipo, imagens, tom), a marca vence. Os padrões de gosto cobrem as partes que você precisa inventar.
• Caminhos. Caminhos como scripts/render.sh funcionam a partir da raiz do skill e também dentro de um projeto de filme, porque scripts/new-film.sh copia cada script para dentro do projeto. Todo script, exceto brand-svg.ts (que brand-kit.sh chama), imprime --help.
• Exemplo trabalhado. references/worked-example.md percorre Tessel, um filme de lançamento de 33 s a 1920×1080 e 60 qps, e mostra cada regra abaixo em uso, incluindo os erros. Leia-o uma vez antes do seu primeiro filme.

A barra

O alvo é um filme que as pessoas assistam duas vezes: uma ideia que o produto possui, contada em imagens, onde cada quadro parece escolhido e nada está ali para preencher espaço.

• Substância antes do polimento. Mostre a coisa específica e inteligente que este produto faz, aquilo que um produto mais simples não faria. Movimento impecável em torno de uma afirmação genérica ainda perde para um filme bruto que faz o espectador pensar "oh, isso é inteligente".
• Seu próprio visual. Cada marca recebe uma linguagem visual derivada de seu nome, seu produto e sua personalidade, dentro das Proibições rígidas abaixo. Restrição não significa decoração; não significa um estilo minimalista único para tudo.
• Ultra limpo e suave. Quadros limpos e modernos, com ideias criativas e coreografia. Cada movimento é suavizado, ponderado e suave a 60 qps: sem tremor, sem estouros e sem efeitos que substituam ideias.
• Visual, não narrado. A ideia se lê com o som desligado; as palavras confirmam o que a imagem já disse.
• Peso e imobilidade. O movimento tem massa, chega na batida e então descansa, para que os momentos rápidos tenham impacto.
• Som que faz a imagem parecer melhor: cada batida é causada por algo que você pode ver.
• Restrição sobre decoração. Na dúvida, remova.
• Prova, não impressão. O processo abaixo existe porque nada disso pode ser julgado no editor ou no Studio: você só sabe depois de assistir à renderização real e medi-la.

Proibições rígidas

Quando você inventa o visual, nenhum destes aparece, nunca. Eles são os sinais mais rápidos de trabalho gerado, e este skill existe para fazer filmes que não parecem gerados. lint-film.mjs verifica os tokens e estilos para eles, e os críticos verificam os quadros.

• Palavras:

  • rótulos de sobrancelha ou chute acima de um título;
  • taglines empilhadas e "Apresentando…";
  • paredes de texto e texto de preenchimento aleatório: legendas mono decorativas, métricas falsas, rótulos que ninguém precisa, lorem ipsum.

  Cada palavra na tela merece seu lugar.

• Tipografia: tipos serifados, e estilos itálico ou oblíquo, incluindo uma inclinação que falsifica um. Use uma sans-serif limpa e moderna, mais uma mono para código ou números se o produto precisar.

• Cor:

  • laranja, âmbar, bege, creme, bronze ou areia, como acento, papel ou brilho;
  • neon: acentos muito brilhantes e saturados, brilhos, bloom e halos;
  • roxo, violeta ou índigo, e gradiente roxo-para-azul ou multiton;
  • vidromorfismo.

• Decoração:

  • emoji e ícones de estoque;
  • brilhos representando "IA", partículas, confetes, lens flares e chuva de código;
  • ultrapassagem elástica em qualquer coisa que não esteja pousando.

O que resta é abundante: tinta e papel (claro ou escuro, neutro ou frio), um acento com significado de qualquer família de matiz fora das proibidas (vermelho, verde, ciano, azul, amarelo), uma sans-serif, e movimento ultra limpo e suave, suavizado, ponderado, com motion blur e livre de tremor. A criatividade vai para a ideia, o dispositivo e a coreografia, não para efeitos.

Se o usuário fornecer uma marca que inclua um destes (sua palavra-marca serifada, seu laranja), a marca vence, porque é a identidade deles e não um padrão. Registre em BRIEF.md para que os críticos não sinalizem, e marque as linhas que o definem com // cinetic:brand-supplied <o que> para que o lint as aceite.

1. Formatos e padrões

Escolha uma linha primeiro. Ela define o comprimento, a densidade e a lista de arquivos a entregar. A receita para cada formato está em references/formats.md.

Formato	Duração	qps	Grade (BPM)	Batidas de história	Palavras na tela	Som	Entregáveis
Filme de lançamento / teaser	20–45 s	60	120	8–10 por 30 s	≤ 20–35 no total	partitura completa + SFX	Mestre 16:9, re-layouts 9:16 e 1:1, pôster, kit de marca se inventado
Vídeo de produto / recurso	8–30 s	60	100–120	1 recurso por 8–10 s	≤ 15	base leve + SFX de UI	mestre, pôster
Loop de recurso	4–15 s, compassos inteiros	60 (GIF 25)	qualquer; compassos inteiros	3–5	≤ 8, lê mudo	opcional	MP4, WebM, GIF, junção sem emenda
Sting de logo	3–8 s	60	120	2–4	nome + ≤ 4	uma batida afinada + cauda	MP4, ProRes 4444 com alfa (seguro e limpo), pôster, kit de marca se inventado
Walkthrough de UI	20–90 s	60	90–110	1 capítulo por 2–4 compassos	≤ 6 por legenda	base + SFX de UI	mestre, legendas SRT

Use 60 qps sempre que UI, texto ou a câmera se mover. Em 30 qps, derivações lentas mostram passos e movimentos rápidos estroboscópicos, e 24 qps nunca é certo para UI. Um GIF é a única exceção: exporte a 25 qps (ou 50) a partir do mestre de 60 qps, porque os atrasos de quadro GIF são centésimos de segundo inteiros e 30 qps toca 11% mais rápido.

2. As cinco leis

1. Uma ideia, específica para este produto. Você pode dizer o filme em uma frase, e a prova mostra o que este produto faz que a versão óbvia ou mais simples não faria. Restrição se aplica à decoração e ao texto, nunca à inteligência do produto: se o recurso é inteligente, o filme mostra a parte inteligente. Por que: um espectador leva uma coisa, e um filme que seria igualmente verdadeiro para um concorrente, ou para um recurso mais burro, não lhes dá nada para levar.
2. Um dispositivo de história. Um objeto, forma ou cor viaja por cada cena e nunca pisca em um corte. Em um filme de lançamento, idealmente se resolve na marca no final; em um loop de recurso ou vídeo de produto, é a unidade sobre a qual o produto atua (o cartão, a linha, o arquivo). Encontre o objeto que este produto possui. Um ponto, linha ou bloco simples é o padrão preguiçoso, e também é o visual dos próprios exemplos deste skill. Por que: torna o filme contínuo, permite que o filme seja lido com o som desligado, e um objeto próprio é o que torna o filme inconfundivelmente desta marca.
3. Um acento com um significado. O acento é um único token que significa uma coisa, como "agora", "novo" ou "seu". Use-o com moderação (cerca de ≤ 8% dos pixels) e deixe-o inundar o quadro no máximo uma vez. Por que: uma cor que significa algo é lida sem palavras, e uma cor usada em todo lugar não significa nada.
4. Um sistema de movimento próprio. Use algumas curvas e molas nomeadas, cada uma com uma razão declarada, e pegue cada número de quadro de timeline.ts. Por que: movimento consistente é movimento de marca, e facilidades ad hoc parecem geradas.
5. Verifique por medição. Um filme está pronto apenas quando os pixels renderizados e o áudio decodificado passam nos scripts e uma rodada de crítica. Por que: a reprodução do Studio esconde estouros, quadros fantasmas, deslizes de sincronia e mudanças de cor que o arquivo codificado mostrará.

3. Fluxo de trabalho

Cada etapa escreve um arquivo, e cada portão é uma verificação que você realmente executa. Trabalhe inline. Subagentes são apenas para crítica (§8), porque construir quadros em paralelo custa mais tempo do que economiza.

Etapa 0: Entrada → BRIEF.md

• Se o briefing já declara o produto, a mensagem e a duração, infira todo o resto e escreva suas suposições.
• Se não, faça no máximo 3 perguntas: o produto em uma linha, o formato e a duração, e onde o filme será exibido. Tire todo o resto da §1.
• Escolha o motor:
  • Remotion por padrão.
  • HyperFrames se o usuário já tem um projeto HyperFrames, quer HTML/GSAP, ou precisa de renders --batch dirigidos por variáveis.
• Copie as proibições rígidas (acima) para BRIEF.md, mais quaisquer exceções fornecidas pela marca. Os críticos são posteriormente alimentados com este arquivo palavra por palavra, então ele serve como contrato de QA.
• Scaffold o projeto: bash <skill>/scripts/new-film.sh films/<nome> --fps 60 --bpm 120 --size 1920x1080 [--engine hyperframes]. Passe --link-modules <dir>/node_modules para reutilizar uma instalação existente em vez de executar npm install.
• Portão: BRIEF.md tem uma linha de especificação, por exemplo 1920x1080@60, 30s, 120BPM, áudio: sintetizado.

Etapa 1: Conceito → TREATMENT.md

Leia references/concept-and-story.md agora.

• Comece por especificidades, não pelo estilo. Escreva:
  • o que o nome significa ou evoca (frequentemente te dá a marca e o dispositivo);
  • o comportamento não óbvio do recurso, completando a frase "ao contrário da versão óbvia, ele…";
  • os objetos próprios do produto (suas linhas, cartões, leituras e estados).
• Escreva 3 conceitos, cada um através de uma lente diferente:
  • (a) o próprio verbo ou metáfora do produto tornado literal;
  • (b) a dor do espectador tornada visível;
  • (c) um dispositivo formal: um objeto de revezamento, um bookend, um movimento de câmera ininterrupto, ou um contêiner que se torna o produto.
• Descarte qualquer conceito cujos adereços possam aparecer no filme de outro produto. Não é seu.
• Preencha assets/TREATMENT.md para o conceito que você escolheu:
  • uma logline;
  • o arco: gancho (dentro do problema, sentido em 1 s) → virada → prova (1–2 recursos) → promessa → lockup;
  • o caminho do dispositivo, cena por cena;
  • uma folha de batidas com as colunas compasso | tempo | imagem | texto | som;
  • o texto completo com sua contagem de palavras;
  • o quadro final.
• Execute o teste de exclusão. Remova as batidas de demonstração; o valor ainda deve ser lido. Remova as batidas de valor; se o filme ainda "funcionar", era um tour de recursos.
• Execute o teste de especificidade. O filme seria igualmente verdadeiro para um produto mais simples, por exemplo uma divisão uniforme em vez de uma itemizada, ou uma lista simples em vez de uma ranqueada? Se sim, a prova subestima o produto; mostre a parte que é difícil.
• Execute o teste de palavra de recurso. Assistindo mudo, um estranho usaria a palavra do briefing para o recurso ("streak", "split")? Se um dispositivo inteligente faz com que seja lido como outra coisa, mantenha a forma familiar do recurso e deixe o dispositivo vesti-lo.
• Portão:
  • a logline tem ≤ 15 palavras;
  • o teste de especificidade passa, com sua resposta escrita;
  • a contagem de palavras está dentro do orçamento da §1;
  • nenhuma linha é maior que 5 palavras, e nenhuma cena tem mais de 2 linhas;
  • o dispositivo aparece em cada linha de batida.

Etapa 2: Marca e quadros de estilo → src/brand/

Leia references/brand-and-color.md e a seção de tipografia de references/copy-and-type.md.

• A paleta inicial, fontes, marca e nome de demonstração são placeholders marcados // cinetic:placeholder, e lint-film.mjs relata um erro até que todos os marcadores desapareçam. Aplique a marca do usuário, ou invente uma para este filme, então exclua os marcadores. Um filme que mantém o visual inicial parece com todos os outros filmes feitos a partir dele.

• Personalidade primeiro. Escreva três adjetivos para a marca, depois derive as escolhas deles. Este mapeamento está em references/brand-and-color.md §2:

  • a tipografia: escolha a sans-serif para esta marca de @fontsource-variable/* e forneça com node scripts/add-font.mjs <nome> (seguro com um node_modules compartilhado); Geist é apenas o substituto inicial;
  • peso e caixa;
  • o palco (claro ou escuro: uma ferramenta de desenvolvimento ou uma marca com nome de fogo frequentemente quer escuro), neutro ou frio, e o matiz do acento das famílias permitidas;
  • o carácter de movimento, de nítido a sem pressa.

  Um aplicativo de anotações calmo e uma ferramenta de CI rápida não devem compartilhar um visual.

• Escreva src/brand/tokens.ts (python3 scripts/palette.py --accent '#…' --stage dark constrói os neutros, verifica contraste e recusa um matiz proibido):

  • cores: uma tinta, um papel, 2–4 neutros, e um acento com seu significado em um comentário;
  • tipo: uma família em 2 pesos, mais uma mono se você precisar;
  • uma escala tipográfica;
  • um valor de tracking por papel.

• Explore a marca antes de se comprometer com uma.

  • Esboce 6–10 direções, cada uma de uma fonte diferente: o significado do nome, uma letra, o objeto do produto, a metáfora da ideia, e uma construção puramente geométrica.
  • Renderize-as juntas em uma folha e olhe para ela (o MarkSheet ainda em references/brand-and-color.md §4).
  • Rejeite qualquer direção que pudesse pertencer a dez outras startups, incluindo a família "bloco geométrico + ponto de acento", que é o vocabulário de exemplo deste próprio skill.
  • Execute o teste de leitura errada. Mostre a marca a 64 px por meio segundo. Se ela for lida primeiro como um símbolo comum (um menos, um emoticon, um ícone de menu ou hambúrguer, um cadeado, um botão de play, um mais), rejeite-a ou mude-a até que não seja.
  • Construa a vencedora em src/brand/Mark.tsx em uma grade de 100 unidades, com lacunas de pelo menos 8 unidades para que sobreviva a ser reduzida.

• Uma paleta com carácter, dentro das proibições. Derive-a do mundo do nome e do produto (uma encosta dá pinho, musgo e ardósia; uma fundição dá carvão, fuligem e um vermelho brilhante), não de padrões de framework. Quando o mundo do nome é calor ou fogo, laranja é proibido, então vá vermelho-incandescente (um vermelho profundo brilhando em um carvão verdadeiro) ou branco-incandescente, nunca azul genérico de ferramenta de desenvolvimento: a cor deve carregar o nome. Um azul-acinzentado próximo ao preto é o tema escuro padrão de ferramenta dev (palette.py observa), e em uma ferramenta dev, tags de UI vermelhas são lidas como erros; gaste o vermelho na própria coisa da marca.

  • Azuis de framework (a família #3B82F6 / #2563EB) e cinzas puros planos são lidos como "padrão".
  • Tingir os neutros para o mundo, com um verde-acinzentado frio ou uma ardósia azul; um palco escuro pode ser preto-pinho ou tinta-navy em vez de #000.
  • references/brand-and-color.md §8–10 tem paletas trabalhadas.

• Defina o movimento.…

[O conteúdo restante do SKILL.md foi truncado para esta demonstração. Na prática, a tradução continuaria preservando toda a estrutura markdown, seções, listas e conteúdo técnico.]