tugrulz/kurzgesagt-style

Vídeos explicativos estilo Kurzgesagt

Esta skill é direção criativa. Ela decide como um vídeo parece, se move, soa e é lido. As skills remotion-* decidem como construí-lo em código: leia remotion-best-practices (o roteador) e remotion-markup antes de escrever qualquer composição, e siga-os sempre que um trecho aqui discordar.

O gênero funciona porque torna ideias complexas pequenas, acolhedoras e divertidas, enquanto os visuais permanecem claros. A maioria das regras abaixo serve a esse propósito: formas simples para que a ideia seja legível, movimento suave constante para que pareça vivo, e grandes saltos de escala para que um número ou uma distância seja sentido em vez de lido.

O estilo em dez regras

1. Sem contornos. As formas são definidas por preenchimento, gradiente e uma forma de sombra. Traços aparecem apenas para linhas de diagrama, gráficos e ponteiros, com um peso uniforme e pontas arredondadas.
2. Geometria simples e arredondada. Círculos, cápsulas, retângulos arredondados, blobs suaves. Se uma forma precisar de mais de uma dúzia de pontos de caminho, simplifique-a.
3. Fundo escuro e saturado, acentos quentes. Um campo gradiente escuro (marinho, índigo, berinjela, verde-azulado escuro) com um ou dois tons de acento vívidos. O contraste quente-frio atrai o olhar para o assunto.
4. A luz tem uma direção. Cada objeto é composto por base + sombra (com matiz deslocado para azul/roxo, não apenas mais escuro) + um filete de realce. Uma direção de luz por cena.
5. Personagens minúsculos e quase sem rosto. Olhos de ponto, geralmente sem boca, membros atarracados. A emoção vem da postura e do movimento, não dos detalhes faciais.
6. Bordas ocupadas, centro limpo. As camadas de fundo carregam pequenos detalhes de baixo contraste (estrelas, partículas, formas distantes). O assunto é ousado e legível no tamanho de miniatura.
7. Nunca estático. Deriva ociosa, câmera lenta, paralaxe, cintilação. Um frame parado parece morto.
8. Entrada rápida, saída suave. Os elementos aparecem com um pequeno overshoot, escalonados em ondas. Fades e movimentos de câmera suavizam a saída.
9. Escala é o principal efeito especial. Zoom através de um objeto para um mundo menor, recue para mostrar quão pequeno algo era, repita ícones até um número cair.
10. Palavras são escassas. A narração carrega o conteúdo. Texto na tela é para rótulos, números e a piada ocasional.

Fluxo de trabalho

Trabalhe em estágios com dois pontos de verificação de aprovação. Roteiros e storyboards são baratos de mudar e a animação é cara, portanto obtenha concordância antes de construir.

0. Briefing. Pergunte apenas o que está faltando: tópico, público, duração, proporção de tela, fonte da voz (gravação do usuário, ElevenLabs via voiceover.md do remotion-markup, ou espaço reservado silencioso) e tom. Padrões: 16:9, 1920×1080, 30 fps, 3-5 minutos.
1. Pesquisa → research/facts.md. Tabela de afirmação | número | fonte | confiança. Nunca invente uma estatística; rotule estimativas como estimativas. O vídeo explicativo só é tão bom quanto seus fatos.
2. Roteiro → script.md. Leia references/script-and-structure.md. Ponto de verificação: o usuário aprova o roteiro.
3. Storyboard → storyboard.md, uma linha por tomada (modelo na referência de roteiro). Escolha uma receita de references/scene-recipes.md para cada tomada. Ponto de verificação: o usuário aprova o storyboard.
4. Bíblia de estilo. Copie assets/theme.ts para src/kg/theme.ts. Escolha uma paleta por ato (um "script de cor"; veja references/visual-language.md) para que o humor mude à medida que o argumento avança.
5. Construção. Primeiro os primitivos compartilhados em src/kg/ (formas sombreadas, campo de estrelas, personagens, rótulo, rig de câmera), depois um componente por cena em src/scenes/. Leia references/visual-language.md e references/motion-language.md. Use remotion-create para estruturar e remotion-markup para a mecânica.
6. Áudio. Narração primeiro, depois derive a duração de cada tomada a partir dos tempos de áudio (remotion-captions para tempos de palavras, calculateMetadata para duração dinâmica). Adicione uma faixa musical e um pop/woosh suave para cada entrada importante (sfx.md do remotion-markup). Misture com a narração em torno de -20 dB RMS, a faixa musical cerca de 8 dB abaixo dela, e o pico em ou abaixo de -1 dBFS. Arquivos de texto-para-fala frequentemente atingem pico em 0 dBFS, então dimensione a narração para cerca de 0,8 antes de adicionar qualquer outra coisa (detalhes em references/motion-language.md).
7. QA e renderização. Renderize stills em cada batida, no frame 0, e em ambos os lados de cada limite de cena. Execute a lista de verificação abaixo, renderize com remotion-render, depois meça o áudio do resultado.

Layout do projeto

src/
  kg/theme.ts          paletas, rampas de sombra, predefinições de easing
  kg/primitives/       ShadedSphere, StarField, Character, Label, CameraRig, ...
  scenes/NN-name.tsx   um componente por grupo de tomadas do storyboard
  Video.tsx            sequencia as cenas; possui o áudio
public/                narração, música, sfx
research/facts.md
script.md
storyboard.md

Notas de ambiente

• Windows: mantenha o caminho do projeto curto. Ferramentas que o Remotion inicia (esbuild, o renderizador, Chrome headless) falham com ENOENT quando seu caminho resolvido ultrapassa 260 caracteres. Isso é fácil de atingir dentro de AppData ou dentro de uma pasta de sessão profunda, onde o caminho também fica mais longo depois que o sistema o resolve. Estruture em algo como D:\meu-video e renderize um still antes de construir qualquer coisa.
• O ffmpeg empacotado do Remotion é uma build mínima sem o filtro volumedetect. Para verificar níveis, decodifique a renderização para WAV (npx remotion ffmpeg -i out.mp4 -vn -ac 1 -c:a pcm_s16le check.wav) e calcule o pico e RMS em um pequeno script.

Lista de verificação pré-renderização

Execute esta lista sobre stills do início, meio e fim de cada cena, e sobre o frame 0 e os frames de cada lado de cada limite de cena.

• Há algum contorno em uma forma que não seja uma linha de diagrama? Remova-o.
• Cada objeto tem um lado de sombra e um realce, iluminado a partir da direção única da cena?
• Há no máximo 2 matizes de acento mais a família de fundo no quadro?
• O assunto é legível em 25% do tamanho? Se não, aumente-o ou reduza o contraste da periferia.
• Algo se move em cada segundo da cena (movimento ocioso, câmera, partículas)?
• Uma nova batida visual chega a cada 2-4 segundos, normalmente alinhada a uma frase?
• O texto na tela tem 6 palavras ou menos, pelo menos 36 px em 1080p, em formato de frase?
• Cada número na tela está em research/facts.md com uma fonte?
• Cada brilho é um único gradiente (sem faixas empilhadas), e algo esperando fora da tela está livre de brilho visível no frame 0?
• A vinheta é clara (cerca de 35% nos cantos) e tingida de roxo, para que assuntos brilhantes não fiquem turvos?
• O texto ao lado de um assunto em crescimento permanece livre do maior tamanho do assunto, e a caixa de um contador cabe em seu valor mais largo?
• Após a renderização: o pico de áudio está em ou abaixo de -1 dBFS, com a narração claramente acima da música?

Guardrails

• Originalidade. O visual é um gênero; a identidade do canal não é. Não use o nome, logotipo, introdução/encerramento ou personagens específicos do Kurzgesagt (como seu pássaro) na saída. Crie personagens originais e um cartão final original, e não apresente o vídeo como trabalho do canal.
• Precisão. Um vídeo explicativo ensina, portanto fatos com fonte são mais importantes que um quadro bonito. Explicite a incerteza na narração ("cientistas estimam...") em vez de arredondá-la, e termine o vídeo com uma lista de fontes.
• Acessibilidade. Adicione legendas (remotion-captions). Evite flashes mais rápidos que 3 por segundo, incluindo flashes de zoom através de quadro completo. Não codifique séries de gráficos apenas por cor; rotule-as diretamente.
• Tópicos pesados. Visuais fofos combinados com assuntos sérios fazem parte do charme e do risco do gênero. Para morte, doença, guerra ou pobreza, mantenha os visuais simples e as piadas fora do caminho.

Arquivos de referência

Leia isto	Quando
references/visual-language.md	Escolhendo paletas, desenhando formas sombreadas, fundos, personagens, tipografia, composição, receitas de objetos
references/motion-language.md	Escrevendo qualquer animação: easing, pop-in, movimento ocioso, câmera, paralaxe, zoom-through, gráficos, temporização
references/script-and-structure.md	Escrevendo a narração, planejando o arco, ritmo, ficha de fatos, lista de tomadas
references/scene-recipes.md	Planejando cada tomada: revelação de escala, multidão de 100, cutaway, corrida de linha do tempo, diagrama de processo, etc.
assets/theme.ts	Ponto de partida para tokens de design (paletas, rampas de sombra, predefinições de easing)