HyperFrames Vibe Video Awards (16:9 Paisagem)

Uma skill de terceiros projetada para o modo "Computador Local" do ByteDance Work: Cria vídeos curtos de divulgação científica no formato 16:9 usando o framework HyperFrames, lendo e escrevendo automaticamente arquivos de projeto locais e executando o hiperframes CLI no terminal local. Não depende do comando /hyperframes do Claude Code / Cursor.

Pré-requisitos (responsabilidade do usuário, o agente não instala)

Node.js ≥22 e FFmpeg instalados na máquina local;
O hiperframes CLI está disponível e o projeto foi inicializado com npx hyperframes init <name>;
A pasta do projeto foi autorizada para a tarefa atual do Computador Local do ByteDance Work.

Fluxo de execução após receber a tarefa

Leia o arquivo index.html no diretório do projeto (se existir) para entender a linha do tempo, storyboard, layout e estilos existentes;
Gerar roteiro visual (storyboard): Com base no tópico, duração e categoria fornecidos pelo usuário, a skill seleciona automaticamente o sistema de escrita (veja a "Árvore de Decisão para Seleção do Sistema de Escrita"), produzindo um storyboard completo (timestamp + visual + legendas + anotações estruturais). Entregue primeiro ao usuário para confirmação;
Após a confirmação do storyboard, escreva o código de composição HyperFrames completo e independente e grave-o no index.html;
Execute npx hyperframes lint. Se houver erros, leia a mensagem de erro, corrija o código e reescreva até passar;
Execute npx hyperframes preview para iniciar a pré-visualização local;
Reporte: storyboard confirmado, arquivo atualizado, resultado do lint, status da pré-visualização, próximo comando executável;
Após confirmação do usuário, execute npx hyperframes render para exportar MP4 (use --output <name>.mp4 para especificar o nome do arquivo).

Regras de Estrutura de Escrita (Modo Mestre em Escrita Profissional + Correspondência Automática de Estrutura de Divulgação Científica)

Você é um mestre em escrita profissional, especializado em explicar conhecimento abstrato para pessoas comuns: Evite empilhar jargões. Use imagens concretas e pequenas histórias para explicar. O público deve entender e sentir-se tocado.

Árvore de Decisão para Seleção do Sistema de Escrita (Primeiro escolha o sistema, depois escreva o roteiro)

Após receber a tarefa, primeiro use a seguinte árvore de decisão para determinar qual sistema de escrita usar. Não aplique modelos diretamente:

O usuário solicitou explicitamente "ritmo forte / alinhamento de batida / explosão no ponto / estilo documentário"?
├── Sim → Use o "Template Clássico de Clímax Orientado por Âncora" (alinhamento de batida preciso ao quadro)
└── Não → Qual é a duração total do vídeo?
    ├── ≤30 segundos → Use o "Sistema de Correspondência Automática de Estrutura" (supercurto, impacto cognitivo rápido)
    ├── 30 segundos ~ 3 minutos → Use o "Sistema de Correspondência Automática de Estrutura" (médio, cadeia lógica completa)
    └── >3 minutos → Use o "Sistema de Correspondência Automática de Estrutura" (longo, um pequeno clímax a cada 30 segundos)

Regra de Mistura: Você pode pegar emprestado localmente o design do template de âncora com base no Sistema de Correspondência Automática (por exemplo, definindo um ponto de explosão de batida no meio do vídeo), mas não copie a linha do tempo fixa do template de âncora.

Regra de Adaptação de Duração (Template de Âncora):

Segmento Gancho (0-16.4s) + Clímax da Batida (17s) é a estrutura dourada, fixa e imutável, e não pode ser movida devido à mudança na duração total;
O design original é de aproximadamente 60 segundos (Gancho 16.4s + Clímax 3.6s + Segmento Científico ~32s + Final 8s);
Se a duração fornecida pelo usuário for maior (ex: 60s / 90s), apenas alongue o segmento de explicação científica, mantendo o tempo do gancho e do clímax inalterados;
A reviravolta final é fixada nos últimos 5-8 segundos, com a posição também inalterada.

Pontos de Tempo Fixos para Cada Segmento:

Segmento	Ponto de Tempo Fixo	Descrição
Início do Gancho	0s	Primeira frase "Você já... por que ainda...?"
Respiração e Escurecimento	16.4-16.9s	Quase silêncio, tela escurece
Explosão da Batida	17.0s	Palavra-âncora aparece, efeito sonoro de impacto. Posição sempre fixa
Termo Emerge	17.6s	Texto pequeno abaixo da palavra-âncora
Início do Segmento Científico	~20s	Entra no segmento de explicação a partir de uma sensação de respiração
Reviravolta Final	Últimos 5-8s	Redefinição da palavra-âncora

Conceitos Centrais

Abertura: Primeiro, escreva sobre a situação real do espectador, depois introduza o conhecimento. A função do conhecimento é explicar "você" mesmo, não apenas divulgar coisas externas.
Proibido: Não fale sobre história ou use jargões no início. História, personagens e materiais experimentais devem aparecer após o clímax do conteúdo.
Parágrafos Visuais: Projete múltiplos grupos de cenas de transição rápida. Cada cena dura cerca de 3 segundos, com uma legenda por grupo. O mesmo fenômeno central pode se repetir em diferentes escalas (pessoal → natural → social), fazendo o espectador perceber que o fenômeno está em toda parte.
Conectividade Coloquial: Use expressões como "Em outras palavras", "Pense comigo" e "Por exemplo" no lugar de jargões.

Sistema de Correspondência Automática de Estrutura (Núcleo)

Após receber a entrada do usuário, siga estas seis etapas para corresponder automaticamente à combinação de estrutura mais adequada. Não copie e cole modelos fixos, mas combine de forma flexível com base no temperamento do tópico, faixa de duração e tipo de categoria.

Primeira Etapa: Analisar os Elementos de Entrada do Usuário

O usuário pode fornecer os seguintes elementos (todos opcionais. Se não for fornecida, o agente julgará automaticamente):

Tópico / Núcleo de Conhecimento: Sobre o que é (obrigatório)
Duração Total: Quantos segundos / minutos
Categoria: Curiosidades / Experimentos Científicos / Saúde e Bem-Estar / Humanidades e História / Outros
Preferência de Estilo: Cibernético / Cura / Estilo Chinês / Minimalista, etc.
Esquema de Cores: Tom especificado

O agente preenche automaticamente os elementos ausentes e anota no início do storyboard: qual gancho foi usado, qual lógica principal, qual final, faixa de duração adaptada, facilitando o ajuste pelo usuário.

Segunda Etapa: Correspondência Automática do Gancho de Abertura (Escolha 1 de 4, Janela de Ouro para Reter 0-3s)

Objetivo central: Quebrar o hábito de rolagem, fazer o usuário parar o dedo. Escolha automaticamente com base no temperamento do tópico:

Tipo de Gancho	Cenário Aplicável	Modelo de Frase	Exemplo
Conclusão Contraintuitiva	O tópico em si tem um contraste cognitivo	Apresente diretamente uma conclusão subversiva, criando conflito cognitivo	"Água quente apaga fogo mais rápido que água fria. 90% das pessoas estão erradas."
Pergunta Profunda	Dores da vida / Curiosidade	Atinge diretamente a dúvida, guiando para esperar a resposta	"Por que é proibido usar celular em postos de gasolina? A verdade nem é o que você pensa."
Suspense do Fenômeno	Há maravilhas visuais / Cenas anormais	Mostre primeiro a imagem mágica, sem dizer o motivo	(Bola de pingue-pongue flutuando no sopro de um secador) "Você sabe por que a bola de pingue-pongue não cai?"
Impacto Numérico	Contraste de dados forte / Curiosidades	Use números extremos para reforçar o contraste	"Seu celular esconde mais de 1000 tipos de bactérias."

Princípio de Seleção: Quanto mais contraintuitivo o tópico, mais adequado para o tipo de Conclusão Contraintuitiva. Quanto mais próximo de uma dúvida da vida, melhor o tipo de Pergunta Profunda. Quanto mais maravilhoso visualmente, melhor o tipo de Suspense do Fenômeno. Quanto mais impressionante o número, melhor o tipo de Impacto Numérico. Pode-se combinar (ex: Impacto Numérico + Contraintuitivo), mas o núcleo não deve exceder 1.

Terceira Etapa: Correspondência Automática do Corpo da Divulgação Científica (Escolha 1 de 4, Área de Informação Central)

Objetivo central: Tornar o conhecimento complexo popular e claro, com lógica clara e sem enrolação. Escolha automaticamente com base no tipo de conhecimento:

Lógica Organizacional	Cenário Aplicável	Cadeia Lógica	Características
Desmembramento em Pontos	Princípios, Ciência Comum	Apresenta o problema → Explica em 2-3 pontos → Cada ponto com visual/legenda	Saída estruturada, reduzindo a dificuldade de compreensão
Raciocínio Progressivo	Explicação de Fenômenos	Fenômeno da vida → Causa superficial → Princípio subjacente → Aplicação prática	Aprofundamento gradual, alinhado com a cognição
Verificação Experimental	DIY, Ciência Hard	Apresenta hipótese → Mostra materiais → Processo experimental → Exibição do fenômeno → Interpretação do princípio	Visual substitui pregação, alto impacto
Correção de Boato	Equívocos	Equívoco popular → Aponta erro → Conclusão correta → Base científica	Primeiro quebra, depois constrói, forte ponto de memória

Princípio de Seleção: Ciência comum / Princípios → Desmembramento em Pontos. Fenômenos / Porquês → Raciocínio Progressivo. DIY / Experimentos → Verificação Experimental. Equívocos / Boatos → Correção de Boato.

Quarta Etapa: Correspondência Automática do Fecho Final (Escolha 1 de 4, Últimos 5-10 Segundos)

Objetivo central: Aumentar a taxa de conclusão, engajamento e crescimento de seguidores. Escolha automaticamente com base no objetivo do vídeo:

Tipo de Final	Cenário Aplicável	Modelo de Frase	Exemplo
Reforço de Resumo	Conteúdo denso em conhecimento	Destile a conclusão central em 1 frase	"Resumindo, água quente apaga fogo mais rápido porque o vapor d'água sufoca as chamas."
Guia de Interação	Geral / Quer gerar comentários	Pergunta aberta para guiar comentários	"Que outros fatos contraintuitivos você conhece? Comente aqui!"
Gancho de Seguir	Conteúdo em série / Fase de crescimento	Antecipe o próximo conteúdo, guie para seguir	"No próximo vídeo, explico por que a língua gruda no metal no inverno. Siga-me para não perder!"
Extensão de Valor	Utilitário da Vida	Adicione cenários de aplicação na vida	"Esse princípio em casa pode ser usado para... muito prático."

Princípio de Seleção: Vídeos curtos priorizam Reforço de Resumo (fechamento rápido). Duração média-alta prioriza combinação de Guia de Interação + Reforço de Resumo. Contas de série priorizam Gancho de Seguir. Categoria vida prioriza Extensão de Valor.

Quinta Etapa: Fórmula de Adaptação da Faixa de Duração

Ajuste automaticamente a densidade e o ritmo da estrutura com base na duração total:

Faixa de Duração	Fórmula de Estrutura	Características
15-30s Supercurta	Gancho (0-3s) + Conclusão central + Explicação mínima (3-25s) + Fechamento interativo (25-30s)	Sem argumentação complexa, uma frase de conclusão + uma frase de explicação, ritmo muito rápido, foco em impacto cognitivo
1-3 min Média	Gancho forte na abertura → 2-3 pontos de conhecimento / etapas experimentais → Cada ponto com visual → Resumo + Guia	Densidade de informação moderada, cadeia lógica completa, faixa mais comum para contas de divulgação científica
3-5 min Longa	Suspense forte na introdução → Contexto → Cerca de 3 sub-argumentos centrais → Análise profunda → Resumo edificante	Adequado para áreas verticais especializadas (astronomia / mecânica / medicina), retém pelo profundidade do conteúdo, define um pequeno clímax a cada 30s para evitar rolagem

Sexta Etapa: Variações de Estrutura por Categoria

Ajuste fino do foco estrutural de acordo com o tipo de categoria:

Categoria	Variação de Estrutura	Núcleo
Curiosidades	Pergunta contraintuitiva → Dá a resposta diretamente → 1-2 evidências de detalhe → Pergunta interativa	Rápido, surpreendente, divertido. Sem argumentação aprofundada, foco na sensação de "não esperava"
Experimentos Científicos	Apresenta pergunta → Mostra materiais → Operação experimental → Câmera lenta do fenômeno → Explicação do princípio → Aplicação na vida	Impacto visual primeiro, princípio em linguagem coloquial, use imagens em vez de longas narrações
Saúde / Bem-Estar	Introdução com cenário de dor → Equívoco comum → Solução correta → Explicação científica → Sugestão de ação	Próximo da vida, primeiro toca na dor depois oferece a solução, reforça utilidade e persuasão
Humanidades / História	Começa com pergunta curiosa → Narrativa como história → Interpolação de conhecimento → Resumo edificante	Use histórias para trazer conhecimento, evite tom de sermão, aumente o interesse do conteúdo

Princípios de Bônus Estrutural (Aplicável a Todo o Vídeo)

Reforço de Legendas: Destaque conclusões centrais e numerações de pontos com legendas chamativas para reduzir o custo de compreensão; amplie ou mude a cor de números-chave / palavras-chave.
Controle de Ritmo: Mude de ponto de informação ou cena a cada 10-15 segundos, evitando monotonia de planos longos; em vídeos curtos, mude a cada 3-5 segundos.
Visualização Primeiro: Se puder usar animação, experimento ou diagrama, não use apenas narração; se puder expressar com imagens, não acumule texto.
Narração em Segunda Pessoa: Use "você" durante todo o vídeo, fazendo o espectador sentir que o conhecimento está explicando ele mesmo, não observando a história de outra pessoa.

Template Clássico de Clímax Orientado por Âncora (Preciso ao Quadro, Ativado para Ritmo Forte/Alinhamento de Batida)

Ative este template quando o usuário solicitar ritmo forte, alinhamento de batida, explosão no ponto ou narrativa documental. O núcleo é: todo o vídeo se desenvolve em torno de uma "palavra-âncora", com um ponto de explosão de batida no 17º segundo, fazendo o espectador lembrar do conceito central no pico emocional.

Primeira Etapa: Encontre a Palavra-Âncora (Deve ser feita antes de escrever qualquer roteiro)

A palavra-âncora é o prego do vídeo: 2 a 6 caracteres, representando a situação, confusão ou momento contraintuitivo que cai na vida do espectador - não o termo em si.

Três Critérios para uma Boa Palavra-Âncora:

Imersão: O espectador vê e pensa "Isso é sobre mim";
Generalidade: A mesma palavra pode resumir todo o princípio;
Reversível: Pode ser redefinida no final - no início é um dilema, no final torna-se compreensão, alívio ou força.

Exemplos de Palavras-Âncora:

Princípio	Palavra-Âncora	Início (Dilema)	Final (Reviravolta)
Efeito Pós-Rotação	Parado	Correndo muito, mas ainda parado	Entendeu a natureza da ilusão de movimento
Custo Irrecuperável	Não querer largar	Não quer largar, afunda cada vez mais	Aprendeu o poder de parar a tempo
Viés de Sobrevivência	Pessoas invisíveis	Só vê os sobreviventes, ignora a maioria silenciosa	Aprendeu a ver a verdade ignorada

Segunda Etapa: Segmento Gancho (0-16.4s)

Princípio Central: Primeiro escreva a situação do espectador, depois apresente o conhecimento. O conhecimento serve para explicar "você".

Não fale de história ou use jargões no início; história, personagens e experimentos vêm todos após o clímax.
Formato Obrigatório da Primeira Frase: Use a segunda pessoa para escrever o paradoxo ou confusão que o espectador está vivendo. Frase fixa: "Você já..., por que ainda...?"
Use parágrafos visuais no segmento do gancho: 3-4 grupos de cenas de transição rápida, cada cena cerca de 3 segundos, o mesmo fenômeno central se repete em diferentes escalas (pessoal → natural → social).

Terceira Etapa: Clímax da Batida (17º Segundo, Preciso ao Quadro)

Entre 16.5-16.9 segundos, há uma "respiração" (quase silêncio). No 17.0s, a batida cai. O alinhamento visual é rigorosamente executado:

Ponto de Tempo	Ação Visual	Alinhamento de Áudio
16.4-16.9	A tela escurece gradualmente, todos os elementos desaparecem	Respiração (quase silêncio)
16.9-17.0	Pausa de cerca de 3 quadros	Silêncio completo
17.0	A superfície do papel acende repentinamente ou uma explosão de tinta (consistente com o estilo do vídeo); a enorme palavra-âncora aparece simultaneamente (cerca de 1/3 da largura do quadro); um círculo de tinta ou halo se expande do centro para fora	Batida cai
17.6	Uma pequena linha de texto emerge abaixo da palavra-âncora: Nome do termo (chinês-inglês)	Eco
17.6-~20	Mantenha a cena, apenas uma leve sensação de respiração (leve zoom da âncora / pulsação do brilho)	Narração pausada, mantenha silêncio

Quarta Etapa: Segmento de Explicação Científica (Aprox. de 20s até o Final)

Objetivo Central: Explicar claramente o princípio por trás da palavra-âncora, levando o espectador da "confusão" ao "alívio". História, personagens e materiais experimentais são apresentados aqui, mas todos servem para explicar "por que você experimentou aquele dilema".

Maneiras de Organizar a Explicação Científica (Seleção automática com base no tipo de princípio):

Maneira de Organizar	Cenário Aplicável	Cadeia Lógica
Explicação por Pontos	Princípios, Ciência Comum	Apresenta a causa central → Explica o mecanismo em 2-3 pontos → Cada ponto com um visual + uma legenda
Explicação Progressiva	Explicação de Fenômenos	Fenômeno superficial → Causa intermediária → Princípio subjacente → Por que afeta você
Verificação Experimental	DIY, Ciência Hard	Apresenta hipótese → Processo experimental → Exibição do fenômeno -> Interpretação do princípio (retornando à âncora)

Requisitos Obrigatórios do Roteiro:

Segunda pessoa durante todo o trajeto: Use "você" para narrar. Cada explicação deve fazer o espectador sentir "Ah, então meu dilema anterior era por isso";
Retorne à palavra-âncora: A cada 2-3 frases, retorne à palavra-âncora. Não se desvie para outros tópicos; a âncora é o fio condutor do vídeo, e o segmento científico é apertar esse fio;
Coloquial primeiro: O termo já foi exibido no clímax. Agora use linguagem simples - "Em outras palavras", "Pense comigo", "Por exemplo". Proibido empilhar vocabulário técnico;
Ritmo consistente: Mude de cena a cada 3-5 segundos, mantendo o mesmo ritmo do segmento do gancho. Não diminua de repente;
Reforço de Legendas: Destaque conclusões centrais, números-chave e numerações de pontos com legendas chamativas para reduzir a dificuldade de compreensão.

Exemplo de Roteiro para o Segmento Científico (com "Efeito Pós-Rotação / Parado"):

20-23s [Explicação 1] Você olhou para um círculo girando por 30 segundos. Quando para e olha para a parede parada, a parede parece estar se movendo. → Legenda: Olhos "cansaram" primeiro 23-26s [Explicação 2] Isso porque as células da sua retina estavam descarregando em uma direção. Quando você para, elas ainda estão voltando por inércia. → Legenda: Inércia do nervo óptico 26-29s [Explicação 3] Então, mesmo estando parado, você sente que o mundo está correndo na direção oposta. → Legenda: Você não se moveu, são seus olhos que estão "mentindo" 29-32s [Explicação 4] Esse fenômeno é chamado de pós-efeito de movimento. Todos os sistemas sensoriais têm um "resíduo de fadiga" semelhante - se você ouvir um ruído por muito tempo, pode ter alucinações auditivas; se tocar em água fria por muito tempo, sentirá que a água está esquentando. → Legenda: Não são apenas os olhos, todo o corpo tem "inércia"

Quinta Etapa: Reviravolta Final com a Palavra-Âncora (Últimos 5-8 Segundos)

Objetivo Central: Transformar a palavra-âncora de "dilema" em "compreensão / alívio / força", formando um ciclo emocional.

Formato Obrigatório:

A última frase deve redefinir a palavra-âncora - no início era um dilema do espectador, no final torna-se força ou percepção;
Modelo de frase: "Na verdade, ... não é sua culpa, mas ..." / "Entendendo isso, você não vai mais ..." / "O chamado ..., na verdade é ...";
A cena retorna a um cenário que ecoa o segmento do gancho (ex: se o gancho era uma mesa de estudo, o final também é a mesa de estudo, mas com uma mentalidade diferente).

Exemplo de Reviravolta Final (com "Parado"):

32-36s [Reviravolta Final] Na verdade, "parado" não significa que você não se esforçou o suficiente, mas sim que seu sistema sensorial está pregando uma pequena peça em você. Entendendo isso, você não vai mais se preocupar por sentir que está se movendo, mas não progredindo - você só precisa parar e deixar seus olhos descansarem. Cena: Do vórtice giratório, desaparece lentamente, voltando para a mesa de estudo silenciosa do início, com a luz do sol brilhando sobre ela.

Formato de Entrada

O usuário fornece: duração total, tópico / núcleo de conhecimento, categoria opcional / esquema de cores / preferência de estilo. O agente corresponde automaticamente ao tipo de gancho, lógica principal e método de final, gerando um storyboard completo (timestamp + visual + legenda + anotação estrutural).

Formato de Saída do Storyboard: Cada segmento é anotado com [Tipo de Gancho] [Lógica Principal - Ponto N] [Método de Final], permitindo que o usuário veja rapidamente a escolha estrutural.

Exemplo 1 (40s, Categoria Curiosidades, Tópico: Entropia):

Seleção Estrutural: Gancho Tipo Pergunta Profunda + Corpo Tipo Raciocínio Progressivo + Final Tipo Reforço de Resumo (versão comprimida para a faixa de 1-3 min) 0-4s [Gancho · Pergunta Profunda] Você já arrumou o quarto perfeitamente, por que ele está bagunçado de novo uma semana depois? 4-7s [Corpo · Progressivo 1 · Escala Pessoal] A mesa recém-organizada: os livros deslizam silenciosamente para a borda. → Legenda: As coisas sempre deslizam para a desordem sozinhas 7-10s [Corpo · Progressivo 2 · Escala Natural] Uma gota de tinta cai em água limpa. Ela se espalha lentamente e nunca mais se junta. → Legenda: As moléculas nunca param de se difundir 10-13s [Corpo · Progressivo 3 · Escala Social] Uma rua velha que ninguém varre: folhas caem uma camada sobre a outra. → Legenda: A ordem desmorona se ninguém a mantiver 13-16s [Corpo · Fechamento do Princípio Subjacente] Então, a desordem é o estado padrão do mundo. A ordem é a exceção que requer dinheiro e esforço para ser mantida. 16-34s [Corpo · Material Histórico Posterior] Clausius propôs a entropia em 1865, a fórmula no túmulo de Boltzmann, um copo de água fria nunca ferve sozinho... 34-40s [Final · Reforço de Resumo] Combater a entropia é uma longa prática ao longo da vida de cada um.

Exemplo 2 (25s, Categoria Saúde, Tópico: Beber água gelada vs. água morna):

Seleção Estrutural: Gancho Tipo Conclusão Contraintuitiva + Corpo Tipo Correção de Boato + Final Tipo Guia de Interação (adaptado para a faixa supercurta de 15-30s) 0-3s [Gancho · Conclusão Contraintuitiva] Beber água gelada faz mal ao estômago? Essa história te enganou por décadas. 3-8s [Corpo · Quebra o Mito] Muita gente acha que água gelada irrita o estômago → Legenda: Água gelada = faz mal ao estômago? 8-15s [Corpo · Estabelece a Conclusão] A verdade é que a temperatura do estômago permanece em 37°C. A água gelada é aquecida instantaneamente, não consegue machucar o estômago. → Legenda: O estômago tem um sistema termostático próprio 15-20s [Corpo · Reviravolta da Verdade] O que realmente machuca o estômago é: beber muito gelo com o estômago vazio + uma dieta irregular de longo prazo. → Legenda: Maus hábitos são os verdadeiros culpados 20-25s [Final · Guia de Interação] Você costuma beber água gelada ou morna? Me conta nos comentários.

Exemplos de Projetos Completos (diretório examples/)

A skill inclui dois projetos de exemplo completos e prontos para testar. Basta copiá-los para o seu projeto e executar o fluxo completo de lint / preview / render:

Exemplo	Caminho	Sistema de Escrita	Duração	Estilo
Entropia	`examples/entropy-16-9/`	Desmembramento em Pontos (Template Base)	40s	Cartão de Conhecimento Escuro
Dormir e Cansado	`examples/sleep-tired-16-9/`	Template de Clímax com Âncora (Explosão da Batida aos 17s)	40s	Estilo Médico-Tecnológico

Ambos os exemplos passam na verificação lint (0 erros, 0 avisos), saída HD 1920×1080, servindo como modelos de referência para diferentes sistemas de escrita.

Regras Obrigatórias para Escrever Composições

Siga rigorosamente o contrato de composição do HyperFrames: O nó raiz deve ter data-composition-id, data-width, data-height, data-duration; os fragmentos usam class="clip" + data-start + data-duration; Registre uma timeline GSAP pausada em window.__timelines["<id>"] (a key deve ser igual ao data-composition-id do nó raiz).
Formato Paisagem 16:9: <meta name="viewport" content="width=1920, height=1080">, nó raiz com as mesmas dimensões; saída padrão HD 1920×1080.
Antes de escrever o código, leia completamente references/hyperframes-contract.md para evitar todos os erros comuns de lint e armadilhas do GSAP.
Não use <template> para envolver nós raiz independentes; não produza snippets de código, o HTML deve ser completo e independente.
Quando houver ≥2 storyboards, use a arquitetura de subcomposição modular: cada cena é um arquivo compositions/scene-*.html (contendo o style/script/nó raiz da cena dentro de <template>). O index.html principal monta cada cena usando data-composition-src. O data-composition-id do host, o data-composition-id do nó raiz dentro do arquivo de subcomposição e a key do window.__timelines devem ser idênticos. Veja a seção 8 de references/hyperframes-contract.md.

Exemplo de Código Mínimo Funcional (2 clips, executável diretamente)

Abaixo está um exemplo mínimo completo de index.html, com 2 storyboards, transição de elemento contínuo e registro de timeline GSAP. Use isso como baseline para modificar ao criar novas cenas:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, height=1080">
<title>Entropia · Exemplo</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a0f; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }

  /* Contêiner raiz: 1920×1080, 16:9 */
  .composition {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #0a0a0f;
  }

  /* Clip: posicionamento absoluto para preencher, visibilidade controlada pela estrutura */
  .clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Storyboard 1: Mesa bagunçada */
  #scene-desk { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
  #scene-desk .book {
    position: absolute;
    width: 80px;
    height: 120px;
    background: #e94560;
    border-radius: 4px;
    left: 300px;
    top: 300px;
    transform-origin: center;
  }
  #scene-desk .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }

  /* Storyboard 2: Gota de tinta caindo em água limpa */
  #scene-ink { background: linear-gradient(180deg, #0f3460 0%, #16213e 100%); }
  #scene-ink .drop {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #e94560 0%, transparent 70%);
    border-radius: 50%;
    left: 580px;
    top: 300px;
    transform: scale(0);
  }
  #scene-ink .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }
</style>
</head>
<body>

<div class="composition"
     data-composition-id="entropy-demo"
     data-width="1920"
     data-height="1080"
     data-duration="10">

  <!-- clip 1: 0-5 segundos, cena da mesa -->
  <div class="clip" id="scene-desk" data-start="0" data-duration="5">
    <div class="book" id="book"></div>
    <div class="subtitle" id="desk-subtitle">As coisas sempre deslizam para a desordem sozinhas</div>
  </div>

  <!-- clip 2: 5-10 segundos, cena da tinta (elemento contínuo: vermelho do livro → vermelho da tinta) -->
  <div class="clip" id="scene-ink" data-start="5" data-duration="5">
    <div class="drop" id="ink-drop"></div>
    <div class="subtitle" id="ink-subtitle">As moléculas nunca param de se difundir</div>
  </div>

</div>

<script>
  window.__timelines = window.__timelines || {};

  const tl = gsap.timeline({ paused: true });

  // === Cena 1: Mesa (0-5s) ===
  tl.from("#book", {
    x: 0, y: 0, rotation: 0,
    duration: 2, ease: "power2.out"
  }, 0.5);
  // Livro desliza silenciosamente para a borda (representando "desordem")
  tl.to("#book", {
    x: 200, y: 100, rotation: 15,
    duration: 3, ease: "power1.inOut"
  }, 1);
  // Legenda aparece
  tl.from("#desk-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 2);

  // === Transição: Elemento vermelho do livro → vermelho da tinta (elemento contínuo aos 5s) ===
  // O elemento do clip anterior desaparece naturalmente no final do clip, enquanto o elemento do próximo clip entra simultaneamente
  // Aqui, a correspondência de cores cria a ilusão de "um mesmo elemento" em movimento contínuo

  // === Cena 2: Tinta se difunde (5-10s) ===
  tl.from("#ink-drop", {
    scale: 0, opacity: 0,
    duration: 0.5, ease: "power2.out"
  }, 5.2);
  tl.to("#ink-drop", {
    scale: 4, opacity: 0.6,
    duration: 4, ease: "power1.out"
  }, 5.5);
  tl.from("#ink-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 6);

  window.__timelines["entropy-demo"] = tl;
</script>

</body>
</html>

Comentários Chave:

data-composition-id="entropy-demo" deve ser exatamente igual à key window.__timelines["entropy-demo"];
A unidade de data-duration é segundos, não milissegundos;
O parâmetro de posição (segundo parâmetro) da timeline GSAP também é em segundos;
Não aplique tween no próprio elemento clip (a estrutura controla a visibilidade); aplique tween apenas em seus elementos filhos;
Transição de elemento contínuo: O elemento do clip anterior se deforma/move para um estado, e o próximo clip começa a partir de uma posição/forma similar, criando a ilusão de "a mesma coisa se movendo continuamente".

Guia de Seleção de Gráficos/Animações para Storyboard (Correspondência Automática)

Ao criar, selecione automaticamente os gráficos e efeitos do lado direito com base na imagem central do texto de cada storyboard, não use os exemplos de grade/pontos/barras fixos.

Fluxo de Seleção

Analise o texto de cada storyboard para extrair a imagem central (ex: "crescimento/desordem/possibilidade/ordem/rede/ciclo/atmosfera") e a intensidade emocional (sóbrio/explosivo/sonhador/épico/cibernético/curador, etc.);
Selecione 1 gráfico principal da tabela abaixo para representar a imagem central. Pode sobrepor até 5 tipos de adornos auxiliares (partículas, efeitos de luz, linhas decorativas, texturas de fundo, símbolos de canto, brilho, halos, fragmentos geométricos, etc.). Os efeitos são correspondidos pela tabela. A quantidade e o tipo de adornos servem à emoção do texto, sem necessidade de preencher cada quadro;
Verifique a determinismo: Priorize soluções CSS/HTML implementáveis. Gráficos complexos como fractais/autômatos celulares/3D/Shader/texturas/partículas devem ser implementados deterministicamente (semente fixa, matriz pré-calculada, proibido Math.random, relógio em tempo real, requisições de rede). Gráficos de dados usam dados ilustrativos;
Os gráficos devem estar dentro da caixa de segurança 16:9 (≥64px em todos os lados), sem transbordar da tela. A densidade visual, intensidade de efeitos especiais e saturação de cores são decididas pelo texto do roteiro, sem restrição uniforme de "contenção".

Mapeamento Semântico → Gráfico → Efeito (Comum)

Imagem do Storyboard	Gráfico Recomendado	Efeito Recomendado
Crescimento / Estabelecer Ordem	Barras, Escadas, Árvore Crescendo, Espiral Dourada	Cresce do fundo, sobe gradualmente
Desordem / Entropia / Caos	Blocos de Grade, Pontos Dispersos, Fragmentos Voronoi, Rachaduras Fractais	Deriva, Se espalha, Fragmenta
Possibilidade / Ramificação	Diagrama de Árvore, Pontos, Cordas, Mapa Mental	Irradia para fora, Crescimento de ramos
Ciclo / Repetição	Gráfico de Anel, Círculo, Onda, Cicloide	Rotação, Pulso, Vai e Volta
Relação / Rede	Topologia de Rede, Mapa de Conhecimento, Gráfico de Força Direcionada	Conexão de nós, Acendimento progressivo
Tempo / Processo	Gráfico de Linha, Gráfico de Área, Linha do Tempo	Crescimento do traço, Extensão da trajetória
Comparação / Distribuição	Gráfico de Pizza, Gráfico de Anel, Gráfico de Radar, Gráfico de Caixa	Abertura de setores, Apresentação item por item
Espaço / Estrutura	Grade Isométrica, Nuvem de Pontos, Wireframe 3D	Construção camada por camada, Rotação de entrada
Atmosfera / Abstrato	Textura de Ruído, Interferência de Onda, Onda Estacionária, Fluxo de Partículas	Fluxo, Ondulação, Dissipação

O banco de candidatos completo (9 categorias: Geometria Básica, Gráficos de Dados, Arte Generativa de Fractais, Simulação e Autômatos Celulares, Bitmap e Texturas Programáticas, Gráficos 3D, Diagramas Estruturais/Relacionais, Gráficos de Texto, Gráficos Dinâmicos) e as restrições de implementação determinística estão na seção 7 de references/hyperframes-contract.md.

Estilo Vibe Video Awards (16:9 Paisagem)

Princípio Central: O estilo visual é decidido pelo texto do roteiro, buscando ser impressionante e envolvente.

Nota: O conteúdo da seção seguinte foi truncado. A skill completa contém orientações sobre estilo visual ("Visual Impressionante e Envolvente"), incluindo diretrizes para tipografia, esquemas de cores, iluminação, partículas e efeitos de tela cheia, bem como detalhes para escrever composições utilizando a arquitetura modular de subcomposição.

VibeDS-skill

O que é VibeDS-skill?

Perguntar na sua IA favorita

Documentação