Vídeo Explicativo de Dados (Estilo Tatakye)

Construa um vídeo explicativo curto, com legendas em chinês, como um único arquivo HTML autossuficiente que o usuário reproduz em um navegador e grava a tela.

Para que isso é bom

Transformar um artigo, ensaio ou descoberta de pesquisa em um vídeo de 3 a 6 minutos
Estética minimalista preta e dourada de "artigo de opinião" (linhagem 3Blue1Brown / Veritasium / Tatakye)
Entregáveis onde o usuário deseja postar no Xiaohongshu / WeChat Video / Bilibili / YouTube
Zero ativos externos — sem fontes para comprar, sem imagens de arquivo, sem preocupações com royalties, sem servidor

Antes de escrever uma única linha de código

Perguntas inegociáveis anteriores — faça estas com AskUserQuestion, não depois. Errar significa reescrever.

Tema em uma frase: Não "sobre o que é o artigo" — a afirmação que o vídeo está defendendo. Se você não consegue dizer em uma frase, você ainda não tem um vídeo, você tem uma lista de leitura.
A coluna vertebral: Qual único objeto na tela ancorará todo o vídeo? (Veja "A Coluna Vertebral" abaixo — esta é a decisão de design mais importante, e a que a maioria dos vídeos explicativos erra ao omitir completamente.)
Duração: 3-4 min (destaques) vs 5-6 min (duração padrão Tatakye) vs 8-10 min (profundo). A duração determina quantas seções sobrevivem. Para um artigo de 10 seções visando 5 min, você precisa eliminar 60-70% das seções.
Modo de narração: Apenas legendas (ritmo baseado em texto) vs narração por IA vs auto-gravada. "Apenas legendas" é o padrão — as próprias legendas se tornam a batida.
Atribuição: Como creditar o autor original. "原文 · [Nome]" no canto superior direito é o padrão limpo. Se você tem uma coluna vertebral, a atribuição vai abaixo da coluna, não no lugar dela.
A recompensa (não é uma pergunta retórica): O que específico o espectador leva embora? Uma pergunta reformulada NÃO é uma recompensa. "Você é eles?" soa poderoso, mas não dá nada para o espectador levar para casa. Uma recompensa real é uma lista curta nomeada (2-4 itens) que eles podem repetir no dia seguinte. Veja "Recompensa, não retórica" abaixo.

Nunca pule estas. A primeira tentativa quase sempre falha no #1 (tema) e #5 (aterrissagem). Você pode reescrever livremente uma vez que estas estejam definidas.

A Coluna Vertebral — a decisão de design mais importante

Um grande vídeo explicativo tem uma coluna vertebral: um objeto persistente na tela que permanece visível durante a maior parte do vídeo, e cada batida ilumina uma parte diferente dele.

O vídeo 股市回报 do Tatakye é o exemplo canônico. A coluna vertebral é a fórmula p = E[mx], fixada no canto superior direito de 1:00 a 3:30. Cada seção destaca um símbolo — x, depois m, depois π_s — ensinando o significado desse símbolo. No final, a fórmula "desbloqueia" em três conclusões concretas (x → "quais futuros", m → "qual mundo", π_s → "quanto tempo esperar").

Por que isso funciona, e por que vídeos sem coluna vertebral parecem fracos:

A coluna vertebral é uma âncora visual. Se um espectador desvia o olhar e volta, ele sabe imediatamente "o que estamos decompondo atualmente."
Converte uma estrutura abstrata em um objeto físico na tela. A ideia tem coordenadas.
Os rótulos de capítulo só podem dizer aos espectadores onde na estrutura eles estão. A coluna vertebral diz aos espectadores qual componente da ideia está sendo explicado — que é um sinal mais forte.
A recompensa no final pode literalmente ser "a coluna vertebral, resolvida." Você abre com uma pergunta, constrói cada parte da coluna e fecha entregando a coluna de volta como a resposta.

O que faz uma boa coluna vertebral

Um candidato a coluna vertebral deve:

Caber em uma linha (para que possa viver em um canto o tempo todo)
Ter 3-5 componentes nomeados que cada um mapeia para uma batida do vídeo
Ser visualmente estável — não uma animação, um quadro de referência estático
Conter a tese — se você entende cada parte da coluna vertebral, você entende a peça

Formas comuns (classificadas por impacto):

Uma equação: 工作 = 肌肉 × 心智, p = E[mx], 价值 = 稀缺性 × 关注度
Um diagrama com setas nomeadas: 生产者 → 产品 → 用户, nós que você pode destacar um de cada vez
Uma razão ou comparação rotulada: 过去 : 现在 : 未来
Uma sequência curta: 观察 → 假设 → 实验 → 结论

Evite como coluna vertebral:

Um único número (sem componentes para iluminar)
Uma frase longa (muito verbosa para um canto, derrota o propósito)
Um gráfico (gráficos são visuais-chave, eles vivem no centro, não como coluna vertebral)

Coluna vertebral deve aparecer ANTES do final do Ato I, e persistir

Não jogue a coluna vertebral no espectador no início e nunca mais volte. Não espere até o Ato II para introduzi-la. A estrutura é:

0:00–0:30 Gancho: sem coluna vertebral ainda; configure a pergunta
~0:30 Revelação da coluna: a equação/diagrama aparece no canto superior direito
Ato I–III: coluna permanece, cada ato ilumina um componente
Recompensa: coluna se dissolve e se torna a lista de três itens de conclusões

Destaque de termo da coluna vertebral (receita visual)

Cada termo da coluna vertebral deve ter três estados:

escuro (padrão): color: var(--dim) — cinza, presente mas suave
aceso (atualmente sendo explicado): color: var(--gold) + text-shadow glow — inconfundivelmente "estamos aqui agora"
concluído (já explicado): color: var(--fg) — branco, ensinado, estabelecido

Quando uma nova seção começa, rebaixe o .lit anterior para .done, promova o novo termo para .lit. Um termo aceso por vez. O efeito visual: a coluna vertebral acende progressivamente da esquerda para a direita, e no final tudo está branco (totalmente ensinado), pronto para se dissolver na recompensa.

Estrutura narrativa — uma afirmação, poucas batidas

A única regra rígida: a peça defende uma afirmação, e cada batida existe para servi-la. Se uma seção não impulsiona a afirmação ou prepara uma batida posterior que o faça, corte-a.

Além disso, a estrutura é uma ferramenta, não um modelo. Escolha a forma que se ajusta à afirmação:

Três atos (Gancho → Padrão → Reviravolta → Custo) — bom quando a afirmação tem uma reversão surpreendente (como "já fizemos isso antes, mas desta vez há um custo")
Problema → Mecanismo → Implicação — bom para explicar por que algo funciona da maneira que funciona
Linha do tempo / acúmulo — bom quando o ponto é a acumulação ("olha o quanto isso chegou")
Comparação — bom para "A vs B, e aqui está por que importa"
Pergunta → Tentativas → Resolução — bom para descobertas de pesquisa ou peças de investigação
Revelação de um único insight — um fato surpreendente, lentamente construído e depois aterrissado (o vídeo 股市回报 do Tatakye é este)

Como escolher: diga a afirmação de uma frase em voz alta. Qual é o ritmo natural de fazer esse argumento? Essa é sua estrutura.

A contagem de seções escala com a duração, não com a estrutura:

3-4 min → 3-4 batidas-chave
5-6 min → 5-7 batidas
8-10 min → 8-12 batidas

Cada batida precisa de:

Um visual-chave (uma curva, uma comparação, um diagrama, um evento de partícula)
Um número-chave OU uma frase-chave
Uma transição que pivota para a próxima batida (não apenas "e agora seção 2")

Bandeira vermelha: se seu esboço parece "seção 1, seção 2, seção 3..." como uma lista plana, você está guiando o usuário através de uma lista de leitura. Comprima ou re-sequencie para que as batidas se encadeiem — cada uma fazendo a próxima parecer inevitável.

Economia de cena — menos cenas, evoluções mais longas

Um modo de falha comum: fazer de cada seção uma nova cena. Resultado: sete visuais não relacionados em sequência, cada um durando 30 segundos, os espectadores ficam com whiplash e não lembram de nada.

O princípio Tatakye: um objeto visual, evoluindo por 2-3 minutos. No vídeo 股市回报, a "grade de espaço de probabilidade" está na tela de ~0:40 a ~2:30 — quase dois minutos. Durante esse período:

Aparece como apenas linhas ("todos os mundos possíveis")
Crescem barras douradas (x, pagamento em cada mundo)
Barras ficam coloridas (m, peso de cada mundo)
A fórmula aparece acima (valor esperado)
Números específicos sobrepõem (exemplo concreto: 0.86, +16.9%)
Rótulos verbais sobrepõem ("萧条/繁荣")

Seis iterações, um objeto visual. Os olhos do espectador nunca redefinem.

Regras práticas

Alvo: 3-5 cenas no total para um vídeo de 5 minutos. Mais do que isso = provavelmente mudando demais.
Duração mínima da cena: 60-90 segundos para cenas substantivas. Menos de um minuto = provavelmente pertence como uma camada dentro de outra cena, não uma cena própria.
Prefira cena-cresce-em-próxima-cena em vez de corte. Exemplo: um gráfico de curva dupla cresce uma área sombreada entre as curvas, que cresce barras subindo dessa área — três "seções" de conteúdo, zero cortes de cena.
Mudanças de cena acontecem nos limites dos atos, não dentro dos atos. Dentro de um ato, use sobreposições, destaques, contagens de números, rótulos — não mudanças de cena.

Quando uma mudança de cena É justificada

Gancho → primeira cena de conteúdo
Ato N → Ato N+1 se a metáfora visual fundamentalmente não pode carregar a próxima ideia
Conteúdo → recompensa (o final merece uma redefinição visual)

É isso. Três mudanças de cena em um vídeo de 5 minutos, no máximo.

Recompensa, não retórica

Grandes vídeos explicativos terminam com uma lista específica e nomeada de 2-4 coisas que o espectador pode levar. Não uma pergunta. Não um sentimento. Uma lista.

O vídeo 股市回报 do Tatakye termina entregando três coisas (x, m, π_s) com interpretações concretas: "quais futuros comprar, em qual mundo você está, quanto tempo esperar." O espectador pode repetir isso no jantar naquela noite.

Anti-padrões comuns:

"你，是吗？" / "Você é eles?" — pergunta reformulada. Parece poderoso. Não ensina nada. O espectador fecha o vídeo, lembra da vibe, esquece o conteúdo.
"O que você acha?" — chute retórico. O vídeo não se comprometeu com nada.
"Só o tempo dirá." — evasiva jornalística. Mesmo problema.
Uma única frase de conforto. "Já estivemos aqui antes." — plano, não acionável.

Como uma boa recompensa se sente: como desbloquear a coluna vertebral. A coluna era A = B × C. A recompensa é "então o que importa são: (1) B, (2) C, (3) a interação entre eles." O vídeo literalmente se resolve em sua resposta.

A tela de resposta de 3 itens (receita)

     01            02            03
      X             Y             Z
    label         label         label
   caption       caption       caption

Três colunas verticais, espaçamento igual
Itens aparecem um de cada vez, ~1 segundo de intervalo (campainha por item)
Cada item: número de índice (01/02/03), emblema de um único glifo (um caractere chinês ou símbolo matemático), rótulo curto (2-4 caracteres), legenda de uma frase
Segure por 3-4 segundos depois que todos os três aparecerem, depois transicione para fora
Depois uma linha de encerramento, que pode ser o gancho reformulado como resolvido: "你，在哪一侧？" funciona DEPOIS de você ter nomeado os lados.

Rótulos de capítulo como sinais de conteúdo

Rótulos de capítulo fracos: ATO I, ATO II, ATO III — diz ao espectador onde na estrutura eles estão. Eles não se importam.

Rótulos de capítulo fortes: 肌肉 · 第一次外包, 心智 · 第二次外包, × · 相乘, = · 代价, 答案 · 三件事 — cada rótulo é um termo da coluna vertebral ou uma peça direta de conteúdo. Lendo o rótulo, o espectador sabe imediatamente qual ideia está sendo decomposta agora.

Regra: o rótulo do capítulo deve ser uma palavra que a coluna vertebral destacaria. Se "ATO II" é seu rótulo de capítulo, mas sua coluna vertebral diz "心智", mude o rótulo do capítulo para "心智". Não duplique andaime estrutural no rótulo do capítulo — a estrutura é implícita, o conteúdo é o que os espectadores precisam.

Sistema visual (estilo Tatakye)

Cor

--bg:    #0a0a0f   /* NÃO #000000 — preto puro parece morto na tela */
--fg:    #eceae4   /* branco quente, 2% de viés azul; nunca branco puro */
--dim:   #8a8a90   /* para rótulos de eixo e legendas */
--gold:  #d4a85a   /* ÚNICA cor usada para ênfase */
--red:   #c15b4e   /* apenas para estatísticas "negativas" (salários atrasados) */

Nunca use mais do que estas 5. Resista à vontade de adicionar azul/verde para variedade.

Tipografia — é aqui que os vídeos morrem

Chinês ou inglês, escolha um por elemento. Nunca "ATO II · THE PARALLEL · 第二幕 · 现在轮到心智" — isso é redundante, difícil de ler e grita "slide bilíngue feito por IA". Escolha um idioma por rótulo.
Minimize itálico. Itálico em CJK parece ruim em quase todos os navegadores (glifos falsamente inclinados). Use cor (var(--gold)) para ênfase, não itálico.
Tamanhos mínimos para visualização em dispositivos móveis:
- Marcas de eixo: 17px linha de base (escalado por fontPx())
- Rótulos de eixo: 17-19px
- Rótulos de fim de curva: 19px
- Rótulo do capítulo (canto superior esquerdo): 1.1rem
- Legenda (centro inferior): 1.15rem
- Números de manchete (centro): 4.5rem+
- Texto de abertura/fechamento mega: 1.9rem+
Serifa para números de exibição (fallback EB Garamond → Noto Serif SC). Sans-serif para todo o resto (Inter → PingFang/Noto Sans).

Arquitetura de informação de quatro camadas (assinatura Tatakye)

Cada cena tem até quatro camadas de texto em posições fixas:

Canto superior esquerdo: Rótulo do capítulo (pequeno, espaçado, escuro)
Canto superior direito: Crédito do autor (pequeno, escuro)
Centro: Número grande / manchete (grande, serifado)
Centro inferior: Narração da legenda (médio, sem serifa)
Canto inferior esquerdo em itálico (opcional): Citação acadêmica (恩格斯停滞 · Robert Allen)

Motivos principais (reutilize 3-5 ao longo da peça)

Não invente um novo visual por seção — escolha um pequeno conjunto e varie-os:

Campo de partículas com perspectiva: grade 120×36, linhas distantes perto do horizonte, leve onda senoidal
Curva ascendente no eixo do tempo: plana na maior parte do X, decolagem exponencial; rotule âncoras de tempo como palavras narrativas ("现在", "未来") não anos específicos (2000 já é passado)
Curva descendente com preenchimento de área: colapso de preço / drenagem de valor
Barras de tempo horizontais: comparação de comprimento proporcional (40年 vs 5年 em escala 1/8)
Chuva de código: linhas curtas específicas de domínio caindo, para "máquina assume trabalho cognitivo"
Explosão de ponto / partícula: para momentos de "algo quebra"

Respiração da câmera

Adicione micro paralaxe a qualquer cena estática: camBreath = sin(t*0.14)*6, camSway = sin(t*0.09)*4, aplicado com multiplicador ponderado por profundidade para que elementos próximos se movam mais do que os distantes. Previne a sensação de "quadro morto".

Transições de cena

Sempre use piscadas de escurecimento entre cenas — nunca cortes secos. sceneBlink(cb, {dark:0.45, hold:0.08, light:0.5}): escurecer para preto em 0.45s → executar mudança de cena → clarear em 0.5s. Total ~1s por transição. Parece cortes de filme, não trocas de slide.

Contagem numérica

Todo número grande anima de 0 → alvo com easeOutCubic em ~1.1s quando revelado. Use <span class="count" data-to="..."></span>. Animar no início do quadro via requestAnimationFrame.

Áudio — esparso, atmosférico, não musical

Sem faixas de fundo. Sem loops. Sem melodias.

Pilares de áudio:

Subgrave de ambiente (osc = audioCtx.createOscillator(); osc.type = 'sine'; osc.frequency.setValueAtTime(27.5 + (Math.random()-0.5)*4, t)) — onda senoidal ultra-baixa, quase inaudível, que acentua a tensão. Volume: -28dB normal, sobe para -18dB em momentos de revelação de número grande.
Campainha de revelação (curta, 2 parciais: 660Hz + 1320Hz, decaimento ~0.6s). Uma única campainha quando um grande número aparece. Uma segunda campainha (tom mais alto, 880Hz + 1760Hz) quando a recompensa se desbloqueia.
Brilho de texto (ruído filtrado passa-alta em 3600Hz, envelope de 0.08s). Disparado quando um rótulo de capítulo muda.
Silêncio — lacunas intencionais de 2-3 segundos de silêncio completo após a revelação de um número grande. O silêncio é o efeito.

Implementação:

const actx = new (window.AudioContext || window.webkitAudioContext)();
// Um único oscilador subgrave, religado conforme necessário
// Revela campainhas como osciladores + ganho com envelope de decaimento
// Brilhos de ruído via AudioBufferSourceNode com buffer de ruído branco e BiquadFilterNode

Nunca: reproduza um arquivo de áudio. Nunca use HTMLAudioElement. Sempre sintetize no Web Audio API. O arquivo final não tem um único byte de áudio.

Tamanho e desempenho alvo

Meta de tamanho de arquivo: < 150 KB para um vídeo de 5 minutos com 4 cenas e 2000 partículas. < 200 KB com 6 cenas.
Quedas de quadro: FPS nunca deve cair abaixo de 50 em um laptop de 2020 (Intel Iris). Em dispositivos móveis, 30 fps sustentado.
Estratégia de dimensionamento de partículas: Acima de 2000 partículas, reduza a taxa de atualização para quadro sim, quadro não (pule a lógica de atualização em quadros alternados).

Integrações de código

Abordagem geral

HTML + CSS + JavaScript vanilla em um único arquivo. Sem CDNs, sem frameworks, sem bundlers.
Canvas 2D para a maioria dos gráficos. WebGL reservado para efeitos de partículas acima de 5000 partículas ou profundidade de cor real.
Todo o áudio via Web Audio API.

Estrutura do arquivo

<!DOCTYPE html>
<html>
<head> <!-- estilo inline --> </head>
<body>
  <canvas id="c"></canvas>
  <div id="subtitle"></div>
  <!-- mais divs de sobreposição -->
  <script>
    // Todo o JavaScript aqui
  </script>
</body>
</html>

Funções de utilitário essenciais (`tools.js` é substituído por funções inline)

fontPx(px): Retorna px * Math.min(window.innerWidth/1920, window.innerHeight/1080). Para dimensionamento de fonte que responde ao tamanho da janela, não pixels fixos. Use em toda parte, nunca px fixo.

lerp(a, b, t): a + (b - a) * t. Interpolação linear.

easeOutCubic(t): 1 - Math.pow(1 - t, 3). Para animações de contagem e transições.

sceneBlink(cb, opts): Ver "Transições de cena" acima.

Gerenciamento de estado

Use um único objeto de estado:

const state = {
  t: 0,            // tempo do vídeo (segundos desde o início)
  scene: -1,       // índice da cena atual (-1 = antes do início)
  transitioning: false,
  counts: [],      // elementos de contagem ativos
  particles: [],   // array de partículas
  spineLit: '',    // índice do termo da coluna atualmente aceso
  spineDone: [],   // índices de termos concluídos
};

Animação de contagem

function animateCount(el, target, duration = 1.1) {
  const start = performance.now();
  const from = 0;
  function tick(now) {
    const t = Math.min((now - start) / (duration * 1000), 1);
    el.textContent = Math.round(from + (target - from) * easeOutCubic(t));
    if (t < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}

Integração de coluna vertebral

A coluna vertebral é um elemento div no canto superior direito:

<div id="spine">
  <span class="term dim" data-idx="0">a</span>
  <span class="symbol">=</span>
  <span class="term dim" data-idx="1">b</span>
  <span class="symbol">×</span>
  <span class="term dim" data-idx="2">c</span>
</div>

Ilumine termos chamando setSpineTerm(idx, 'lit' | 'done' | 'dim'), que alterna classes CSS.

Modo debug

Adicione ao final do script:

// MODO DEBUG: Pressione D para alternar sobreposição de depuração
// Mostra: FPS, cena atual, tempo, contagem de partículas
// Pressione S para pular para a próxima cena
// Pressione Espaço para pausar/retomar

Lembretes

Objetivo : Criar um arquivo HTML que o usuário possa reproduzir e gravar. Caminho de entrega: escreva o arquivo, diga ao usuário para abri-lo no navegador e usar QuickTime / OBS / gravador de tela embutido para capturar.
Nunca use "clique para iniciar" ou qualquer interação do usuário. O vídeo começa a reproduzir automaticamente. O usuário deve agir para iniciar o áudio (clique necessário para ativar o AudioContext), mas o primeiro frame é desenhado imediatamente.
Latência zero no primeiro frame. A cena de abertura (gancho) é desenhada na primeira chamada requestAnimationFrame. Sem tela preta.
Estruture todo o áudio como eventos programados, não loops. Use AudioContext.currentTime + delay para sincronizar áudio com visuais.
Elegância metropolitana: Sem cantos afiados. Sem bordas. Sem fundos brancos. Texto claro sobre escuro, com a paleta de cores acima.
Tempo mínimo de tela de resposta: 6 segundos. O espectador precisa de tempo para absorver. Os três itens devem aparecer com 1 segundo de intervalo, depois segurar por 3-4 segundos, depois fade out.
Desligue a depuração antes de entregar. Remova o ouvinte de evento de tecla D e a sobreposição de depuração do HTML final.

Perguntar na sua IA favorita

Documentação