← Voltar ao inícioRecursosYAN.M / SYSTEM

Prompt do vídeo do site

O prompt completo que usei para transformar meu site num vídeo de lançamento: captura quadro a quadro do site real, câmera 3D, efeitos sonoros e trilha original sincronizada. É só preencher com o seu site e copiar.

Como usar

Troque cada campo entre colchetes, como [URL DO SITE], pelas informações do seu site. Dá para editar direto na caixa abaixo.
Clique em Copiar prompt e cole num agente de código com acesso a terminal, como o Claude Code, aberto na pasta do projeto do site.
Aprove o roteiro que o agente propuser antes de ele começar a gravar.
Revise os quadros de prova antes do render final e ouça a trilha com fone: a IA não consegue ouvir.

Você vai precisar de Node.js 20 ou mais recente e do código do site rodando localmente. O resultado é um MP4 de até 1:30, em 1920×1080 a 60fps, com trilha original.

Prompt

10 campos entre colchetes para preencher

# Prompt: vídeo de apresentação do seu site, gravado quadro a quadro, com trilha original sincronizada

## Papel

Você é um diretor de motion design e engenheiro criativo. Vai produzir um vídeo promocional de **no máximo 1:30**, em **1920×1080 a 60fps**, que apresenta o **site real** [URL DO SITE] como um lançamento de produto: mockups de notebook e celular, rolagem, as animações do próprio site acontecendo, zoom in e out, desfoque de foco, telas divididas, cortinas, textos curtos na tela e **efeitos sonoros encaixados na música**. Nada de gravação de tela comum, editor de vídeo ou banco de músicas.

## Sobre o site

- Nome da marca: [NOME DA MARCA]
- Repositório do site: [CAMINHO DO REPOSITÓRIO] (para rodar um build de produção local)
- Cor de destaque: [COR DE DESTAQUE, ex.: #ff5a00] · fonte dos títulos: [FONTE DOS TÍTULOS] · fonte mono: [FONTE MONO]
- As 4 a 6 animações ou interações mais marcantes do site, com a página onde ficam: [LISTA DE ANIMAÇÕES, ex.: preloader da home, desenho do hero, prateleira do blog, globo arrastável]
- O "clímax" do vídeo, o diferencial do site: [DIFERENCIAL, ex.: servidor MCP que agentes consultam]
- Idioma dos textos na tela: [IDIOMA DOS TEXTOS]
- Vibe da música (descreva o estilo, não peça para copiar uma música existente): [ESTILO DA MÚSICA, ex.: hip-hop alegre e saltitante, com palmas e assobio]

## Princípios inegociáveis

1. **Música primeiro.** Defina o BPM e uma grade de compassos (ex.: 100 BPM → 1 compasso = 2,4 s → 36 compassos ≈ 1:26). Todo corte, movimento de câmera, texto e efeito sonoro cai num tempo da grade.
2. **Uma partitura, duas saídas.** Um único `score.js` guarda o BPM, as seções da música, **a lista de efeitos sonoros com o instante de cada um** e os instantes dos cortes. O sintetizador e o compositor de vídeo leem o mesmo arquivo.
3. **Captura determinística do site real.** Não grave a tela em tempo real. Injete um **relógio virtual** antes de qualquer script da página e avance o tempo manualmente, 1/60 s por quadro, tirando uma foto a cada passo. Cada quadro fica perfeito e as animações ficam sincronizadas com a música.
4. **Compositor em código.** Uma página `video.html` expõe `render(t)`, que monta o quadro do instante `t`: mockups, câmera 3D, telas divididas, textos e cursor, a partir das fotos capturadas. Um script chama `render(f/60)` para cada quadro e envia ao FFmpeg junto com a trilha.
5. **Revisão por quadros de prova** antes de cada render final.

## Etapa 1 — Roteiro

Escreva o roteiro como uma tabela com compassos, tempo, seção da música, imagem e câmera, efeitos sonoros e texto na tela. Estrutura que funciona:

- **Abertura (2 compassos):** o mockup do notebook entra girando em 3D e o endereço é digitado na barra, uma tecla por som.
- **Entrada do site (3 compassos):** o preloader ou a primeira dobra, com a câmera avançando para dentro da tela e um **drop** da música na revelação.
- **Destaque do hero (4 compassos):** afastamento rápido e depois 2 ou 3 closes com desfoque de foco entre eles, cada um com um whoosh.
- **Rolagem (2 compassos):** break na música, rolagem com aceleração e desaceleração.
- **Montagem (4 compassos):** 4 interações em tela dividida, cada painel entrando grande no centro e depois deslizando para o seu lugar.
- **Momento especial (5 a 6 compassos):** a animação mais bonita, com travelling lateral e close no detalhe.
- **Variações (2 compassos):** claro/escuro com cortina diagonal, e troca de idioma uma por batida.
- **1 compasso de silêncio** antes do clímax.
- **Clímax (6 compassos):** o diferencial do site.
- **Dispositivos (3 compassos):** o notebook recua e o celular entra com a versão mobile.
- **Assinatura (3 compassos):** tudo se reduz a um elemento da marca, que vira o logo, com o endereço e um teaser.

Textos na tela: no máximo 6 palavras, entrando no tempo 1 do compasso.

## Etapa 2 — Capturar o site real

Rode o site em **build de produção local** (`next build` + `next start`, ou o equivalente), não o site publicado, para não sujar o analytics e não depender da rede. Use o Playwright (Chromium).

### O relógio virtual (injetado com `context.addInitScript`, antes dos scripts da página)

- Substitua `performance.now` e `Date` (incluindo `Date.now()` e `new Date()` sem argumentos) por um tempo `now` controlado.
- Substitua `setTimeout`, `setInterval`, `clearTimeout` e `clearInterval` por uma fila própria de timers.
- Substitua `requestAnimationFrame` e `cancelAnimationFrame` por uma lista de callbacks.
- Exponha `window.__advance(ms)`, que executa em ordem os timers vencidos até `now + ms`, chama os callbacks de `requestAnimationFrame` com o novo `now` e sincroniza as animações CSS e Web Animations:
  - para cada `document.getAnimations()` ainda não vista, guarde `inicio = now - currentTime` e pause;
  - a cada passo, defina `currentTime = now - inicio`;
  - se passou do fim (`effect.getComputedTiming().endTime`), chame `finish()`, porque bibliotecas como o Framer Motion esperam o `finished` para aplicar o estado final.
- Isso controla GSAP, Framer Motion, animações CSS e rolagens suaves como o Lenis, que rodam sobre `requestAnimationFrame`.

### O capturador

- Um contexto por tomada, com `deviceScaleFactor: 2` nas tomadas que terão close (a imagem aguenta zoom de até ~2,5× sem perder nitidez) e 1,5 nas demais.
- Antes de carregar a página, grave no `localStorage` a escolha de cookies (para o aviso não aparecer), o tema desejado e a flag que pula o preloader, exceto na tomada do preloader.
- Para cada quadro: aplique a interação programada (mover o mouse por um caminho suavizado, clicar, rolar com `window.scrollTo({behavior: "instant"})`), chame `__advance(1000/60)` e tire um screenshot JPEG (qualidade ~90) numa pasta por tomada.
- **Salve a posição do cursor em cada quadro** num `meta.json`: o screenshot não inclui o cursor do sistema, e o compositor desenha uma seta nessa posição.
- Leia as posições dos botões em tempo real (`getBoundingClientRect`) em vez de fixar coordenadas.
- Grave cada tomada com 1 a 2 segundos de sobra antes e depois.
- Para câmera lenta, capture o trecho com mais quadros por segundo (ex.: 300 fps), avançando 1/300 s por quadro. Com o relógio virtual, isso é trivial.

## Etapa 3 — Trilha original e efeitos sonoros (Node, sem bibliotecas de áudio)

- **Bateria:** bumbo (seno com queda de frequência + saturação), caixa (ruído filtrado + tom curto), palmas (3 rajadas de ruído filtrado), estalo de dedos e chimbal em semicolcheias com **swing** leve (~17% da semicolcheia nos contratempos).
- **Harmonia:** uma progressão de 4 acordes (ex.: C–Am–F–G), com baixo sincopado, acordes curtos de piano elétrico nos contratempos, guitarra dedilhada (Karplus-Strong), assobio com vibrato e glissando, e metais no clímax.
- **Arranjo:** entradas e saídas por seção, preparação antes do drop, break só com o baixo e um compasso de silêncio antes do clímax.
- **Efeitos sonoros sintetizados**, cada um tocado no instante definido em `score.js`: tecla, Enter, "tic" metálico, papel, whoosh (ruído com filtro que abre e fecha), bip, tique de relógio, "clack", "swish", livro deslizando, "pop", interruptor, "blip", zumbido eletrônico, "ding" e uma palma final com reverb longo.
- **Mix:** reverb Schroeder num barramento de envio, soft clip com `tanh`, fade final e normalização para −1 dBFS. Grave um WAV de 48 kHz.
- **O agente não ouve:** confira a estrutura pela forma de onda e pelo espectrograma do FFmpeg (`showwavespic` + `showspectrumpic`) e meça os níveis com `volumedetect`. Uma pessoa precisa ouvir com fone antes de publicar.

## Etapa 4 — Compositor (`video.html`)

- **Fundo:** a cor clara da marca, com uma grade sutil e vinheta suave.
- **Mockups em CSS:** o notebook (tampa escura arredondada, barra do navegador com a URL, base trapezoidal), o celular (moldura e notch) e janelas de navegador flutuantes para as telas divididas.
- **Câmera:** um contêiner com `translate → perspective → rotateX/rotateY → scale → translate(-foco)`. Keyframes de câmera por cena (foco, zoom e inclinação), interpolados com easing. Para dar close num ponto do site, converta a coordenada da página em coordenada do mundo.
- **Desfoque de foco:** um `filter: blur()` que sobe e desce em ~0,28 s nas transições, junto com o whoosh.
- **Retiming:** mapeie o tempo do vídeo para o tempo da captura com trechos lineares. Assim uma etapa do site cai exatamente numa batida: acelere um trecho, desacelere outro e faça câmera lenta usando a captura de alta taxa.
- **Tela dividida e cortinas:** `clip-path: polygon()` animado.
- **Textos:** uma pílula clara com um traço da cor de destaque, entrando com um wipe (`clip-path: inset`) e saindo com fade.
- **Cursor:** uma seta SVG desenhada na posição salva no `meta.json`.
- **Cena do diferencial:** se envolver uma API ou um MCP, chame o endpoint de verdade antes e use a resposta real no vídeo, sem inventar dados. A interface (um terminal, por exemplo) pode ser redesenhada.
- **Render:** a cada quadro, troque o `innerHTML` da cena e **aguarde `img.decode()` de todas as imagens** antes do screenshot. Abra o Chromium com `--allow-file-access-from-files` e gere um `meta.js` (`window.META = {...}`) em vez de usar `fetch` em arquivos locais.
- Envie os quadros ao FFmpeg por `image2pipe` com a trilha: `-c:v libx264 -preset slow -crf 18 -pix_fmt yuv420p -c:a aac -b:a 256k -movflags +faststart`.

## Etapa 5 — Revisão

1. Gere 25 a 30 quadros de prova cobrindo todas as cenas, junte-os em folhas de contato (`hstack` do FFmpeg) e olhe com atenção. Confira em resolução cheia os quadros com close.
2. Corrija em lote, confira de novo e só então faça o render final.
3. Na entrega, diga que a trilha foi verificada só visualmente.

## Armadilhas conhecidas

- **Tela vazia em câmera lenta.** Elementos da mesma cor do fundo (ex.: persianas brancas sobre um site branco) viram segundos de nada. Use câmera lenta moderada (2×) e deixe o conteúdo aparecer logo.
- **O site pode rolar sozinho depois de um clique** (ex.: um filtro que leva até a lista). Se a câmera continuar mirando o ponto antigo, ela filma o vazio. Abra a câmera no instante do clique e disfarce o salto com desfoque de movimento e um whoosh.
- **Seletores frágeis.** Um seletor que não encontra o elemento derruba o lote inteiro de capturas. Confira o nome real do elemento (ex.: um `svg` com a classe no próprio `svg`, não dentro de outro elemento) e rode as tomadas uma a uma primeiro.
- **Textos que não terminam a tempo.** Calcule a velocidade de digitação a partir do número de caracteres e do tempo da cena, com pelo menos 1 segundo de folga.
- **Imagens sem decodificar** aparecem em branco no quadro. Sempre aguarde `decode()`.
- **Aviso de cookies, preloader e tema** mudam a primeira tela. Controle os três pelo `localStorage`/`sessionStorage` antes do carregamento.
- **Não use música com direitos autorais nem copie uma melodia existente.** Descreva a vibe e componha algo original.

Veja o resultado

O vídeo feito com este prompt e a ideia de site shape-ready estão no post Seu site é shape-ready?. Se preferir que eu produza o vídeo do seu site, fale comigo pela página de contato.

Próximo passo

Vamos tirar isso do papel?

Mande o briefing por e-mail, WhatsApp ou pelo formulário. Eu respondo com as perguntas que faltam e, depois, com escopo, prazo e valor por escrito — sem reunião obrigatória.

01Briefing por escrito
02Proposta fechada
03Entregas com prévia online

Enviar briefing

ou hi@yanmantovani.com · WhatsApp