Explainer de alta energia

Uma peça de hype de 12 a 20 segundos que parece um showreel. A cada meio segundo algo acontece na batida, mas nunca parece cortes aleatórios, porque uma forma guia o olho através de cada transição: uma faísca se torna uma linha, a linha inunda a tela no próximo fundo, um ponto final se desprende e se torna a bola em torno da qual a próxima cena é construída.

Você escreve isso como uma página HTML que renderiza qualquer quadro a partir de um valor de tempo, e depois renderiza para MP4 com motion blur e uma trilha sonora sintetizada.

Etapa 1: Obter o briefing (uma mensagem, depois vá em frente)

Pergunte tudo em uma mensagem, depois trabalhe sozinho. Apenas o produto é obrigatório; para qualquer campo deixado em branco, decida você mesmo e diga o que escolheu.

Produto: nome e o que faz em algumas frases. Uma URL do site é ainda melhor.
A única coisa que o espectador deve lembrar (ex.: "digite uma ideia, obtenha um aplicativo ao vivo").
Marca: cores, fontes, arquivo de logotipo ou "use o site". Se não houver, use a paleta padrão abaixo.
Formato: 16:9 (1920×1080) ou 9:16 (1080×1920). Padrão 16:9.
Duração: o padrão é fornecido abaixo para este estilo.
Música: sua própria faixa (um caminho de arquivo) ou deixe você sintetizar uma. Padrão: sintetizar.
Direção (opcional): cenas que desejam, um slogan, uma chamada para ação, qualquer coisa para evitar.

Se eles forneceram uma URL, leia-a (busca na web) para obter o texto real do produto, recursos, cores e nomes de fontes antes de escrever qualquer coisa. Use as palavras reais deles para rótulos de interface e slogans.

Nunca invente fatos. Sem contagens de clientes, receita, classificações, depoimentos ou citações falsas. Números apenas se o usuário ou o site os declarar; caso contrário, use barras relativas, progresso e linhas de esqueleto de placeholder. Conteúdo de exemplo dentro da interface (um prompt, um nome de arquivo, um nome de projeto, preços em um recibo) é aceitável e deve ser crível; afirmações sobre o produto em si (estatísticas, contagens de usuários, classificações, ofertas como "grátis") não são. Chamadas para ação usam apenas uma URL ou oferta que o usuário ou o site forneceu; sem nenhuma, termine no nome e slogan.

Logotipos. Use um logotipo apenas se o usuário fornecer o arquivo ou se for o próprio produto dele e ele tiver solicitado. Caso contrário, escreva o nome como texto na fonte da marca. Logotipos de terceiros (integrações) apenas se fornecidos; caso contrário, blocos arredondados neutros com o nome.

Duração padrão para este estilo: 15 segundos (128 BPM, 8 compassos). Faixa de 12 a 20.

Etapa 2: Planejar as cenas, depois construir

A estrutura (6 a 8 cenas de 1,5 a 3 s, em uma grade de 120 a 140 BPM)

Escolha entre estes tipos de cena e mapeie o produto nelas. Escreva a folha de batidas primeiro (cena, tempo de início na grade de batidas, o que entra, o que sai, som).

Abertura com faísca (escuro). Tela quase preta com uma grade fraca. Uma pequena marca de destaque aparece, pulsa, se estica em uma fina linha horizontal através do quadro com um pequeno rótulo mono (produto / lançamento — 2026), balança uma vez, então a linha se expande verticalmente em uma inundação de tela cheia da cor de destaque. Essa inundação é o próximo fundo.
Impacto de marca. O nome do produto em um grotesco pesado, tudo em maiúsculas, enorme, letras reveladas por máscaras em batidas consecutivas de 1/16, um pequeno kicker mono acima (APRESENTANDO — 2026) e uma linha itálica com serifa abaixo (o que é, 2 a 4 palavras). O peso pode mudar de fino para preto. O ponto final ou o ponto de uma letra se desprende e cresce na forma que começa a próxima cena.
Triplete cinético. A proposta de valor como três palavras ou frases curtas, duas batidas cada (três para uma palavra manuscrita, para que possa ser lida), cada uma com seu próprio tratamento e seu próprio fundo, trocadas bruscamente na batida (dentro desta cena, as trocas são o ritmo, então não contam como cortes): escuro sobre creme; destaque sobre preto com a palavra repetida como um padrão de contorno preenchendo o quadro; branco sobre azul elétrico dentro de suportes de canto de visor com um pequeno rótulo 1920 × 1080; uma última palavra em script manuscrito que se desenha sozinha. Cada palavra entra com um desfoque/deslizamento rápido e aterrissa com um pequeno overshoot.
Visual de assinatura. Um momento "como eles fizeram isso" que simboliza o produto: um campo 3D de cubos ondulando do centro (desenhado em canvas com sua própria projeção perspectiva, colorido por altura com a paleta), um fluxo de partículas generativo que se condensa em um anel e irrompe para fora, ou uma bolha líquida se metamorfoseando entre formas. Escolha aquele que se encaixa na ideia do produto (blocos de construção → cubos, dados/IA → partículas, flexibilidade → líquido). A câmera inclina ou orbita lentamente enquanto toca.
Micro-momento do produto. Uma interação real do produto como um cartão de interface flutuante, levemente inclinado em 3D com dois cartões fantasma empilhados atrás: o cursor alterna um botão, pressiona o botão principal, uma barra de progresso preenche na cor de destaque com uma porcentagem, o botão muda para Feito ✓, um toast desliza no canto superior direito. Use os rótulos reais do produto.
Prova (apenas se existirem números reais). Uma grande contagem regressiva (estilo +312%, dígitos desfocando enquanto giram), um anel de rosca, barras escalonadas subindo com uma barra de destaque, uma linha desenhando sobre elas com uma dica de ferramenta. Sem números reais → pule esta cena ou mostre as capacidades reais do produto como uma lista que aparece com força.
Ponte líquida/morfose. A forma da cena anterior colapsa em um ponto, o ponto se torna um pulso de anel no escuro, que se torna o ponto no logotipo.
Cartão final (segure por 2 s). Logotipo ou nome com o ponto de destaque, slogan itálico com serifa, uma linha mono rastreada digitando letra por letra (a URL real ou chamada para ação, se fornecida, ex.: PRODUTO.COM; caso contrário, uma linha curta do briefing), uma régua fina.

Nem todo produto precisa de todas as cenas; 6 fortes vencem 8 fracas. Mantenha uma ideia por cena.

Regras que fazem parecer caro

Transições são objetos, não cortes. Cada cena passa para a próxima através de uma forma (inundação, limpeza por uma barra crescente, um ponto que cresce no próximo fundo, uma palavra que amplia através da câmera). Um corte seco entre cenas é permitido apenas em um tempo forte, no máximo duas vezes.
Tudo cai na grade. Grandes mudanças nas batidas, tipografia em notas de 1/8 ou 1/16. Overshoot ligeiramente (z ≈ 0,6–0,7) para impactos, depois estabilize.
Molduras HUD em cada cena: suportes de canto finos, CENA 02 / 07 no canto superior direito, um rótulo de categoria no canto inferior esquerdo em mono minúsculo (TIPO CINÉTICO, PRODUTO, DADOS) e um timecode em execução no canto inferior direito com um ponto vermelho. Pequeno (12–14 px em 1080p) e cerca de 50% de opacidade; deve parecer um visor de câmera.
Textura: uma vinheta radial suave em cada fundo plano, granulação de filme muito sutil (pré-gerar alguns tiles de grão semeados no carregamento e ciclá-los) e motion blur real.
Tipo: um grotesco pesado para impactos (ex.: Inter Tight 900 ou Archivo Black), uma itálica com serifa para a linha humana (Instrument Serif itálico), uma mono para HUD e legendas (JetBrains Mono ou Geist Mono). Se a marca tiver fontes, use as deles para o nome e mantenha a mono para o HUD.
Paleta padrão: tinta #0B0B10, destaque #FF4F1A, creme #EDEBE4, azul elétrico #2F47FF, branco. A cor principal da marca substitui o destaque e sua segunda cor substitui o azul; uma marca de uma cor usa um tom profundo de sua cor como segunda.
Proibido: aparência de modelo pronto, brilhos em tudo, emoji, mais de 3 cores em uma cena (sem contar preto e branco), texto menor que legível de relance, qualquer cena sem movimento.

Som

128 BPM (ou a faixa do usuário). Impactante: kick em cada batida, clap em 2 e 4, um sub grave seguindo as raízes da cena, um riser filtrado no impacto da marca e no cartão final, um impacto (boom baixo + explosão de ruído) em cada inundação, bipes tonais curtos em cada palavra digitada, um whoosh (varredura de ruído passa-banda) em cada transição carregada, um toque suave no cartão final. Misture a música sob os impactos.

Como a página deve ser construída

Um arquivo HTML autocontido (CSS e JS inline; imagens apenas se o usuário as forneceu). Desenhe com DOM + transformações CSS, SVG ou um canvas de tela cheia, o que for adequado.

O contrato da página

window.VIDEO = {w, h, duration} e window.seek(t), uma função pura do tempo: ela define cada elemento para o tempo t (segundos). Sem transições ou animações CSS, sem setTimeout, sem estado transportado do quadro anterior. Qualquer quadro deve renderizar corretamente por conta própria, em qualquer ordem. Medir layout dentro de seek (ex.: offsetLeft, measureText) é aceitável; é determinístico.
Aleatoriedade (grão, partículas, ruído em áudio) vem de um gerador semeado, nunca Math.random.
Qualquer coisa que precise de um histórico (uma câmera que fica atrás de um objeto em movimento, uma simulação) é assada uma vez no carregamento: percorra de 0 a duration a 1/240 s, armazene os valores e faça seek lê-los de volta com interpolação. Para loops, inicie a simulação a partir do estado em que o loop começa (veja a regra de costura do estilo).
Loops: seek(t) usa t % duration; efeitos que cruzam a costura (um squash de aterrissagem, uma cauda de som) são desenhados ou mixados em ambas as extremidades.
Com ?render na URL: sem controles, sem escala de pré-visualização; o palco é exatamente w × h no canto superior esquerdo. Sem ele: o palco é escalado com CSS para caber na janela e os controles de pré-visualização são mostrados.
Fontes: incorpore-as. Baixe os arquivos woff2 (Google Fonts ou da marca) e coloque-os inline como base64 @font-face, para que a renderização nunca recaia silenciosamente. Para uma mudança de peso, use uma fonte variável com um intervalo ([email protected]).
Camadas: dê às camadas de cena fundos transparentes e deixe um fundo de palco atrás delas fornecer a cor base, para que uma camada posterior nunca esconda uma anterior por acidente. Texto posicionado absolutamente obtém white-space: nowrap.
Velocidade: grandes filter: blur() CSS e grandes gradientes desfocados são muito lentos para capturar. Desenhe gradientes e brilhos em um canvas uma vez no carregamento (ou como uma imagem) e mova isso.

Ajudantes: cole estes e construa tudo sobre eles

// resposta de etapa de mola amortecida 0 -> 1. w = velocidade (8 lento, 14 normal, 22 rápido), z = amortecimento (1 = sem overshoot)
function spring(t, w = 14, z = 0.82) {
  if (t <= 0) return 0;
  if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
  const wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// um valor que muda de alvo muitas vezes, saltando para cada: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// keyframes suavizados precisos (melhor para movimentos de câmera): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);   // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a));      // progresso 0..1 de t através de [a, b]
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);

Digitação: a string visível é full.slice(0, n(t)) com um cursor piscando a partir de t. Contagens regressivas: formate lerp(a, b, ease(seg(t, …))).
Uma câmera é um elemento wrapper com transform: translate() scale() rotate() dirigido por kf ou track.

Som

window.buildAudio(ctx) agenda toda a trilha sonora (música + efeitos) a partir do tempo 0 em qualquer AudioContext ou OfflineAudioContext que receber, usando os mesmos números de timeline que os visuais. Sintetize com osciladores, ruído filtrado (de um buffer semeado) e envelopes. Se o usuário forneceu um arquivo de música, carregue-o com fetch + decodeAudioData, defina a grade de batidas para seu andamento (meça-o) e adicione apenas os efeitos por cima.
Reprodução de pré-visualização: na primeira reprodução, renderize a trilha sonora uma vez em um buffer, depois reproduza de qualquer posição ajustada. O relógio dirige seek:

let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
  ac ??= new AudioContext();
  if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
  src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
  src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })();   // o scrubber define offset (pause, define, reproduz)

Coloque a folha de batidas como um comentário no topo do script: uma linha por momento com seu tempo, o que acontece e qual som.

Etapa 3: Verificar, renderizar, entregar

Configure uma vez na pasta de trabalho: npm i playwright, depois npx playwright install chromium se o Chromium ainda não estiver instalado; ffmpeg deve estar no PATH. Salve o script no final deste arquivo como render.mjs.

Stills. node render.mjs demo.html check.png --stills 0.5,1.2,… com um tempo por linha da folha de batidas (a folha está em tamanho legível, 3 por linha). Olhe para ela. Corrija qualquer coisa cortada, sobreposta, ilegível, fora da marca, mal enquadrada ou vazia. Verifique novamente.
Rascunho. node render.mjs demo.html draft.mp4 30 1 4 (rápido: 30 fps, sem motion blur, 4 trabalhadores paralelos; defina o último número para a contagem de núcleos da máquina). Esta é a cópia de revisão: envie-a para o usuário com o HTML e peça alterações antes da final.
Final. node render.mjs demo.html demo.mp4 60 8 8. Motion blur multiplica o tempo de renderização pela contagem de subquadros; um final de 60 s pode levar de 20 a 60 minutos em um laptop, então avise antes de começar. Funciona...

ClaudinNarsis/claude-video-skills

O que é claude-video-skills?

Perguntar na sua IA favorita

Documentação