explainer-default

Explainer padrão

Uma demonstração de produto calma e premium, como a que uma startup bem financiada coloca em sua página inicial. Seu truque é a contenção: uma tela clara e arejada, uma linha curta de texto por vez, e a interface do próprio produto, reconstruída de forma limpa e filmada de perto enquanto é 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 o próximo recurso.

Você escreve como uma única página HTML que renderiza qualquer quadro a partir de um valor de tempo e a renderiza em MP4 com motion blur e trilha sonora.

Etapa 1: Obter o briefing (uma mensagem, e pronto)

Pergunte tudo em uma mensagem e, em seguida, trabalhe por conta própria. Apenas o produto é necessário; para qualquer campo deixado em branco, decida você mesmo e diga o que escolheu.

1. Produto: nome e o que ele faz em algumas frases. Uma URL do site é ainda melhor.
2. A única coisa que o espectador deve lembrar (ex.: "digite uma ideia, obtenha um aplicativo ao vivo").
3. Marca: cores, fontes, arquivo de logotipo, ou "use o site". Se nenhum, use a paleta padrão abaixo.
4. Formato: 16:9 (1920×1080) ou 9:16 (1080×1920). Padrão 16:9.
5. Duração: o padrão é fornecido abaixo para este estilo.
6. Música: faixa própria do usuário (um caminho de arquivo) ou deixe que você a sintetize. Padrão: sintetizar.
7. 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 a redação real do produto, recursos, cores e nomes de fontes antes de escrever qualquer coisa. Use as palavras reais deles para rótulos de interface do usuário e slogans.

Nunca invente fatos. Nenhuma contagem inventada de clientes, receita, avaliações, depoimentos ou citações. 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. O conteúdo de exemplo dentro da interface do usuário (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 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 que o usuário ou o site forneceu; sem nenhuma, termine com o nome e o slogan.

Logotipos. Use um logotipo apenas se o usuário fornecer o arquivo ou se for o 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.

Pergunte também (opcional): os 3–5 recursos ou etapas do fluxo de trabalho a serem mostrados e qualquer coisa com a qual o produto se conecte (integrações). Se eles forneceram uma URL, extraia-os do site.

Duração padrão para este estilo: 60 segundos. Variação de 45 a 90. Distribua de acordo com o orçamento (remova seções opcionais primeiro):

Duração	Recursos	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	um de prova / integrações
90 s	4–5, cerca de 12 s cada	ambos

Etapa 2: Escrever o roteiro, depois construir

A estrutura

Escreva o roteiro e a pauta primeiro: cada linha de texto na tela, qual momento da interface do usuário vem depois e seu horário; some os tempos em relação ao orçamento acima. O texto na tela é a única "voz", então ele tem que contar a história por si só.

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

1. Abertura (0–5 s). Tela lisa clara. Uma pequena palavra aparece gradualmente no centro: Apresentando. Ela se dissolve no momento da marca: o gradiente suave da marca varre (bandas diagonais de luz como seda que se movem lentamente) com o logotipo ou nome centralizado, pequeno.
2. O problema ou a pergunta (≈5 s). Uma linha curta que o espectador reconhece (Ainda montando listas de prospects manualmente?), ou vá direto para a entrada do produto: uma caixa de entrada grande e arredondada, vazia com texto de espaço reservado, chips de sugestão abaixo.
3. Capítulos de recursos (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 lisa. Ela digita ou aparece gradualmente palavra por palavra. Em seguida, a câmera se aproxima da linha até que ela cubra cerca de 75% da largura do quadro, e uma palavra-chave ou frase curta ganha 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 da interface do usuário: a interface real do produto, reconstruída como interface de usuário vetorial limpa (não capturas de tela), cortada para mostrar apenas a parte importante e exibida 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 ele está), as etapas de um agente sendo marcadas uma a uma (spinner → check, Encontrados 247 resultados), 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 justificativa 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, em seguida, desliza para a próxima.
4. Prova (opcional, apenas números reais). Uma frase com um número que é contado, o número destacado (Alimentado por um banco de dados com mais de 300 milhões de perfis), sobre um sutil globo pontilhado ou grade.
5. Integrações (opcional). Construído para seu fluxo de trabalho existente. no centro enquanto 8–12 blocos de aplicativos (quadrados arredondados, apenas logotipos reais se fornecidos; repita as integrações se houver poucas) flutuam das bordas em diferentes profundidades: os próximos maiores e ligeiramente desfocados, os distantes pequenos e nítidos, todos se movendo com paralaxe. Aqui, o texto escala sozinho em vez de um movimento de câmera, para que os blocos permaneçam no quadro.
6. Fechamento. No gradiente da marca: uma frase com uma palavra destacada que gira através dos casos de uso (Faça toda a sua [prospecção / pesquisa / outreach] 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 um conector Claude), depois o slogan com sua frase-chave destacada.
7. 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 da interface do usuário na tela. O texto e a interface do usuário quase nunca compartilham o quadro: cena de texto, depois cena de interface do usuário.
• A câmera é o editor. Sem cortes bruscos. Cada mudança de cena é um movimento de câmera (aproximar, afastar, deslizar) ou uma dissolução suave com desfoque na tela lisa. Os movimentos da câmera são suaves e uniformes (ease em 0,6–1,2 s) ou molas fortemente amortecidas (z ≥ 0,95); nada quicando.
• Interface do usuário real, feita limpa. Reconstrua a interface do produto a partir do que você sabe dele (ou de seu 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 críveis que se adequam ao produto. Sombras suaves, bordas de 1 px, espaços em branco generosos.
• Cursor: uma seta normal no estilo macOS, movendo-se em curvas suaves, chegando um momento antes de clicar, com um pequeno mergulho de pressão 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. Peso regular pequeno para linhas de título (elas se tornam grandes através da câmera, não do tamanho da fonte). Espaçamento apertado entre letras em texto grande.
• Paleta padrão: tela #F7F7F8, texto #111114, secundário #8A8A94, superfícies da interface do usuário brancas com bordas #E7E7EC, acento da marca #2E6BFF, caixa de destaque = acento com 15–20% de opacidade. Gradiente da marca: branco → acento claro → acento, como bandas diagonais lentas de seda (desenhe-as em uma tela, não com desfoque CSS). As cores da marca substituem o acento.
• Ritmo: cada linha de título permanece cerca de 2 s após pousar; os momentos da interface do usuário são executados em velocidade real (digitando a cerca de 25 caracteres por segundo), com pausas de 0,5 s após cada resultado para que o espectador possa lê-lo.
• Proibido: fundos ocupados atrás da interface do usuário, mais de uma cor de acento, suavização elástica, emoji, grandes sombras projetadas, glassmorphism em todos os lugares, métricas ou depoimentos inventados.

Som

Uma base suave e edificante entre 100 e 110 BPM (acordes suaves de piano ou palhetada, percussão leve entrando após a abertura, uma elevação no fechamento), tranquila e quente. Efeitos sonoros pequenos: cliques de tecla durante a digitação, cliques suaves, um "tique" 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 fundo em um vídeo de produto bem feito, não conduzi-lo.

Como a página deve ser construída

Um arquivo HTML autossuficiente (CSS e JS embutidos; imagens apenas se o usuário as forneceu). Desenhe com DOM + transformações CSS, SVG ou uma tela 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 ser renderizado corretamente por conta própria, em qualquer ordem. Medir o layout dentro de seek (ex.: offsetLeft, measureText) é aceitável; é determinístico.
• A aleatoriedade (granulação, partículas, ruído no áudio) vem de um gerador com semente, 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) é preparada uma vez no carregamento: percorra-a 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 no qual o loop começa (consulte a regra de costura do estilo).
• Loops: seek(t) usa t % duration; efeitos que ultrapassam a costura (um pouso comprimido, uma cauda de som) são desenhados ou mixados em ambas as extremidades.
• Com ?render na URL: sem controles, sem escala de visualização; o palco é exatamente w × h no canto superior esquerdo. Sem ele: o palco é dimensionado com CSS para se ajustar à janela e os controles de visualização são mostrados.
• Fontes: incorpore-as. Baixe os arquivos woff2 (Google Fonts ou da marca) e coloque-os como @font-face em base64, para que a renderização nunca recaia silenciosamente em fallback. 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. O texto posicionado absolutamente recebe white-space: nowrap.
• Velocidade: filter: blur() CSS grande e grandes gradientes desfocados são muito lentos para capturar. Desenhe gradientes e brilhos em uma tela uma vez no carregamento (ou como uma imagem) e mova-os.

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 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 destino muitas vezes, saltando para cada um: track(início, [[tempo, valor, 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 suaves 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() acionado 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 linha do tempo que os visuais. Sintetize com osciladores, ruído filtrado (de um buffer com semente) e envelopes. Se o usuário forneceu um arquivo de música, carregue-o com fetch + decodeAudioData, defina a grade de batida para seu andamento (meça-o) e adicione apenas os efeitos por cima.
• Reprodução de visualização: na primeira reprodução, renderize a trilha sonora uma vez em um buffer e, em seguida, reproduza a partir de qualquer posição ajustada. O relógio aciona 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 controle deslizante define offset (pausar, definir, reproduzir)

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

Etapa 3: Verificar, renderizar, entregar

Configuração única na pasta de trabalho

…

[truncado para tradução]