← Voltar ao inícioRecursosYAN.M / SYSTEM

Prompt do filme em motion

O prompt completo que usei para gerar o filme do meu portfólio com código e IA: trilha original sincronizada, animação quadro a quadro e versões 16:9 e 9:16. É só preencher com a sua marca e copiar.

Como usar

Troque cada campo entre colchetes, como [NOME DA MARCA], pelas informações da sua marca. 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.
Deixe na mesma pasta as logos em SVG que devem aparecer no vídeo.
Revise os quadros de prova que o agente mostrar 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 de internet para instalar os pacotes. O resultado são dois MP4, horizontal e vertical, com cerca de 48 segundos a 60fps e trilha original.

Prompt

21 campos entre colchetes para preencher

# Prompt: filme de apresentação em motion design, gerado 100% por código

## Papel

Você é um diretor de motion design e engenheiro criativo. Vai produzir um filme institucional de **48 segundos**, em **16:9 (1920×1080)** e **9:16 (1080×1920, para Reels)**, a **60fps**, com **trilha sonora original composta e sintetizada em código** e **perfeitamente sincronizada** à imagem. Nenhuma ferramenta de edição de vídeo, nenhum banco de áudio, nenhum asset pronto além das logos que eu fornecer.

## Marca

- Nome / logotipo em texto: [NOME DA MARCA]
- Site: [URL DO SITE]
- Cor de destaque: [COR DE DESTAQUE, ex.: #ff5a00] · fundo: [COR DE FUNDO, ex.: #0b0d11] · texto: [COR DO TEXTO, ex.: #f4f5f6] · apagado: [COR SECUNDÁRIA, ex.: #6e787f]
- Tipografia: [FONTE DOS TÍTULOS, ex.: Inter Tight] + [FONTE MONO, ex.: IBM Plex Mono], via Google Fonts
- Seis serviços a representar: [SERVIÇO 1], [SERVIÇO 2], [SERVIÇO 3], [SERVIÇO 4], [SERVIÇO 5], [SERVIÇO 6]
- Três números-prova: [NÚMERO 1] = [SIGNIFICADO 1] · [NÚMERO 2] = [SIGNIFICADO 2] · [NÚMERO 3] = [SIGNIFICADO 3] (ex.: 1 pessoa, 3 idiomas, 0 reuniões obrigatórias)
- Logos SVG disponíveis em: [PASTA COM AS LOGOS] (ferramentas da stack + ChatGPT/Claude/Perplexity se houver cena de IA)

## Princípios inegociáveis

1. **Zero palavras para traduzir.** O vídeo precisa ser entendido em qualquer idioma. Só podem aparecer: o nome da marca, a URL, números, códigos técnicos universais (ex.: `120 BPM`, `DEPLOY ✓`, coordenadas) e logos. Todo conceito vira símbolo desenhado (pessoa, bandeiras, calendário riscado, ícones isométricos).
2. **Uma partitura, duas saídas.** Um único arquivo `score.js` define BPM, compassos, onde cada instrumento toca, acordes, impactos, risers, silêncio e cortes. O sintetizador de áudio **e** o motor visual leem esse mesmo arquivo — é isso que garante sincronia exata.
3. **Renderização determinística quadro a quadro.** Nada de gravar a tela em tempo real (trava, perde quadros, dessincroniza). A página expõe `window.render(t)`, uma função **pura** do tempo `t` em segundos: dado `t`, desenha o quadro exato. Um script chama `render(f/60)` para cada quadro, tira screenshot e envia ao ffmpeg.
4. **Motion (motion.dev) para easing e interpolação** — `cubicBezier`, `easeIn`, `easeOut`, `backOut`, `mix`, `clamp`, `progress`. Instale via npm e carregue o `dist/motion.js` **local** (sem CDN durante o render).
5. **Tudo sutil, riqueza no conjunto.** Cada camada sozinha é discreta; o conjunto é que dá acabamento de cinema.

## Arquitetura de arquivos

```
film/
  score.js       # partitura compartilhada (UMD: funciona no browser e no Node)
  compose.cjs    # sintetizador → music.wav (48 kHz, estéreo, 16-bit)
  film.html      # motor visual: window.render(t), ?v=1 ativa o formato vertical
  render.mjs     # Playwright + ffmpeg: `node render.mjs h|v` e `node render.mjs h probe 1,5.2,8`
  motion.js      # cópia local de node_modules/motion/dist/motion.js
  logos/         # SVGs
```

Pacotes (numa pasta isolada): `npm i playwright motion ffmpeg-static` e `npx playwright install chromium`.

## Estrutura musical (120 BPM · 1 compasso = 2s · 24 compassos = 48s)

Tom: lá menor, progressão **Am – F – C – G**, um acorde por compasso a partir do compasso 5.

| Compassos | Tempo | Arranjo |
|---|---|---|
| 1–2 | 0–4s | Só um pulso grave suave em cada tempo |
| 3–4 | 4–8s | + chimbal nos contratempos; riser de 6s a 8s |
| 5–8 | 8–16s | **Impacto aos 8s**; kick 4/4, baixo, pad; arpejo entra no compasso 7 |
| 9–14 | 16–28s | Batida cheia; troca de acorde a cada compasso (= troca de cena) |
| 15–16 | 28–32s | Breakdown: kick só no tempo 1, arpejo e pad mais baixos |
| 17–18 | 32–36s | Kick nos tempos 1 e 3, arpejo em destaque ("pulso digital") |
| 19–21 | 36–42s | Batida volta; riser de 40s a 41,5s |
| — | 41,5–42s | **Silêncio absoluto** (gate) |
| 22–24 | 42–48s | **Impacto final aos 42s**, acorde longo Am(add9) com sinos lentos; último pulso grave aos 47,5s (fecha o loop com a abertura) |

### Síntese (sem bibliotecas, só matemática em Float32Array)

- **Kick:** seno com queda exponencial de frequência (≈154→44 Hz em ~35ms), envelope exponencial ~0,18s, `tanh` para saturar, clique de ruído de 3ms. Versão "pulso" mais grave e sem clique para a intro (ganho baixo, ~0,3).
- **Chimbal:** ruído branco com passa-altas (diferença de primeira ordem aplicada duas vezes), decaimento ~18ms.
- **Baixo:** seno na fundamental e uma oitava abaixo, sustentado pelo compasso.
- **Pad:** três dentes de serra levemente desafinados (±0,12 semitom) por nota, passa-baixas de um polo (~1,4 kHz), ataque 0,4s, desafinações espalhadas no estéreo.
- **Sidechain:** um array de ganho que "afunda" baixo e pad depois de cada kick (`1 - 0.75·e^(-t/0.1)`).
- **Arpejo:** semicolcheias com as notas do acorde num padrão fixo; pluck senoidal + 2º harmônico, decaimento ~0,16s, eco em colcheia pontuada com ping-pong.
- **Riser:** ruído com passa-baixas varrendo 200 Hz→8 kHz + seno subindo, crescendo quadrático.
- **Impacto:** seno grave com queda (~98→28 Hz) + ruído filtrado, cauda de ~2,5s.
- **Reverb:** Schroeder simples (4 combs com amortecimento + 2 allpass) num barramento de envio.
- **Master:** `tanh` suave, fade de 0,3s no final, normalizar para −1 dBFS, gravar WAV à mão (cabeçalho RIFF).
- **Verificação (o agente não ouve!):** gere uma imagem com `showwavespic` + `showspectrumpic` do ffmpeg e confira se a estrutura bate com a tabela (pulsos, riser, impacto, breakdown, buraco do silêncio, cauda). Meça RMS/pico com `volumedetect` (alvo: RMS ≈ −11 dB, pico −1 dB).

## Roteiro visual (tempos em segundos)

| Tempo | Cena | O que acontece |
|---|---|---|
| 0–4 | Ponto | Tela escura, ponto de destaque no centro piscando em cada pulso. No último tempo (3,5→4) ele se estica numa linha horizontal que atravessa a tela. |
| 4–8 | Grade | A linha se ramifica e desenha uma grade de planta técnica, com linhas nascendo do centro para fora em cascata. Em cada tempo, 7 cruzamentos aleatórios (com seed) acendem como "+" laranja. |
| 8–12 | Dobra | **Impacto:** onda de choque, micro-shake, aberração cromática. A grade "deita" e vira isométrica, interpolando a matriz 2D de identidade para isométrica (`[[cos30, -cos30],[0.5, 0.5]]`). Cinco lajes isométricas caem uma por tempo e se empilham; um anel laranja se expande no pouso. A laje do meio é destaque (laranja + glow). |
| 12–16 | Vista explodida | As lajes se afastam; pontos de dados sobem entre elas **em cada nota do arpejo**; rótulos `01–05` com linhas de chamada; cota técnica de altura. |
| 16–28 | Seis frentes | Um ícone isométrico por compasso, corte seco no tempo 1 com **flash de 1 quadro** na cor de destaque. Número `01 / 06` e barra de progresso de 6 segmentos. |
| 28–32 | Mapa | Os seis ícones encolhem e voam para um hexágono; linhas laranja ligam vizinhos e raios ligam ao centro; um losango central pulsa no kick. |
| 32–36 | Leitores de IA | Logos de IA surgem com `backOut`; o mapa se desloca e fica desfocado; curvas de Bézier saem das logos até o centro com pontos viajando no chimbal; o mapa entra em foco e cada ícone "acende" em sequência (anel + marcador). |
| 36–40 | Números | Três números grandes contam (o terceiro desce de 9 a 0, na cor de destaque), sobem e encolhem, e o símbolo correspondente se desenha abaixo (pessoa · 3 bandeiras · calendário com risco laranja). Logos da stack correm numa faixa inferior. |
| 40–41,5 | Colapso | Tudo gira ~10° e é sugado para o centro, com raios convergindo. |
| 41,5–42 | Congela | Só o ponto de destaque no centro. Partículas, HUD e scanline congelam. |
| 42–48 | Assinatura | **Impacto:** explosão de ~110 partículas radiais com desaceleração, onda de choque, aberração. O ponto viaja até virar o "." do logo; o nome é revelado por máscaras que abrem a partir do ponto para os dois lados. URL digitada em semicolcheias com cursor; ícones de WhatsApp/e-mail pulsando em cada tempo; cantoneiras de recorte (crop marks) ao redor. De 46,4 a 47,4 tudo some e o ponto volta ao centro; aos 47,5 ele pisca → **loop perfeito** com o quadro zero. |

### Os seis ícones isométricos

Projeção: `iso(x,y,z) = [ox + (x−y)·cos30·s, oy + ((x+y)·0,5 − z)·s]`. Caixas com três faces visíveis (topo, face +x, face +y) desenhadas da mais baixa para a mais alta (algoritmo do pintor), cada face com preenchimento na cor de fundo para ocultar o que está atrás.

**Coreografia em 3 tempos, idêntica para todos (janela de 2s):**
1. **Traço (0–1s):** os contornos se desenham com uma "caneta" (ponto de destaque com glow) na ponta do traço.
2. **Hachura (1–1,4s):** as faces ganham hachura diagonal técnica (`<pattern>` rotacionado 45°).
3. **Vida (1–2s):** animação própria de cada ícone:

| Ícone | Vida |
|---|---|
| Navegador (painel em pé) | blocos de layout caem na página com `backOut`, cursor desliza e clica (anel se expandindo) |
| Servidor (3 racks) | LEDs acendem aleatoriamente **em cada chimbal**, dados caem numa coluna ao lado |
| Celular | cards deslizam dentro da tela (com `clipPath`), uma notificação salta para fora da tela |
| Automação | duas engrenagens engrenadas girando em sentidos opostos numa base, três cubos ligados por um loop tracejado com pontos circulando |
| IA | rede neural 3-4-2 num painel; **cada nota do arpejo** dispara um pulso que atravessa as camadas e acende os nós |
| Cloud | nuvem (contorno calculado pela união de círculos) sobre uma base; pacotes-cubo sobem e descem; cadeado cujo arco se fecha e fica laranja |

**Cotas técnicas:** três linhas de medida por ícone (largura, profundidade, altura) com linhas de extensão tracejadas, marcas de 45° nas pontas e o valor numérico girado ao longo da linha. Abrem a partir do centro (0,4–0,9s) e fecham antes do corte (1,6–1,9s). Pedestal tracejado em losango sob cada ícone.

## Camadas (de baixo para cima)

1. **`<canvas>` de fundo**
   - Grade dupla: fina (24px, alpha ~0,02) e principal (96px, alpha ~0,05), com **parallax** (a fina acompanha metade do zoom e do shake da câmera). A principal "respira" a cada compasso.
   - **Scanline** na cor de destaque varrendo de cima a baixo a cada 4 compassos, acendendo a grade por onde passa; durante os risers ela acelera (`easeIn`).
   - **Poeira de luz:** ~46 partículas com seed, deriva lenta, 15% na cor de destaque; empurradas para fora nos impactos, agitadas nos risers.
   - Explosão de partículas do impacto final.
2. **`<svg>` da cena**, regenerada inteira por `innerHTML` a cada quadro, dentro de um `<g>` com a transformação da câmera.
3. **`<div>` de imagens** (logos em `<img>`, criadas uma única vez e pré-decodificadas com `img.decode()`; por quadro só mudam `transform` e `opacity`). Recebe a mesma transformação da câmera.
4. **`<canvas>` de acabamento:** grão (6 texturas de ruído pré-geradas, trocadas por quadro, blend `screen`, alpha ~0,055), vinheta radial e o flash de corte.
5. **`<svg>` de HUD:** réguas nas quatro bordas com ticks a cada 24px (maiores a cada 96), o tick "ativo" avançando **em cada tempo** (metrônomo visual); cantos com `[NOME DA MARCA] — 01`, `120 BPM · 03/04`, coordenadas `X · Y · Z` mudando e timecode `00:SS:QQ` que vira `DEPLOY ✓` no final.

### Câmera

- Dolly contínuo de 100%→104% em cada cena.
- Micro-zoom de 0,5% que decai após cada kick.
- Shake de ~3px por 150ms nos impactos.
- Aberração cromática por ~3 quadros nos impactos: `filter: drop-shadow(5px 0 0 rgba(255,30,80,.65)) drop-shadow(-5px 0 0 rgba(30,200,255,.65))` no SVG da cena.
- Foco seletivo com `feGaussianBlur` dinâmico (desfoque do mapa na cena de IA).

### Mapa de sincronia

| Som | Imagem |
|---|---|
| Kick | micro-zoom, losango central pulsa |
| Chimbal | LEDs piscam, pontos viajam nas conexões |
| Arpejo | pulsos da rede neural, pontos de dados subindo |
| Troca de acorde | troca de ícone + flash de 1 quadro |
| Riser | scanline acelera, poeira agita |
| Impacto | onda de choque, shake, aberração, partículas |
| Silêncio | tudo congela |

## Formato vertical (9:16)

O mesmo `film.html` com `?v=1`: `W/H` trocam e cada posição é calculada a partir deles. Regras:
- Sem barras de cinema.
- Conteúdo importante fora dos ~150px do topo e dos ~300px da base (interface do Instagram).
- Ícones um pouco maiores.
- Números empilhados em linhas em vez de colunas.
- Logos de IA numa linha acima do mapa, e o mapa mais abaixo.
- Faixa de logos da stack perto da base.

## Renderização

```
chromium (Playwright) → page.evaluate(t => render(t), f/60) → page.screenshot({type:'jpeg', quality:94})
  → stdin do ffmpeg: -f image2pipe -framerate 60 -c:v mjpeg -i - -i music.wav
    -c:v libx264 -crf 17 -pix_fmt yuv420p -c:a aac -b:a 256k -shortest -movflags +faststart
```
- Respeite o backpressure (`if (!stdin.write(buf)) await once('drain')`).
- Antes do primeiro quadro, aguarde `document.fonts.load(...)` de cada peso, `document.fonts.ready` e a decodificação das imagens (`window.__ready`).
- 2.880 quadros por formato levam ~6 min cada; rode os dois em paralelo.
- **Arquivo final:** o grão animado infla o arquivo (~400 MB). Re-encode com `-b:v 14M -maxrate 18M -bufsize 28M -preset slow -c:a copy` → ~85 MB, aceito pelo Instagram.

## Processo de revisão (obrigatório)

1. Gere a trilha e verifique pela imagem de forma de onda/espectrograma.
2. Rode o modo **probe** em ~20 instantes-chave espalhados por todas as cenas, junte-os numa folha de contato (`hstack` do ffmpeg) e **olhe de verdade**. Depois confira em resolução cheia os quadros com mais detalhe.
3. Corrija tudo o que aparecer num lote só, confira de novo uma única vez e só então faça o render final dos dois formatos.
4. Entregue os dois MP4 e diga claramente que a trilha foi verificada só visualmente, pedindo que alguém ouça com fone.

## Armadilhas conhecidas (já quebraram este projeto antes)

- **Motion `animate()` em elementos SVG escreve atributos de apresentação** (`opacity`, `stroke-dashoffset`), e qualquer CSS ou estilo inline tem prioridade sobre eles → a animação "não acontece". Neste projeto isso nem aparece, porque não há animação em tempo real: use o Motion só para easing/interpolação e escreva os valores você mesmo a cada quadro.
- **Animar `rotate`/`scale` com o Motion num elemento centralizado com `transform: translate(-50%,-50%)`** apaga o translate e o elemento sai do quadro. Centralize com margens ou use um wrapper.
- **Regra CSS `text { font-family: ... }` vence o atributo `font-family` do `<text>`.** Defina a fonte padrão no `<svg>` (herança), não no `text`, senão títulos saem na fonte errada.
- **`String.prototype.replace` interpreta `$$` na string de substituição como `$`.** Se você fizer patches com scripts no código que usa `$$(...)`, vai quebrar os seletores. Use `split(a).join(b)` ou edite o arquivo diretamente.
- **Parar o traço com `stroke-dasharray` + `getTotalLength()`** depende do DOM. Prefira calcular o traço parcial você mesmo sobre polilinhas (comprimentos acumulados). Assim você também sabe onde fica a ponta, para desenhar a "caneta".
- **Imagens recriadas a cada quadro podem piscar vazias.** Crie uma vez, decodifique e só altere propriedades.
- **Rótulos SVG somem atrás de faces desenhadas depois deles.** Mova os textos para o fim do grupo.
- **O agente não consegue ouvir a trilha.** Verifique estrutura e níveis por imagem e medições, e seja transparente sobre isso.

Veja o resultado

O filme feito com este prompt, e o passo a passo do que deu certo e do que deu errado, estão no post Como fiz o filme do meu portfólio só com código e IA. Se preferir que eu produza um filme desses para a sua marca, 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