Communitygithub.com

viva-video

Produza um filme de lançamento de produto ou conceito determinístico, renderizado por código, a partir de um documento fonte — o documento é lido e compreendido primeiro, então cada quadro é desenhado por código (sem modelo de geração de vídeo), com dados exatos e código real na tela, narração em chinês (fornecida por um serviço de fala que o usuário disponibiliza, ou o que o agente puder fazer por conta própria) cuja pronúncia do nome do produto é medida, não adivinhada, tipografia gradiente derivada da marca, e densidade de layout, ordem de leitura, continuidade de movimento, diagramas e cores verificados por máquina. Cada quadro carrega uma ideia, a ordem de revelação segue o caminho de leitura medido em F, e mecanismos abstratos são explicados como derivações passo a passo que deixam um rastro. Use para 产品宣发片, 版本发布视频, 概念/机制/原理讲解视频, filmes de lançamento de ferramentas de desenvolvedor, ou sempre que um vídeo precisar conter números precisos, código real e nomes de produtos corretos. Não use para filmes cinematográficos de marca construídos a partir de imagens geradas, edição de vídeo ou edição de cabeça falante.

O que é viva-video?

Viva Video é uma habilidade especializada para agentes de IA que transforma documentos de produto em vídeos explicativos ou de lançamento, onde cada quadro é gerado deterministicamente por código, sem depender de modelos de geração de vídeo. Essa abordagem garante que todos os números, códigos e nomes de produtos sejam exatos, evitando alucinações típicas de IA generativa. A habilidade prioriza a compreensão profunda do documento fonte antes de qualquer renderização, exigindo a criação de artefatos como `UNDERSTANDING.md`, `CLAIMS.md` e `CONCEPT_MAP.md` para garantir que o vídeo seja preciso e informativo. O processo é rigidamente estruturado, com verificações automáticas para densidade de layout, ordem de leitura (padrão F), continuidade de movimento e a correspondência exata entre narração e elementos visuais. Viva Video é ideal para vídeos de lançamento de produtos, demonstrações de conceitos e mecanismos, ou qualquer conteúdo que exija precisão factual, como ferramentas de desenvolvedor. A habilidade suporta personalização através de temas visuais e requer que o usuário forneça serviços de narração (TTS), mas pode operar apenas com legendas se necessário. O fluxo de trabalho inclui etapas críticas como calibração de pronúncia de nomes de produtos, definição de cores gradientes da marca e seleção de protótipos visuais para cada capítulo, tudo verificado por scripts de validação para garantir a qualidade final.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/keepview/viva-video/tree/HEAD

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Viva Video

A partir de um documento de produto, faça um vídeo preciso, claro, onde cada quadro é gerado por código.

Diferença de cinematic-product-video: aquele usa SeedDance para gerar material cinematográfico, voltado para marca. Este não usa nenhum material gerado, tudo é renderizado por código, voltado para informação. As duas habilidades são independentes, não misture.

Entrega-se o vídeo final, não um storyboard. Quando apenas a alteração de especificações ou prompts for solicitada, limite-se à revisão e validação de arquivos, sem iniciar a geração paga ou renderização completa.


Primeira coisa: Entender o documento. Se isso falhar, todo o resto estará errado

A principal razão para um vídeo não ser claro não é a renderização, é não ter compreendido o documento antes de começar a diagramação. A seção comprehension do film-rules.yaml é bloqueante, o compose_spec.py vai interceptar.

Produzir três artefatos

ArquivoConteúdoFunção
UNDERSTANDING.mdO que é, que problema resolve de quem, cadeia causal do mecanismo, números-chave e suas condições de medição, três perguntas que o espectador deve responder após assistir, o que o documento não afirma, pontos não compreendidos marcados como unknownEvita que o vídeo diga algo errado ou exagerado
CLAIMS.mdCada conclusão em uma linha: claim / origem no documento / mecanismo / benefício / condições limitantes / evidência visual / redação de riscoCada frase no vídeo deve poder ser rastreada até esta tabela
CONCEPT_MAP.mdSeções do documento → claim → mecanismo e benefício → sujeito e ação visuais → interpretações errôneas proibidas → evidência necessária para o julgamentoTraduz "o que dizer" em "o que desenhar"

Ao mesmo tempo, preencha as conclusões em content.yaml em content.understanding, o compose_spec.py as valida.

Feche o documento e responda a estas cinco perguntas

Se não conseguir responder, volte e leia novamente, não prossiga com dúvidas.

  1. Qual problema esta coisa resolve, como o usuário fazia antes, qual a dor?
  2. Explique o mecanismo como uma cadeia causal, sem pular etapas.
  3. Qual número melhor prova a conclusão, sob que condições foi medido, ainda é válido se as condições mudarem?
  4. O que o espectador pode interpretar erroneamente, como a imagem deve prevenir isso?
  5. Quais frases no documento são apenas marketing, não podem ser ditas como fatos?

Depois de entender, reorganize, não copie o índice

A ordem deve seguir: Problema → Custo da abordagem antiga → Novo mecanismo → Evidência → Limites de aplicação → Próximos passos. Cada cena fala apenas uma conclusão; conclusão primeiro, depois mecanismo, depois evidência. Quando um termo aparecer pela primeira vez, explique-o em uma frase.

Proibido: usar "grande melhoria", "atualização abrangente", "otimização significativa" no lugar de números específicos já fornecidos no documento; inventar números que o documento não forneceu; apresentar roadmap como já entregue; reescrever código de exemplo de forma mais bonita, mas que não funciona; adivinhar o conteúdo de uma seção pelo título. O compose_spec.py vai detectar esses clichês e gerar erro.

Ponto de verificação

Antes de escrever content.yaml, apresente ao usuário o UNDERSTANDING.md, o esboço dos capítulos, uma conclusão por capítulo e o protótipo visual pretendido para cada capítulo. Se a camada factual não for aprovada, não prossiga para a camada visual. Refazer nesta etapa é mais barato, refazer o vídeo final é o mais caro.


Fonte do método: Tabela de decisão de transição, Três ferramentas de foco, Estrutura de energia, Teste dos três metros, Tipografia chinesa — estas seções foram emprestadas de huashu-design (Tio Hua). O que foi copiado, o que foi visto mas não copiado, e por que não foi copiado, está registrado em references/borrowed-from-huashu-design.md.

Estrutura em três camadas, apenas a camada do meio muda a cada vídeo

CamadaArquivoAo fazer um vídeo
Camada de regrasreferences/film-rules.yamlNão alterar. O que deve ser feito: entender o documento, uma coisa por quadro, correspondência um a um entre narração e unidade de informação, iluminar quem está sendo falado, zero cortes secos, limite inferior de densidade, invariantes de renderização R01–R30, portas de aceitação Q01–Q38, métodos de medição e limites
Pacote de temathemes/<name>/theme.yamlAlterar apenas para mudar a aparência. Aparência: derivação de paleta de cores, tamanhos de fonte, coordenadas, desenho de cartões e navegação, curvas de easing, seleção de transições, quantidade de tinta do foco, BPM e instrumentação da trilha sonora
Conteúdo do produtoSeu content.yamlEscreva apenas isso. Compreensão, fatos, capítulos, claims, métricas, recursos da marca, tabela de pronúncia, método de explicação e unidades de informação de cada capítulo
Produto sintetizadovideo-spec.resolved.yamlNão editar manualmente, gerado por script

A linha divisória entre a camada de regras e o pacote de tema é apenas uma: Mudar a aparência não deve poder mudar 'a narração deve corresponder à imagem'. Os critérios permanecem na camada de regras, a aparência é entregue ao pacote de tema; o theme_contract escreve ambos como listas verificáveis por máquina. Se o pacote faltar chaves, ultrapassar limites, ou tentar modificar os critérios, o validate_spec.py rejeita imediatamente. O pacote padrão é daylight (fundo quase branco + cartão branco + gradiente triplo da cor da marca), é a aparência padrão da habilidade. Como escrever um novo pacote, veja themes/README.md.

SKILL=~/.agents/skills/viva-video
cp $SKILL/templates/content.example.yaml ./content.yaml
# Primeiro entenda o documento, preencha understanding; depois preencha o restante dos TODOs
python3 $SKILL/scripts/compose_spec.py  ./content.yaml -o ./video-spec.resolved.yaml  # Adicione --theme <nome do pacote> para mudar a aparência
python3 $SKILL/scripts/validate_spec.py ./video-spec.resolved.yaml --self-test

examples/content.viva-video.yaml é um exemplo preenchido (o próprio vídeo de lançamento do viva-video 1.0, 7 capítulos).


Modelos de fala e vídeo: o usuário fornece o que tiver, senão, use apenas suas próprias capacidades

A habilidade não vem com endereços ou chaves de nenhum modelo de fala ou vídeo.

  • Se o usuário explicou como chamar seu próprio sintetizador de fala, reconhecimento de fala ou modelo de vídeo (comandos, documentação de API, scripts existentes contam): empacote-o em um comando e escreva em providers.json. Depois disso, tts.mjs, pron_calibrate.mjs, asr_check.mjs --backend command usarão esse comando. As chaves ficam apenas em variáveis de ambiente ou na configuração do usuário, não escreva em arquivos de projeto, logs ou mensagens.
  • Se o usuário não disse: use apenas as capacidades que o agente já possui. Se houver ferramentas de fala disponíveis no ambiente, use-as; senão, produza um vídeo apenas com legendas, sem narração, e marque a verificação de pronúncia como not_tested. Não adivinhe ou procure endereços e chaves de serviços.

Formato, ordem de busca e tabela de fallback, veja references/providers.md.


As três primeiras coisas ao mudar de produto, a ordem não pode ser invertida

Um: Definir a pronúncia

TTS chinês lê Rspack como uma palavra inglesa inteira, o s no meio é engolido — medido, a transcrição reversa escreve Spac.

A solução é fazer o TTS ler letra por letra, não transliterar o nome para caracteres chineses. Escrita: RS + espaço + o restante da palavra inglesa.

ExibidoEnviado ao TTSLido como
RspackRS packR-S-pack
RsbuildRS buildR-S-build
RstestRS testR-S-test
RsdoctorRS doctorR-S-doctor

Medido em 2026-11-04 (voz feminina chinesa, velocidade 1.24, após síntese, transcrição reversa com faster-whisper local):

EscritaTranscrição reversaJulgamento
RspackSpacNão, s perdido
RS packRSPACAdotado, total para 4 nomes 7.78s
R S packRS PackUsável, um pouco mais longo
R 斯 packOSPACNão, o caractere chinês "斯" desvia o R anterior
R-S-packRS PackNão, o hífen insere uma pausa, frase inteira 1.5s mais longa
而斯派克而斯派克Não, totalmente sinizado, a palavra inglesa desaparece

Unidades devem ser expandidas: medido, 915.8 ms foi lido como "915.8 metros". Escreva como "915.8 毫秒". pronounce.py faz isso automaticamente (só substitui unidades após números).

Abreviaturas em letras (SSR / BFF / SWC / CLI), decimais, porcentagens, números de versão como 3.0 foram medidos e lidos corretamente, não os reescreva desnecessariamente.

python3 scripts/pronounce.py --self-test                 # 8 testes
python3 scripts/pronounce.py "Análise reduzida de 915.8 ms para 51.6 ms."
node     scripts/pron_calibrate.mjs --terms terms.json   # Ao mudar de produto/timbre, meça para escolher a escrita
node     scripts/asr_check.mjs --spec video-spec.resolved.yaml --voice voice/

Ao mudar de timbre, velocidade ou introduzir um novo nome próprio, sempre execute pron_calibrate.mjs para medir, não copie cegamente as conclusões acima. Diferentes timbres podem ler letras de forma diferente. Sem uma medição de retorno, não marque a pronúncia como aprovada; passar no ASR não significa que soa natural, sem audição marque como not_tested.

Dois: Definir a cor do tema e o gradiente

python3 scripts/theme_resolve.py --svg brand/logo.svg --out qa/theme-resolution.json
python3 scripts/theme_resolve.py --hex '#F93920'

Seguindo design.theme.resolution_order: especificado pelo usuário → SVG da marca → variáveis CSS do site oficial → cor decorativa do documento → fallback. A cor bruta obtida é primeiro convertida para OKLCH, luminância limitada a 0.45–0.62, saturação limitada a 0.12–0.22, preservando o matiz original. Quando estiver fora do sRGB, reduza a saturação para mapear, é proibido cortar por canal individualmente — cortar altera o matiz, anulando a normalização.

As três cores de ancoragem do gradiente devem se mover na mesma direção ao longo do círculo cromático, em direção ao ponto de ancoragem magenta (H=350°), com amplitude limitada a 55°–86°, secundária em 40%. Mover em direções opostas faz o gradiente reverter no meio do caminho, parecendo um bug. Alimentando com a cor principal do vídeo de referência, reproduz-se seu próprio #376CFF → #8E33F2 → #E3429B.

Duas rampas: títulos usam a rampa de saturação total, números grandes ≥96px usam uma rampa mais clara (L +0.13, C −0.06) — números grandes ocupam mais área, saturação total sobrepujaria o título.

Escala de contraste: tinta do corpo do texto 4.5, letras grandes na cor da marca 3.0, valores principais ≥96px 2.3 (medido no vídeo de referência entre 2.37–2.86, mais rigoroso embaçaria todo o gradiente).

Vermelho, verde e laranja são cores semânticas, não participam da derivação. Proibido usar vermelho de erro como borda de contêiner ou decoração comum.

Três: Escolher um protótipo visual e um método de explicação para cada capítulo

Prototípo visual é escolhido entre os oito de scene_language.archetypes: grafo de dependências, código mais relações, requisição-resposta, primeiro descobrir depois requisitar, métricas antes e depois, matriz de capacidades, máquina de estados, arquitetura em camadas. Dois capítulos consecutivos não podem repetir o protótipo.

Método de explicação (explanation_mode) é escolhido de explanation_modes.vocabulary, determina se a página se move ou não e como. Primeiro veja o tipo de informação, depois consulte a tabela de seleção (veja a seção "Como explicar informações abstratas" abaixo).

Unidade de informação cada capítulo escreve 3–5 rótulos curtos, que são tanto o limite inferior de densidade quanto o limite superior de "muito conteúdo em uma imagem".

Os três itens são validados pelo compose_spec.py.


Layout: Cheio ou disperso?

O título é sempre em duas partes: "preparação, conclusão"

A primeira parte em tinta, a segunda parte inteira em gradiente. A divisão só pode cair em pontuação. A parte da conclusão deve ocupar 35%–70%.

Simples, linear, | cada passo faz sentido por si só
Declarado uma vez,  | verificação em tempo de execução e manual estão prontos automaticamente
Medido na mesma máquina,  | roda mais, mais rápido, mais econômico

Em content.yaml, escreva como headline_lead + headline_emphasis, o compose_spec.py valida a proporção e a divisão. Note que é diferente de title (nome do capítulo): o nome do capítulo vai na página do capítulo e na navegação; headline é o título grande da página de conteúdo.

Orçamento de gradiente: no máximo 1 título + 1 valor principal + 2 palavras-chave por página. Mais do que isso, o gradiente deixa de ser um sinal de ênfase. Gradiente não pode ser usado em fontes <32px (medido, causa faixas de ruptura), não pode receber contorno, sombra, brilho, nem fluir.

Preencha os slots primeiro, o conteúdo-chave vem depois

No primeiro quadro da cena, desenhe todos os slots — bordas do contêiner, título do slot (chip + título + linha separadora), esqueleto do conteúdo, depois altere apenas o conteúdo e a transparência, a caixa delimitadora permanece fixa. O conteúdo-chave (valores, código, rótulos) só é preenchido quando a narração o menciona.

Esta regra resolve três coisas ao mesmo tempo: o layout está cheio desde o primeiro quadro, o espectador não vê uma página vazia "ainda não crescida"; durante o preenchimento não há tremor de re-layout; o primeiro olhar capta a estrutura da página, sabendo quantas coisas serão explicadas.

O esqueleto deve ter título ou estrutura de espaço reservado, não pode ser um retângulo arredondado branco vazio.

O cabeçalho do slot não pode esperar junto com o conteúdo. Um bug medido em 2026-11-05: slots feature e stage prendiam o título ao evento de revelação do conteúdo, resultando em dois cartões como retângulos brancos no início da página. O cabeçalho pertence ao contêiner, o conteúdo pertence ao ritmo.

Esta regra tem uma medição em nível de pixel (metade prática do R18): O maior retângulo vazio na área de texto do quadro de abertura da cena (no momento em que a transição termina) ≤ 0.26. Apenas medir o quadro de espera não mostra o problema — no quadro de espera a página está obviamente cheia, não se vê o estado semi-vazio dos primeiros oito segundos.

Slots ainda sem conteúdo não devem ser escurecidos. Veja a seção "Foco" abaixo: rebaixar slots vazios para o nível de desfoco faz a página parecer "ainda não crescida", que é exatamente o problema que a pré-alocação de slots visa resolver. Medido, após aumentar os slots vazios de 0.38 para 0.80, o maior retângulo vazio nos quadros de abertura de sete cenas caiu de 0.29–0.62 para 0.058–0.199.

Conteúdo sem moldura deve ser contido

Feedback de usuários: "Sem cartões, fica muito disperso." A regra foi endurecida:

  • Cada unidade de informação na área de texto deve pertencer a um contêiner ou grupo com rótulo.
  • Apenas três tipos podem ficar sem moldura: lista de pontos-chave logo abaixo do contêiner, uma conclusão no final da página, o kicker e o título no topo.
  • Pontos-chave sem moldura devem compartilhar a borda esquerda e a largura com o contêiner adjacente, no máximo 7 colunas de largura, no máximo 4 itens, formato é "número de círculo + título curto em negrito + dois pontos + texto do corpo" na mesma linha.
  • Todos os blocos de texto sem moldura na mesma página devem ter apenas uma borda esquerda.
  • Se a área ocupada por conteúdo sem moldura exceder 40% da área de texto, deve ser colocado em um contêiner.

Proibido: três ou quatro parágrafos de texto centralizados com espaço branco entre si; usar linhas em branco para "preencher" a distância; mais de dois tipos de borda esquerda em uma página.

Limite inferior de densidade (área de texto [120, 280, 1680, 610])

MétricaLimite inferiorMétodo de medição
Ocupação do contêiner occupancy≥ 0.55Caixa delimitadora de objetos da cena
Extensão vertical≥ 0.72Caixa delimitadora de objetos da cena
Extensão horizontal≥ 0.86Caixa delimitadora de objetos da cena
Maior retângulo vazio≤ 0.14Caixa delimitadora de objetos da cena
Maior faixa vazia≤ 150 px de designCaixa delimitadora de objetos da cena
Unidades de informação independentes≥ 3Lista de objetos da cena
Maior retângulo vazio em quadro estável≤ 0.20Mapa de borda do quadro estável

O último item é em nível de pixel. Páginas de capítulo/capa/fim são isentas. Não usar "proporção de pixels não-fundo": este visual é cartão branco sobre fundo quase branco, o preenchimento do cartão se tornaria a cor modal, a métrica inverteria (medido: referência 0.144, versão julgada esteticamente inferior 0.419, direção completamente errada). O mapa de borda não é afetado.

Quando o conteúdo for insuficiente, complemente seguindo density.escalation. Passo 0: verifique se os slots não foram pré-alocados ou o conteúdo não foi colocado em contêineres — a maioria dos casos "vazios" é isso, não falta de conteúdo. Proibido deixar vazio. Proibido aumentar o tamanho da fonte para preencher o layout. Proibido usar partículas, halos, formas geométricas para fingir unidades de informação.

Use molduras de janela com base na quantidade de informação, não na preferência

Deve usar: quando o conteúdo pertence naturalmente a uma interface (arquivo, configuração, terminal, editor, painel, relatório); quando unidades de informação ≤3 parecem esparsas e precisam de contorno para conter; para expressar a relação de subordinação "nome do arquivo + conteúdo".

Não deve usar: quando há uma forma de representação mais precisa que pode preencher a área de texto; quando os dois quadros anteriores já usaram continuamente; quando o conteúdo é um mecanismo abstrato em vez de uma interface específica.

Se usar, deve preencher: taxa de preenchimento de conteúdo ≥ 78%. Título da janela usa o nome real do arquivo, não "exemplo" ou "demo". Cenas com janela ≤ 50% de todo o vídeo, não mais que três quadros consecutivos com a mesma composição.

Diagramas de relação e fluxogramas

Pelo menos 4 nós e 3 arestas. Nós devem ter título mais uma linha de explicação. Cada aresta direcionada deve ter um rótulo de ação e uma seta, ambas as extremidades ancoradas em pontos de borda de ids de objetos reais, extremidades soltas são um defeito. Deve ter um painel de explicação, ocupando 30%–42% da largura da área de texto: pseudocódigo, fragmento de configuração, tabela de estados, exemplo de mensagem, barra de métricas, sequência de passos (qualquer um). Pseudocódigo com 5–12 linhas, cada linha correspondendo a um nó ou aresta no diagrama, realce síncrono durante a renderização.

Páginas de métricas

Além do valor principal, pelo menos 2 itens de suporte: gráfico de antes/depois, decomposição de componentes, bloco de condições de teste, uma segunda métrica do mesmo mecanismo, a configuração real que gerou a métrica, definição de linha de base. Os gráficos compartilham a linha de base, marcam escalas e valores. Unidades diferentes (qps e ms) devem ser em gráficos ou eixos separados. Ordem: primeiro mostre o valor original e as condições de teste → mude para o novo valor → a melhoria se estabiliza → mantenha estável. Os números devem ser mono-espaçados, unidades fixas, enfatizar apenas uma vez.


Tipografia chinesa: a abordagem ocidental não pode ser copiada

RegraPor quê
Altura da linhadisplay 1.15, título 1.35, corpo 1.65Caracteres chineses são quadrados de grade cheia, sem o espaço natural entre letras minúsculas ocidentais. Espaçamento insuficiente os torna uma massa confusa. Chinês é cerca de 0.2 mais alto que o ocidental em geral
Espaçamento entre caracteresdisplay (>60px) −0.02em, título 0, corpo 0O espaçamento entre caracteres chineses é naturalmente uniforme. Adicionar espaçamento positivo em títulos os torna frouxos, negativo em display pode fazer os traços colidirem. Apenas rótulos ocidentais em maiúsculas precisam de 0.08–0.15em
Largura da linha22–38 caracteres por linha, ideal 28–32Alta densidade de caracteres chineses, a mesma largura carrega mais informação que o ocidental. Linhas muito longas fazem o leitor se perder ao retornar
Pilha de fontesOcidental primeiro, chinês depoisCorrespondência caractere por caractere: fontes ocidentais não contêm pontos de código CJK, os caracteres chineses passam naturalmente para a fonte chinesa. Na ordem inversa, os caracteres ocidentais são todos absorvidos pelos feios caracteres ocidentais das fontes chinesas
ÊnfaseMudar o peso da fonte ou adicionar cor de fundoChinês não tem itálico, o itálico sintético de navegadores/ renderizadores distorce os caracteres chineses. O negrito sintético também é proibido
AspasAspas angulares 「」『』Aspas curvas em fontes chinesas são de largura total em espaço, forma ocidental, visualmente flutuam
NúmerosUse a fonte ocidental + tabular-numsCaso contrário, 1 e 8 não terão a mesma largura e as colunas de dados tremerão para a esquerda/direita

Fontes mono-espaçadas devem ser verificadas para glifos CJK. JetBrains Mono não tem CJK, os comentários em chinês em janelas de código se tornarão blocos de tofu. A família mono deve adicionar explicitamente um fallback chinês.

Teste dos três metros

Pause em qualquer quadro, a maior palavra na imagem deve ser legível a três metros de distância; reduza o quadro chave ao tamanho de uma tela de celular e ainda deve ser legível. O espectador dá menos atenção a cada quadro de um vídeo do que a uma imagem estática, o tamanho da fonte só pode ser maior, nunca menor. Esta regra e o limite inferior de densidade agem como limites inferior e superior: o limite inferior de densidade evita o vazio, o teste dos três metros evita "encolher a fonte para caber mais".


Um quadro fala apenas uma coisa

Feedback do usuário: Conteúdo, efeitos e narração devem expressar a informação claramente, sem ambiguidade, sem muito conteúdo em uma imagem. Cada regra desta seção pode ser julgada por motion_audit.py, não são sugestões estéticas.

Orçamento de informação: além do limite inferior, há um limite superior

ValorExplicação
Limite inferior de unidades de informação3Abaixo disso, a página está vazia
Limite superior de unidades de informação5Acima disso, o teste de quadro estático de 2 segundos falha
Total de texto na área de texto≤ 120 unidades de contagemCaractere chinês conta como um, palavra inglesa conta como um
Nova informação por batida1 localUm grupo stagger conta como um

A contagem é feita pelo contêiner mais externo ou grupo com rótulo, subitens dentro do grupo não contam separadamente. Na página de referência em 01:32, por este critério, eram 3 unidades (janela de código de configuração + grupo de cartões de dispositivo em nuvem + barra de fluxo), mesmo com 5 cartões, ainda conta como 1.

Se exceder, não encolha o tamanho da fonte. Tente, em ordem: dividir em duas cenas → agrupar itens semelhantes em um grupo com título → mover detalhes para o painel de explicação.

O caminho de leitura segue o padrão F, e é mensurável

Em pesquisas de rastreamento ocular, a atenção na área de conteúdo se concentra em três pontos: a faixa superior (kicker e título), a segunda faixa horizontal (primeira fileira do conteúdo principal), a faixa vertical esquerda (a borda esquerda compartilhada). Aplicado a este vídeo:

  • Ponto de partida: a primeira unidade de informação revelada na cena deve ter seu centro na parte superior esquerda da área de texto (x normalizado ≤ 0.50, y ≤ 0.45)
  • Ordem: o centroide vertical da sequência de revelação nunca diminui monotonicamente, permitindo no máximo um salto de retorno para cima
  • Faixa vertical: blocos de texto sem moldura compartilham uma borda esquerda (R14), contêineres se alinham à grade de colunas à esquerda (R13)
  • Informação prévia: título, título do slot, as duas primeiras palavras do título do ponto-chave devem carregar informação por si mesmas. Títulos que começam com "Sobre", "Nosso", "Melhor", "Como" são rejeitados diretamente pelo compose_spec.py.

Medido (dentro de content_box, 12fps, centroide da mudança 1.5 segundos após cada corte):

Ponto de partida xPonto de partida yProporção de cortes que se espalham para baixo
Vídeo de referência0.393 ± 0.1210.336 ± 0.12667%
Versão anterior julgada esteticamente inferior0.660 ± 0.1750.498 ± 0.15248%

O vídeo de referência começa no canto superior esquerdo e se espalha para baixo; aquela versão começava no centro, um pouco à direita, e se espalhava para fora — essa é uma das causas diretas de "parecer disperso", não relacionada à densidade.

Imagem e narração devem falar sobre a mesma coisa

Cada unidade de informação deve especificar a que frase da narração corresponde, com o tempo de revelação caindo dentro de [início da frase −0.4, fim da frase +0.8] segundos. Se não houver frase correspondente, significa que esta unidade não é mencionada na narração e deve ser removida ou ter a narração complementada.

O texto na imagem são frases de conclusão, nomes próprios, valores, rótulos, não é uma transcrição palavra por palavra da narração — ouvir e ler a mesma frase simultaneamente compete. As legendas são uma faixa independente, não contam para o orçamento de texto.

A narração também deve ter uma coisa por frase

  • Uma frase, um fato. Dois fatos, duas frases, não use "ao mesmo tempo" ou "e" para ligá-los. Frase individual ≤ 32 unidades de contagem.
  • A primeira frase de cada cena é a conclusão, só depois vêm o mecanismo e a evidência.
  • Não use "ele", "isto" para se referir a algo mencionado há mais de uma frase; repita o nome.
  • Quando um termo aparecer pela primeira vez, explique-o na mesma frase, não deixe para a próxima.
  • Ao dizer um número, na mesma frase ou na imediatamente seguinte, inclua a condição de medição.
  • Proibido: leitura de lista de palavras-chave ("mais rápido, mais forte, mais estável"), paralelismo de tom publicitário, três nomes próprios em uma frase, repetir o que já está claramente escrito na imagem.

Copie a narração frase por frase em CLAIMS.md para mapeamento. Frases não mapeadas devem ser removidas ou complementadas com uma conclusão com origem.

Teste de quadro estático de 2 segundos

Pegue o quadro de espera de uma cena, cubra a narração e as legendas, peça a alguém que não conhece o produto para dizer a conclusão da página e o número. Se não conseguir, a página não explicou claramente. Registre por cena: passed / failed / not_tested. Se não fizer, é not_tested.


Como dividir o tempo: primeiro aloque o orçamento de espera, depois organize os efeitos

A duração de um vídeo com múltiplos takes não é dividida igualmente. Esqueleto de quatro partes, a proporção é um requisito rígido:

ParteProporçãoEnergiaConteúdoRequisito rígido
Abertura8–12%BaixaMarca aparece + frase que explica o que o vídeo vai falarLogotipo fixo, espera ≥1 segundo; quadro 0 é a capa completa
Estabelecimento10–16%Baixa a média, a mais lenta do vídeoPrimeiro capítulo, a parte de maior qualidade visual—
Subida52–64%Média alta e baixa alternadasUma capacidade por takeInserir uma página de capítulo a cada 1–2 takes de conteúdo para reduzir a energia
Encerramento10–16%Pico do vídeo inteiroRevisão + número-chave + chamada para açãoNão desaparecer gradualmente, manter a leitura até o último quadro

Ordem: ① Liste as capacidades e conte o número de takes → ② Primeiro, separe o tempo de espera inviolável (espera do logotipo, pausa para leitura, página de capítulo mantida por 1.1 segundos, final mantido por 2 segundos) → ③ O tempo restante é distribuído para os efeitos → ④ Selecione a transição para cada junção, o tempo da transição é descontado do orçamento dos dois takes adjacentes, não é adicionado ao tempo total.

É proibido ter dois takes consecutivos de alta energia. A página de capítulo é um "cartão de respiração" para reduzir a energia — é de baixa densidade, grande espaço em branco, 2–6 caracteres, não a transforme em mais um take de informação, senão é como se não tivesse inserido.

Lista negra de decorações de template

Estas não são "feias", são "obviamente de um template". Se aparecerem, remova:

Rótulo curto em inglês maiúsculo acima de cada título · strings de pontos conectados como "A · B · C" · setas decorativas no final de botões ou rótulos · mudar a cor de apenas uma palavra em um título · numeração 01/02/03 para conteúdo não sequencial · ícones emoji não relacionados ao mecanismo · cartão arredondado com faixa colorida à esquerda · partículas brilhantes, fluxo de dados, HUD holográfico, neon · fundo escuro com halo neon fingindo tecnologia.

O critério é "ele nasceu do conteúdo?", não "ele parece um template?" Numeração é válida quando é realmente uma sequência (capítulos, etapas de derivação); gradiente é válido quando derivado da cor da marca.


Junções: zero cortes secos em todo o vídeo

Feedback do usuário (2026-11-05): "A transição entre cada capítulo e o próximo deve ser muito natural, não apenas aparecer diretamente, o que parece muito abrupto." Vídeos de lançamento universalmente reconhecidos como excelentes não têm um único corte seco. Para obter o efeito de "corte", use um corte projetado.

Cada junção de cena deve declarar um tipo de transição, cujo tempo é descontado pela metade do orçamento de cada um dos dois takes adjacentes — a transição não é adicionada ao tempo do vídeo, é emprestada dos dois takes. A janela é [limite − duração/2, limite + duração/2], durante este período, as duas cenas estão na tela simultaneamente.

Takes adjacentesUsarDuraçãoComo fazer
Capa → Página de capítuloCrossfade0.62sCapa desaparece e gradualmente desfoca, o número do capítulo simultaneamente se resolve a partir do desfoque
Texto principal → Página de capítuloCrossfade0.58sEnquanto a página anterior desaparece, o número do capítulo entra desfocado, duas coisas na mesma janela
Página de capítulo → Texto principalVarredura prisma0.92sNúmero amplia e desfoca → faixa de luz arco-íris varre em diagonal → a próxima página já está formada atrás da faixa de luz, conteúdo-chave ainda não exibido
Texto principal → FinalCrossfade0.62sIgual acima
Texto principal → Texto principal (mudança de take dentro do mesmo capítulo)Revezamento de desfoque0.50sApenas mude o desfoque, sem deslocamento horizontal

Varredura prisma: cobrir a tela inteira com um véu fino de surface_tint (pico 0.62), uma faixa de luz de 1420 de largura varrendo a 17°, as cores de parada são cor principal 0.34 → cor de ênfase secundária 0.30 → accent 0.26. Proibido flash branco, apagamento de tela inteira, virar página, girar.

Junções grudadas nas pausas da narração (move on pause): apenas antecipe, não atrase, limite de 0.8 segundos. O custo para o espectador mover o olhar durante uma pausa auditiva é o mais baixo.

Julgamento (R27): Amostre a janela da junção a 12fps, calcule a mudança quadro a quadro da tela inteira; a mudança de um único quadro não pode exceder 0.55 da mudança total da janela. Um corte seco concentraria mais de 90% da mudança em um quadro. Medido, as sete junções desta versão caíram entre 0.155–0.35.

A capa deve ser o quadro 0. O player usa t=0 como pôster; se o quadro 0 estiver em branco, a capa não existe. Portanto, a capa não cria movimento com a entrada de elementos — os elementos estão todos lá desde o início, o movimento vem de três coisas que não alteram a caixa delimitadora: um círculo concêntrico estático, duas varreduras de luz, e quando a narração menciona uma direção, o rótulo correspondente acende. O julgamento é: a taxa de cobertura de borda da área de texto no quadro 0 ≥ 0.90 vezes a do quadro de espera da capa. Até as decorações devem estar no lugar no quadro 0 — medido, ao fazer o círculo aparecer gradualmente de 0→1, essa proporção foi de apenas 0.673.


Foco: ilumine quem está sendo falado, mas o que já foi dito ainda deve ser legível

Feedback do usuário (segunda rodada): "Quando fala de um conteúdo, os outros conteúdos ficam acinzentados, destacando o que está sendo falado." Feedback do usuário (terceira rodada): "Depois de falar, fica imediatamente acinzentado, nem deu tempo de ver direito." "Não embace demais, apenas escureça, mas ainda dê para ver o conteúdo." "Se o conteúdo já falado está relacionado com o próximo, pode não escurecer por enquanto."

Quatro níveis de estado, apenas comprimem a quantidade de tinta, não a nitidez

EstadoQuantidade de tintaDesfoqueCartãoQuando
active1.00Com sombra, borda da cor principalA narração está falando dele. Ele é reconhecido por "flutuar", não porque os outros estão borrados
read0.700Sem sombra, borda normalJá foi dito. A tinta comprimida visualmente para ~#5A6070, contraste ainda 6:1, legível a três metros
waiting0.880NormalAinda não chegou a vez. Apenas ligeira redução, a página deve parecer cheia
settled1.00NormalNarração terminou, página inteira volta ao opaco

Não use desfoque. Esta regra conflita com "O pacote de desfoco deve incluir blur" do huashu-design; aqui, resolve-se conforme a necessidade de um vídeo informativo: a função do desfoque é fazer o elemento parar de competir pela atenção, mas o espectador de um vídeo informativo ainda precisa relê-lo. O desfoque é reservado apenas para dois lugares — transições entre cenas e a entrada/saída do número da página de capítulo.

Quando começar a escurecer

          Início da frase         Fim da frase      +1.0s        +0.8s
             |-----------------------|---------------|------------|
   active    =======================================>
   Escurecer                                       [===gradiente===]  read
  • Uma unidade não pode começar a escurecer antes do final da frase de narração que a menciona (metade da declaração do R30).
  • Depois de falar, deixe 1.0 segundo para o espectador terminar de ler, depois use 0.8 segundos para escurecer lentamente.
  • A prática antiga era "assim que a próxima frase começa, o foco muda". O espectador ainda está lendo o bloco anterior, a imagem já o removeu.

Blocos relacionados acendem e escurecem juntos

Configuração e seu limite de aplicação, valor e sua condição de medição — pares de conteúdo como esses declaram o mesmo focus_group: enquanto qualquer um do grupo estiver sendo falado, o grupo inteiro mantém-se active; depois que o último do grupo terminar de ser falado + 1.0 segundo, o grupo inteiro escurece junto.

Julgamento (R28)

Pegue um quadro no momento em que uma unidade perde o foco e o mesmo quadro do quadro de espera, compare a magnitude média do gradiente dentro da caixa delimitadora da mesma unidade. O estado de desfoco deve ser ≤ 0.85 do estado de espera.

Use magnitude média em vez do número de bordas limiarizadas: quando apenas o contraste é reduzido sem adicionar desfoque, o limiar passa ou falha em tudo, a métrica se descola do processamento. A magnitude média varia linearmente com o contraste, com tinta 0.70 mede cerca de 0.70.


Revelação: o conteúdo de suporte está presente desde o início, apenas os itens-chave esperam a narração

Feedback do usuário (terceira rodada): "A caixa do meio está sem conteúdo, a caixa de baixo está sem conteúdo mas ainda tem estilo, parece estranho à primeira vista." "Na verdade, você pode primeiro mostrar o conteúdo sem importância. O importante, revele com efeito de máquina de escrever quando estiver sendo explicado." "Geralmente, só é necessário usar a máquina de escrever para imprimir o conteúdo. Se já foi impresso e depois a linha é mencionada novamente, destaque o fundo."

Esta regra restringe a da segunda rodada ("conteúdo-chave espera a narração para ser preenchido"), não a invalida: Apenas o item-chave de cada unidade espera, não o cartão inteiro.

O que deve ser desenhado desde o início

Cartão, chip, título, linha separadora, rótulo da linha, linhas secundárias, estrutura. Uma unidade deixa apenas um item-chave para esperar a narração — aquele valor, aquele trecho de código, aquele grupo de rótulos.

Use apenas um efeito por linha

MomentoUsarNão sobrepor
Primeira apariçãoMáquina de escrever, da esquerda para a direita, caractere por caractere, 0.4–1.0 segundosNão adicione varredura de luz, nem faixa de cor de fundo, nem faixa colorida à esquerda
Quando mencionado novamenteFaixa de destaque de fundo #FFF4D6 + faixa colorida à esquerda de 3px, 0.42 segundos—

Destaque é a linguagem de 'mencionar novamente'. Se destacar na primeira aparição, essa linguagem desaparece e o espectador não consegue distinguir o que é novo.

A versão anterior dava a cada linha uma varredura de luz, para atingir "proporção de quadros com mudança ≥ 0.45" — o usuário disse: "muitos efeitos de movimento no texto". Acumular efeitos de movimento decorativos para atingir a cota de movimento agora é rejeitado diretamente.

Quando a tela esqueleto pode ser usada?

Pode ser usada quando o conteúdo realmente precisa esperar para ser explicado e o esqueleto em si é projetado, mas deve atender: ter título e estrutura (não um retângulo arredondado branco vazio), barras de placeholder de larguras diferentes (parecendo o contorno de um conteúdo real), esqueleto não exceder 60% da altura do cartão, os esqueletos de cada cartão não podem ser idênticos.


Narração e imagem devem falar a mesma coisa, esta é a linha de base

Feedback do usuário (terceira rodada): "Certifique-se de que a narração e o conteúdo e os efeitos da imagem são consistentes!!! Esta é a linha de base."

O fracasso da segunda versão foi que a própria declaração estava errada: R22 só verifica se o tempo de revelação cai dentro da janela de tempo da frase declarada, mas nunca verifica se esta frase está realmente falando sobre esta unidade. Assim, o cartão "2.8x" foi vinculado à frase "outro tempo caiu de 12.6s para 4.0s" — aquela frase falava sobre a segunda linha de outro cartão — a janela de tempo, obviamente, coincidia, e o teste passou todo verde.

R29: Correspondência um a um, e o texto deve coincidir

  • Cada unidade de informação declara exatamente uma frase de narração.
  • Duas unidades não podem compartilhar uma frase, a menos que sejam do mesmo grupo stagger e entrem juntas na mesma batida.
  • Cada frase de narração na cena deve ser declarada por alguma unidade, não são permitidas frases órfãs.
  • O texto desta frase deve conter a palavra-chave daquela unidade: título do cartão, rótulo da linha, valor, texto do rótulo, nome do arquivo (qualquer um). Portanto, cada unidade de informação em content.yaml deve ter keywords.

R30: A imagem segue a narração

Na prática, durante a reprodução de cada frase de narração, deve haver uma mudança visível dentro da caixa da unidade correspondente.


Validação do tempo de renderização (render clock)

O tempo total de renderização de todo o vídeo não deve exceder o tempo real do vídeo multiplicado por um fator de 1.2. Se exceder, emita um aviso e pare.


Como fazer uma versão menor (snippet) para um par de métricas

Quando o usuário tem apenas 2–3 métricas e quer um clipe de 15 segundos, não siga o fluxo completo acima. Use snippet-video:

SKILL=~/.agents/skills/viva-video
python3 $SKILL/scripts/snippet.py --metric "taxa de transferência: 1200 qps" --metric "latência: 12ms" -o ./snippet

O script gera um único take: barra comparativa antes/depois + condições de teste + resultado, sem capa, sem página de capítulo, sem transição complexa.


Como escrever um novo pacote de tema

Veja themes/README.md e themes/example/theme.yaml. As regras são:

  • Não repita nem modifique as invariantes da camada de regras (R01–R30, Q01–Q38).
  • Forneça todos os tokens visuais: paleta de cores, tamanhos de fonte, regras de layout, curva de easing, tipo de transição, instrumentação da trilha sonora.
  • Passe no validate_spec.py --self-test.

Um novo pacote de tema não precisa modificar film-rules.yaml.

Habilidades Relacionadas