Explainer Padrão

Uma demonstração de produto calma e premium, do tipo que uma startup bem financiada coloca em sua homepage. O truque é a contenção: uma tela clara e arejada, uma linha curta de texto por vez, e a interface real do produto reconstruída de forma limpa e filmada de perto enquanto está sendo usada. A câmera conta a história: ela se aproxima de uma linha de texto, acompanha a digitação, recua para revelar o resultado e desliza para a próxima funcionalidade.

Você escreve como uma única página HTML que renderiza qualquer frame a partir de um valor de tempo, e então renderiza para MP4 com motion blur e trilha sonora.

Passo 1: Obter o briefing (uma mensagem, depois vá)

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

Produto: nome e o que ele faz em algumas frases. Uma URL do site é ainda melhor.
A única coisa que o espectador deve lembrar (ex.: "digite uma ideia, obtenha um app ao vivo").
Marca: cores, fontes, arquivo de logotipo ou "use o site". Se nenhum, 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: trilha própria (um caminho de arquivo) ou deixe sintetizar. Padrão: sintetizar.
Direção (opcional): cenas desejadas, um slogan, uma chamada para ação, qualquer coisa para evitar.

Se fornecida uma URL, leia-a (busca na web) para obter a redação real do produto, funcionalidades, cores e nomes de fontes antes de escrever qualquer coisa. Use as palavras reais para rótulos de UI e slogans.

Nunca invente fatos. Nenhum número de clientes, receita, avaliações, depoimentos ou citações inventados. Números apenas se o usuário ou o site os declarar; caso contrário, use barras relativas, progresso e linhas de esqueleto de espaço reservado. Conteúdo de exemplo dentro da UI (um prompt, um nome de arquivo, um nome de projeto, preços em um recibo) é aceitável e deve ser verossímil; alegações sobre o próprio produto (estatísticas, contagens de usuários, avaliações, ofertas como "grátis") não são. Chamadas para ação usam apenas uma URL ou oferta fornecida pelo usuário ou pelo site; sem nenhuma, termine com o nome e slogan.

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

Pergunte também (opcional): as 3–5 funcionalidades ou etapas do fluxo de trabalho para mostrar, e qualquer coisa com que o produto se conecte (integrações). Se fornecida uma URL, retire-as do site.

Duração padrão para este estilo: 60 segundos. Faixa de 45 a 90. Distribua por duração (elimine seções opcionais primeiro):

Duração	Funcionalidades	Seções opcionais
45 s	2–3, cerca de 9 s cada	prova ou integrações, não ambos
60 s	3–4, cerca de 10 s cada	uma de prova / integrações
90 s	4–5, cerca de 12 s cada	ambas

Passo 2: Escreva o roteiro, depois construa

A estrutura

Escreva o roteiro e o storyboard primeiro: cada linha de texto na tela, qual momento de UI a segue e seu tempo; some os tempos contra o orçamento acima. O texto na tela é a única "voz", então ele precisa contar a história sozinho.

Como cenas e câmera se encaixam: cada cena (uma linha de título, um momento de UI) é sua própria camada com sua própria câmera. Dentro de uma cena, a câmera se aproxima, acompanha e recua; entre cenas, a camada de saída se dissolve com um breve desfoque (0,3–0,4 s) na próxima, que já está se movendo.

Abertura (0–5 s). Tela clara simples. Uma pequena palavra surge no centro: Apresentando. Ela se dissolve no momento da marca: o gradiente suave da marca entra (faixas diagonais claras e sedosas se movendo lentamente) com o logotipo ou nome centralizado, pequeno.
O problema ou a pergunta (≈5 s). Uma linha curta que o espectador reconhece (Ainda construindo listas de clientes potenciais manualmente?), ou vá direto para a entrada do produto: uma grande caixa de entrada arredondada, vazia com texto de espaço reservado, chips de sugestão abaixo.
Capítulos de funcionalidades (3–5, cerca de 8–15 s cada). Cada um é:
- Uma linha de título: uma frase curta, pequena (cerca de 28 px em 1080p), centralizada na tela clara. Ela digita ou aparece palavra por palavra. Então a câmera se aproxima da linha até que ela ocupe cerca de 75% da largura do quadro, e uma palavra ou frase curta chave ganha um destaque: uma caixa suave da cor da marca varrendo da esquerda para a direita atrás dela (Ligue para o tomador de decisão. Diretamente.).
- O momento de UI: a interface real do produto, reconstruída como UI vetorial limpa (não screenshots), cortada apenas para a parte que importa e mostrada grande. A câmera está perto o suficiente para que o elemento preencha a maior parte do quadro, e ela acompanha a ação: texto digitando na entrada (a câmera segue o cursor; meça o texto com measureText para saber onde está), as etapas de um agente sendo marcadas uma a uma (spinner → check, Encontrado 247 correspondências), cartões de resultado empilhando com os distantes desfocados (profundidade de campo), uma tabela preenchendo linha por linha, o cursor clicando em um botão de célula e o valor sendo revelado, uma nova coluna sendo adicionada e cada célula "pensando" com um brilho antes de seu valor aparecer, um popover abrindo com raciocínio e fontes.
- O recuo: após a ação, a câmera se afasta suavemente para mostrar a tela inteira por um momento, para que o espectador entenda onde está, e depois desliza.
Prova (opcional, apenas números reais). Uma frase com um número que conta para cima, o número destacado (Apoiado por um banco de dados de mais de 300 milhões de perfis), sobre um sutil globo ou grade pontilhada.
Integrações (opcional). Construído para seu fluxo de trabalho existente. no centro enquanto 8–12 tiles de aplicativos (quadrados arredondados, logotipos reais apenas se fornecidos; repita as integrações se forem poucas) flutuam das bordas em diferentes profundidades: os próximos maiores e ligeiramente desfocados, os distantes pequenos e nítidos, todos derivando com paralaxe. Aqui o texto escala sozinho em vez de um movimento de câmera, para que os tiles permaneçam no quadro.
Encerramento. No gradiente da marca: uma frase com uma palavra destacada girando que passa pelos casos de uso (Faça toda sua [prospecção / pesquisa / divulgação] no Produto.), então, apenas se o produto realmente tiver, outra maneira de usá-lo (ex.: Ou apenas pergunte ao Claude para um produto com conector Claude), depois o slogan com sua frase chave destacada.
Cartão final (3 s). Logotipo ou nome no gradiente da marca, URL ou chamada para ação pequena abaixo.

Regras que o tornam premium

Uma coisa de cada vez. Nunca mais de uma linha de texto mais um elemento de UI na tela. Texto e UI quase nunca compartilham o quadro: cena de texto, depois cena de UI.
A câmera é o editor. Sem cortes secos. Cada mudança de cena é um movimento de câmera (aproximar, afastar, deslizar) ou um desfoque-dissolução suave na tela clara. Movimentos de câmera são suaves e contínuos (ease em 0,6–1,2 s) ou molas fortemente amortecidas (z ≥ 0,95); nada salta.
UI real, feita limpa. Reconstrua a interface do produto a partir do que você sabe (ou do site): seu layout real, rótulos, cores, fontes e raios de canto, simplificados para o que a cena precisa. O conteúdo interno são dados de exemplo verossímeis que se encaixam no produto. Sombras suaves, bordas de 1 px, espaçamento generoso.
Cursor: uma seta normal estilo macOS, movendo-se em curvas suaves, chegando um instante antes de clicar, com um pequeno mergulho de pressionar e uma ondulação suave no controle clicado. Estados de hover mudam.
Tipo: a fonte da marca, se conhecida; caso contrário, Inter ou Geist. Pequena, peso regular para linhas de título (elas ficam grandes pela câmera, não pelo tamanho da fonte). Espaçamento apertado entre letras em texto grande.
Paleta padrão: tela #F7F7F8, texto #111114, secundário #8A8A94, superfícies de UI brancas com bordas #E7E7EC, acento da marca #2E6BFF, caixa de destaque = acento a 15–20% de opacidade. Gradiente da marca: branco → acento claro → acento, como faixas diagonais lentas em seda (desenhe em um canvas, não com desfoque CSS). Cores da marca substituem o acento.
Ritmo: cada linha de título mantém-se por cerca de 2 s após aparecer; momentos de UI ocorrem em velocidade real (digitação a cerca de 25 caracteres por segundo), com pausas de 0,5 s após cada resultado para o espectador ler.
Proibido: fundos ocupados atrás da UI, mais de uma cor de acento, easing saltitante, emoji, sombras grandes, glassmorphism em todo lugar, métricas ou depoimentos inventados.

Som

Uma base animadora e suave a 100–110 BPM (piano suave ou acordes dedilhados, percussão leve entrando após a abertura, um crescendo para o encerramento), quieta e quente. Efeitos sonoros pequenos: cliques de tecla durante a digitação, cliques suaves, um "tic" leve por etapa concluída, um "whoosh" suave em grandes movimentos de câmera, um toque suave no cartão final. A música deve ficar como um pano de fundo em um vídeo de produto bem feito, não conduzi-lo.

Como a página deve ser construída

Um único arquivo HTML autossuficiente (CSS e JS inline; imagens apenas se fornecidas pelo usuário). Desenhe com DOM + transformações CSS, SVG ou um canvas em 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: define cada elemento para o tempo t (segundos). Sem transições ou animações CSS, sem setTimeout, sem estado herdado do frame anterior. Qualquer frame deve renderizar corretamente por conta própria, em qualquer ordem. Medir layout dentro de seek (ex.: offsetLeft, measureText) é permitido; é determinístico.
Aleatoriedade (grânulos, partículas, ruído no áudio) vem de um gerador semeado, nunca Math.random.
Qualquer coisa que precise de histórico (uma câmera que segue um objeto em movimento, uma simulação) é renderizada 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 atravessam a costura (uma compressão de pouso, uma cauda de som) são desenhados ou misturados em ambas as extremidades.
Com ?render na URL: sem controles, sem escala de preview; o palco é exatamente w × h no canto superior esquerdo. Sem ele: o palco é escalado com CSS para caber na janela e os controles de preview são mostrados.
Fontes: incorpore-as. Baixe os arquivos woff2 (Google Fonts ou da marca) e incorpore-os como base64 @font-face, para que a renderização nunca caia em fallback silenciosamente. Para uma variação 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 acidentalmente. Texto absolutamente posicionado recebe white-space: nowrap.
Velocidade: grandes CSS filter: blur() e grandes gradientes desfocados são muito lentos para screenshot. Desenhe gradientes e brilhos em um canvas uma vez no carregamento (ou como imagem) e mova isso.

Ajudantes: cole-os e construa tudo sobre eles

// resposta de passo de mola amortecida 0 -> 1. w = velocidade (8 lento, 14 normal, 22 rápido), z = amortecimento (1 = sem ultrapassagem)
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 eased 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 crescentes: formate lerp(a, b, ease(seg(t, …))).
Uma câmera é um elemento wrapper com transform: translate() scale() rotate() impulsionado 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 dos 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 batida para seu tempo (meça-o) e adicione apenas os efeitos por cima.
Reprodução de preview: na primeira reprodução, renderize a trilha sonora uma vez em um buffer, depois reproduza a partir de qualquer posição arrastada. O clock impulsiona 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, set, play)

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

Passo 3: Verifique, renderize, entregue

Configuração uma vez na pasta de trabalho

…

ClaudinNarsis/claude-video-skills

O que é claude-video-skills?

Perguntar na sua IA favorita

Documentação