{
  "id": "clube-frame",
  "titulo": "Frame by Frame",
  "categoria": "saas",
  "resumo": "vinheta quadrada de 12 s, sem narração, para o lançamento do \"Frame by Frame\", curso de refazer vídeos de lançamento que fica num hub da Whop (é o produto padrão do próprio prompt). É uma recriação do \"Launch video remake comparison\" de dawood46 (@notdwd), publicado no prompt-motion.com (`notdwd-c2037d`) e feito com o Claude Opus 5.5. O prompt dele é o mais detalhado da coleção: especifica o vídeo quadro a quadro, com cortes em quadros exatos 2 quadros antes da batida, tabelas de posição por quadro e entradas que já chegam em movimento. A recriação mantém os mesmos 8 planos e os mesmos quadros de corte e acrescenta o que faltava: som de verdade, câmera viva, match cut real do ícone para a barra de menus, vidro e títulos com acabamento, logo sem quadro congelado e um fecho com o visor da marca. Feito em HyperFrames (HTML + GSAP), com música real e 85 efeitos.",
  "indicado": "lançamento de curso, app ou produto digital em formato curto; teaser para redes sociais.",
  "estilo": [
    "keynote da Apple",
    "vidro fosco",
    "branco e azul",
    "cursor",
    "cortes na batida",
    "desfoque de movimento"
  ],
  "ficha": {
    "formato": "1080×1080, 60 qps, 1:1",
    "duracao": "12,075 s (360 quadros a 29,97 qps, a grade do prompt)",
    "motor": "ae",
    "voz": "sem narração",
    "musica": "ver o guia de estilo",
    "fontes": "ver o guia de estilo"
  },
  "ferramentas": [
    "Claude Code",
    "After Effects",
    "ElevenLabs"
  ],
  "ficha_tecnica": {
    "Duração": "12,075 s (360 quadros a 29,97 qps, a grade do prompt)",
    "Formato": "1080×1080, 60 qps, 1:1",
    "Voz": "sem narração",
    "Ferramenta": "HyperFrames 0.8.144 (HTML + GSAP); render a 120 qps juntado em 60 qps com motion blur",
    "Referência": "\"Launch video remake comparison\" (@notdwd), painel da direita (\"Frame by Frame remake\"), 12,07 s",
    "Trilha": "\"Lose Control\" (MEDUZA, Becky Hill, Goodboys), 124 BPM; drop em 2,467 s",
    "Som": "85 efeitos; mix final a −14,0 LUFS, pico −1,4 dBTP"
  },
  "etapas": [
    {
      "titulo": "O roteiro",
      "texto": "**Resumo:** a vinheta não tem fala; a história é a do prompt original, em 8 planos: o cabeçalho do produto sobe dentro do hub, o cursor clica no logo, o ícone do app ganha os quadrados, vira um ícone da barra de menus, o prompt é digitado, a página da aula responde, os cartões das aulas passam e o fecho mostra o nome. Os quadros abaixo estão na grade de 29,97 qps do prompt (f0–f359); o vídeo final roda a 60 qps.\n\n## Como a história foi montada\n\n- **Entrada do prompt:** produto \"Frame by Frame\" no hub da Whop, logo de visor (quatro colchetes em volta de \"FF\"), prompt \"Make a launch video for my app\", aula \"2.1 Choose a reference\", cartões \"Launch\" e \"Sound\".\n\n- **Batida:** `k = 0,048 + 0,4838·k s` (124 BPM, 14,5 quadros por batida); os cortes caem 2 quadros antes da batida.\n\n- **Um único momento de calma permitido** pelo prompt (o logo no plano 7), que na recriação virou o visor focando.\n\n## Texto da tela, na ordem\n\n- `Frame by Frame` · `on Whop` · `Search Frame by Frame` · `⌘K` · `Course · 8 lessons`\n\n- Barra de menus: `Mon Jun 22 9:41 AM`\n\n- Prompt digitado: `Make a launch video for my app`\n\n- Página: `Courses › Remake any launch video` · `2.1 Choose a reference` · `Module 2 · Lesson 1` · \"Pick one launch video you want to match. Download it, count its frames, and write down every cut. The agent rebuilds it **frame for frame** with your brand, your colours and your words, then checks it side by side against the original.\" · `What you need` e os cinco itens\n\n- Cartão: `MODULE 2` · `Remake any launch video` · `Module 2 · 8 lessons`\n\n- Cartões: `Module 3` / `Launch` · `Module 5` / `Sound`\n\n- Fecho: `Frame by Frame` entre os colchetes do visor\n\n## Planos por tempo\n\n | \n\n | #\n | Quadros (29,97)\n | Tempo (s)\n | O que acontece\n\n | 1\n | f0–f71\n | 0–2,40\n | o cabeçalho sobe da névoa azul (y 932 → 776 → 683 → 608 → 546 → 536 nos quadros 0, 2, 5, 10, 24 e 37) e depois deriva 1 px por quadro; o nome entra desfocado no f2, a pílula no f4–5 deslizando; a janela do hub aparece em volta (opacidade 0 → 0,53 → 0,7 → 1); o cursor entra no f27, desacelera, gira para mergulhar, pousa no logo e cresce no hover; anel de gelo acende; zoom de 1,0 a 1,2 e volta a 1,04 no clique\n\n | 2\n | f72–f100\n | 2,40–3,37\n | **corte no drop:** o ícone navy de 276 px encolhe para 178 px num halo cinza; os quatro quadrados giram em sentido anti-horário e travam em cruz um depois do outro; no fim, tudo encolhe acelerando e o ícone para no lugar exato do ícone da barra, com os quadrados virando as três bolinhas\n\n | 3\n | f101–f158\n | 3,37–5,30\n | **match cut:** a barra de menus do Mac entra desfocada e assenta; o cursor sobe e clica na marca (f113–117); a câmera anda +125 px; a caixa de vidro salta do ícone (f116) e assenta em f138; o prompt é digitado de f121 a f150; a partir de f136 a cena sobe acelerando até o chicote, tingindo de azul-claro\n\n | 4\n | f159–f186\n | 5,30–6,24\n | **corte no chicote:** a página da aula chega borrada e 420 px abaixo, sobe em degraus cada vez menores e assenta em f180; um clarão claro some até f165; o cursor sobe junto e para sob \"frame for frame\"\n\n | 5\n | f187–f214\n | 6,24–7,17\n | o cartão sobe por cima da página, que desfoca; o cursor da página desce e some; o cartão sai encolhendo 5% enquanto o quadro desfoca de 1 a 7 px, e o corte cai no pico do desfoque\n\n | 6\n | f215–f244\n | 7,17–8,17\n | os dois cartões com títulos de vidro entram desfocados e escalonados, ficam nítidos em f224, sobem 3 px por quadro e saem acelerando em desfoque\n\n | 7\n | f245–f300\n | 8,17–10,04\n | o disco do logo sobe ao centro com rastro vertical; o visor foca (os cantos abrem e travam), três ondas e um halo pulsam nas batidas (f262, f277, f291) com aproximação lenta; no fim, o disco encolhe acelerando\n\n | 8\n | f301–f359\n | 10,04–12,075\n | **corte para o fecho preto:** a palavra entra larga (~1.650 px) com rastro de zoom, assenta perto de 516 px, os colchetes do visor se desenham e fecham sobre ela com obturador, o brilho passa, e a palavra colapsa no último meio segundo; o vídeo termina no meio do colapso\n\n## Momentos para a trilha\n\n- 0–2,40 s: só a voz da música, abafada, sob o cabeçalho e o cursor.\n\n- 2,467 s: drop, 2 quadros depois do corte f72.\n\n- 3,45–5,2 s: música 2,5 dB abaixo para o clique e as teclas do prompt.\n\n- 6,240 e 8,175 s: golpes de transição exatamente nos cortes.\n\n- 10,043 s: a música para seca e sobra a cauda de reverb, com o drone em Dó e o brilho do fecho.\n\nOs 85 efeitos, com tempo e ganho, estão em `audio/cues.json`."
    },
    {
      "titulo": "A identidade visual",
      "texto": "**Resumo:** clima de keynote da Apple, como pede o prompt original: tudo suave, branco, azul forte e vidro. A paleta e a fonte são as do prompt (sem roxo, violeta, magenta nem laranja); o movimento é especificado quadro a quadro, com entradas que já chegam em movimento, saídas que aceleram até o corte e desfoque que segue a velocidade. A recriação acrescenta câmera viva, vidro com aro e um visor que \"foca\" como estado vivo do logo. Os números saem do prompt, do `hf/index.html` e do `audio/mix.py`.\n\n## Fontes\n\n | \n\n | Uso\n | Fonte\n | Arquivo no pacote\n\n | Tudo (nome, interface, página, títulos de vidro, fecho)\n | Inter 400, 500, 600, 700 e 800\n | `hf/fonts/Inter-400.ttf` … `Inter-800.ttf`\n\nOs títulos de vidro usam Inter 800 a 132 px com espaçamento −5, para caber nos cartões de 538 px. O texto da página usa Inter 400 a 47 px, cinza `#BCBCBA`, com a frase-chave em preto 600.\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Papel\n\n | Página\n | `#FDFDFB`\n | fundo branco\n\n | Névoa\n | `#B7CFEB`\n | névoa azul de onde o cabeçalho sobe, sumindo até o quadro 28\n\n | Gelo\n | `#E6F0FA`\n | tinta clara; brilho do chicote `#E6F4FE`, clarão `#E2F4FE`\n\n | Chão de luz\n | `#DBEEFD`\n | brilho azul na base da janela\n\n | Céu\n | `#294376 → #769CC2`\n | papel de parede do Mac\n\n | Navy\n | `#1E2F52`\n | ícone do app (degradê `#294376 → #1E2F52`), barra de menus\n\n | Azul\n | `#2F6BFF`\n | quadrado de cima, bolinha, botão enviar\n\n | Ciano\n | `#3CC8F0`\n | quadrado da direita, bolinha\n\n | Menta\n | `#4ED6A0`\n | quadrado de baixo, bolinha\n\n | Turquesa\n | `#7FE3DA`\n | brilho dos cartões (o remake original vazava rosa, proibido pelo prompt)\n\n | Fecho\n | `#020204` nos cantos, `≈#272729` ao redor da palavra\n | fundo radial do cartão final; palavra `#F3F3F5`\n\n## Componentes\n\n | \n\n | Peça\n | Como é\n\n | Logo\n | visor: quatro colchetes de canto em volta de \"FF\" em negrito, num disco de 132 px `#FBFCFE` com aro `#E8E8EA`\n\n | Cabeçalho\n | disco + \"Frame by Frame\" (Inter 500) + pílula escura \"on Whop\" (`#2F2E2F`), ocupando x 474–1063\n\n | Janela do hub\n | raio 93, `#FCFDFF`, faixa de cima `#F1F6FF`, busca, coluna de ícones e o cartão do curso (\"Course · 8 lessons\")\n\n | Cursor\n | seta do macOS (preta, contorno branco, sombra leve), que gira até −36° no mergulho, cresce 1,6× no hover e afunda 15% no clique\n\n | Ícone do app\n | squircle navy de 276 → 178 px, raio de 28% da largura, sobre halo cinza `#E9E9E7`; quatro quadrados de 92 px (raio 26) em órbita, travando em cruz a 216 px\n\n | Barra de menus\n | moldura do notebook (`#686866` no brilho), barra navy, Wi-Fi, bateria, a marca e as três bolinhas, \"Mon Jun 22 9:41 AM\" a 34 px\n\n | Caixa de vidro\n | `backdrop-filter: blur(10px) saturate(1.15) brightness(1.1)`, branco de 24% a 10%, aro de cima `inset 0 1.5px 0` branco 75%, borda interna de 1 px, sombra `0 30px 70px` navy a 32%; 726×228, raio 60\n\n | Página da aula\n | trilha \"Courses › Remake any launch video\", título \"2.1 Choose a reference\", texto com \"frame for frame\" em destaque\n\n | Cartão\n | branco, capa de 627×536 com raio 64, alça no topo, \"MODULE 2\" e \"Remake any launch video\"\n\n | Cartões com título de vidro\n | 538×348, raio 57, pílula fosca (\"Module 3\", \"Module 5\") e \"•••\" fosco; o título (\"Launch\", \"Sound\") é a arte desfocada e clareada (`feGaussianBlur 9`, `feComponentTransfer` 0,62 / 0,43), recortada pelas letras, com degradê branco 30% → 2% e contorno de 2 px, cortado pela borda de baixo do cartão\n\n | Fecho\n | a palavra com brilho estreito e halo largo, 26 cópias para o rastro de zoom, colchetes do visor que se desenham e fecham\n\n## Transições\n\nSete cortes secos nos quadros f72, f101, f159, f187, f215, f245 e f301 (2,402 · 3,370 · 5,305 · 6,240 · 7,174 · 8,175 · 10,043 s). Nenhum crossfade: cada plano sai acelerando ou numa rampa de desfoque, e o corte cai no pico. Do plano 2 para o 3, match cut: o ícone para no lugar exato do ícone da barra (432, 507) e os quadrados viram as bolinhas. Do plano 3 para o 4, chicote vertical: `y = −a·(f − 136)^4`, até ~25 px por quadro, com desfoque só acima de 5 px por quadro (`(v − 5)·0,35`).\n\n## Curvas e tabelas\n\n- **Tabelas de chaves por quadro**, interpoladas por cúbica monotônica (Fritsch–Carlson): passa pelos pontos sem passar do alvo e sem quinas de velocidade.\n\n- **Entradas:** ease-out exponencial que anda 12–19% da distância restante por quadro. Exemplo, a página: 420, 315, 210, 170, 140, 116, 96, 81… px (fator ≈ 0,83).\n\n- **Desfoque:** `k·|derivada da tabela|` com teto, separado em x e y (`feGaussianBlur stdDeviation=\"x y\"`).\n\n- **Caixa de vidro nascendo do ícone:** origem no ponto do ícone; escala X 0,12 → 1,025 → 0,993 → 1 e Y 0,04 → 1,035 → 0,99 → 1 (o Y atrasa um quadro e passa mais), assentando em f138.\n\n- **Prompt:** cerca de 1 caractere por quadro, com uma pausa de 1 quadro a cada 2 ou 3; cursor de texto sempre aceso.\n\n- **Rastro do fecho:** cópia `i` escalada `1 + i·0,072·s`, opacidade `0,12·(1 − i/26)·s`, com `s` caindo a zero em 6 quadros.\n\n- **Motion blur:** render a 120 qps e `tmix=frames=2:weights=1 1` para 60 qps; eventos discretos presos à grade de 60 qps.\n\n## Câmera\n\nAlém dos movimentos do prompt (zoom de 1,0 a 1,2 no clique do logo e volta a 1,04; panorâmica de +125 px na barra de menus; subida acelerando no chicote), uma deriva por ruído suave com semente (±2 px, ±0,12°) roda em todos os planos. No plano 7, aproximação de 3,5% sobre o logo.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Lose Control\" (MEDUZA, Becky Hill, Goodboys), playlist internacional; 124 BPM medido\n\n | Abertura\n | antes do drop, só a voz da música, abafada (passa-alta de 180 Hz e passa-baixa de 2,4 kHz)\n\n | **Drop**\n | **2,467 s**, no corte para o ícone (f72), com impacto\n\n | Prompt\n | música 2,5 dB abaixo entre 3,45 e 5,2 s, para os cliques e as teclas aparecerem\n\n | Fecho\n | a música para seca no corte do fecho (10,043 s) e solta uma cauda de reverb (convolução com um hall de 4 s), mais o drone Atlantic em Dó\n\nTonais em Dó: Clarity com pico no drop e dois Ping Boom, cuja subida serve de riser para o drop e para o fecho.\n\n## Sound design e mix\n\n | \n\n | Ação na tela\n | Efeito\n\n | cabeçalho sobe\n | impacto suave com passa-baixa, whoosh curto\n\n | pílula \"on Whop\"\n | pop\n\n | janela abre, cursor entra e mergulha\n | whoosh longo e curtos, abafados\n\n | hover e anel no logo\n | clique leve, pop\n\n | clique no logo e no ícone da barra\n | clique de mouse\n\n | corte do drop\n | whoosh longo + impacto + Ping Boom\n\n | órbita dos quadrados\n | whoosh de giro; um pop por quadrado, subindo 0/+3/+5/+7 semitons\n\n | colapso até a barra\n | whoosh curto + impacto grave\n\n | vidro nasce do ícone\n | pop\n\n | prompt digitado\n | tecla de teclado, bem baixa\n\n | chicote e página chegando\n | whoosh longo com pico no corte, papel deslizando\n\n | cortes dos cartões\n | whoosh curto, pop, impacto no corte de 8,175 s\n\n | visor \"foca\"\n | foco de câmera, clique ao travar, sino\n\n | fecho\n | whoosh longo com pico no corte, impacto, brilho (shimmer), obturador nos colchetes\n\n- 85 efeitos em `at = evento − pico`, listados em `audio/cues.json`.\n\n- Final com `loudnorm` em duas passagens: −14,0 LUFS, pico −1,4 dBTP; fade só nos últimos 60 ms.\n\n## O que é \"humano\" neste vídeo\n\n- Nenhum plano começa parado; tudo chega já em movimento.\n\n- O cursor \"olha\" para onde vai, cresce no hover e afunda no clique.\n\n- Os quadrados travam um depois do outro, com um pequeno rebote cada.\n\n- O logo, que no original ficava congelado, foca como uma câmera e pulsa nas batidas.\n\n- O cursor da página desce e some quando o cartão sobe, em vez de ficar abandonado sobre o texto."
    },
    {
      "titulo": "A montagem no HyperFrames",
      "texto": "| \n\n | Arquivo\n | O que faz\n\n | `hf/index.html`\n | a composição: uma função `render(f)` pura em função do quadro (na grade de 29,97), chamada por um único tween; cada plano é uma tabela de chaves por quadro interpolada por cúbica monotônica\n\n | `audio/mix.py`\n | monta a trilha (intro só com a voz abafada, instrumental a partir do drop, música parando seca no corte do fecho com cauda de reverb), soma os efeitos em `evento − pico`, abaixa a música 2,5 dB na cena do prompt e faz o `loudnorm` em duas passagens (−14 LUFS)\n\n | `scripts/revisar.sh`\n | junta o render de 120 qps em 60 qps com `tmix` de 2 quadros, monta as folhas de contato (a nossa e a do original) e mede os saltos entre quadros fora dos cortes\n\n | `scripts/pares.py`\n | monta pares \"original\n\n- **Instale o básico:** Node.js (para o `npx`), ffmpeg e Python 3 com numpy e soundfile. A fonte e o GSAP já vêm no pacote.\n\n- **Veja a composição:** dentro de `hf/`, rode `npx --yes hyperframes@0.8.144 preview`, ou `npm run check` para validar.\n\n- **Render:** da pasta do projeto, `npx --yes hyperframes@0.8.144 render hf --fps 120 --quality high --output render/raw120-v1.mp4` (cerca de 1 min 40 s com 2 processos) e depois `bash scripts/revisar.sh v1`, que gera `render/video60-v1.mp4`, as folhas e a lista de saltos. Por fim, junte o vídeo de 60 qps com `audio/mix-final.wav` no ffmpeg.\n\n- **Som** (opcional): coloque `audio/` ao lado de `hf/`, aponte `SFX`, `PREM` e `TON` no `mix.py` para `audio/sfx/nivelados`, `audio/sfx/premium` e `audio/sfx/tonais` e rode `python audio/mix.py`.\n\n- **Comparar com o original:** o `pares.py` e o `revisar.sh` procuram `estudo/ref-remake-1080.mp4`; o recorte está em `referencias/estudo/`.\n\n**Pegadinhas:** com o `tmix`, todo evento discreto (corte, letra digitada, piscar do cursor) precisa cair na grade de 60 qps (`ceil(t·60)/60`); senão o corte vira um dissolve de 1 quadro e aparece um cursor fantasma. Desfoque alto demais apaga a forma: se um quadro parecer vazio, baixe o desfoque. O quadrado branco da órbita some no fundo branco sem a borda de 1 px e a sombra. No ffmpeg, para tirar quadros de revisão, use `-ss` depois do `-i`; antes dele, às vezes saem quadros com blocos."
    },
    {
      "titulo": "As decisões de direção",
      "texto": "- **A especificação é a estrutura.** Os quadros de corte do prompt (f72, f101, f159, f187, f215, f245, f301) foram mantidos; eles caem cerca de 67 ms antes da batida, para o olho chegar no corte e o ouvido no bumbo.\n\n- **Entrar já em movimento, sair acelerando.** Toda entrada anda de 12 a 19% da distância restante por quadro; toda saída acelera ou cresce em desfoque, e o corte acontece no pico.\n\n- **O desfoque segue a velocidade.** Ele é calculado pela derivada da tabela de posição e separado em x e y: vertical no chicote do prompt, horizontal no rastro do fecho.\n\n- **Match cut real.** O ícone para exatamente onde fica o ícone da barra de menus e os quadrados viram as três bolinhas antes do corte; no original, a barra aparecia em outro lugar.\n\n- **Cada quadrado com o seu tempo.** Os quatro quadrados da órbita travam 1,2 quadro um depois do outro, com microrrebote de 4 px e um pop subindo de tom para cada.\n\n- **Logo vivo no lugar do quadro congelado.** O visor \"foca\" (os cantos abrem 7 px e travam com overshoot), três ondas e um halo pulsam nas batidas, com aproximação de 3,5% e deriva.\n\n- **Vidro com acabamento.** A caixa do prompt e os títulos dos cartões são vidro de verdade: desfoque, aro claro em cima, borda interna e sombra larga; os títulos são uma cópia desfocada e clareada da arte, recortada pelas letras.\n\n- **Fecho com a marca.** Os colchetes do visor se desenham e fecham sobre a palavra (com som de obturador), com degradê branco → gelo e brilho passando; a música para seca no corte e solta uma cauda de reverb.\n\nDetalhes de cores, curvas e som: estilo.md. Planos por quadro: roteiro.md. Para fazer um vídeo no mesmo estilo: PROMPT.md."
    },
    {
      "titulo": "As versões até o final",
      "texto": "| \n\n | Versão\n | O que mudou\n\n | v1\n | os 8 planos nas posições do original, com ícone squircle de verdade, sombras coloridas e vidro\n\n | v2\n | logo vivo no plano 7 no lugar do quadro parado\n\n | v3 e **v4**\n | correções da revisão com o Gemini ouvindo o vídeo (teclas e cliques +4 dB e música 2,5 dB abaixo na cena do prompt, cursor da página que desce e some, fecho que deixou de ser estático); na v4, entregue, os 7 cortes foram conferidos quadro a quadro, sem quadro misturado e sem salto fora dos cortes"
    }
  ],
  "pacote": [
    {
      "pasta": "projeto/",
      "conteudo": "`hf/index.html` (a composição inteira, com o logo, o ícone, a barra de menus e as artes desenhados em SVG), `hf/gsap.min.js` local, a fonte Inter (400 a 800) em `hf/fonts/`, `hf/BRIEF.md`, os arquivos do projeto HyperFrames e os scripts `scripts/revisar.sh` e `scripts/pares.py`"
    },
    {
      "pasta": "audio/",
      "conteudo": "mix final, o `mix.py`, a lista dos 85 efeitos (`cues.json`), o trecho da música separado pelo Demucs (voz e instrumental) e os efeitos usados em `audio/sfx/`"
    },
    {
      "pasta": "referencias/",
      "conteudo": "o vídeo original (as duas telas lado a lado), o prompt original completo, as folhas de contato, a comparação lado a lado, o `APRENDIZADOS.md` (com o método de especificação quadro a quadro), os recortes do painel do remake e do lançamento real do Manus em 1080 e as folhas e quadros do estudo"
    },
    {
      "pasta": "render.mp4",
      "conteudo": "o vídeo final"
    },
    {
      "pasta": "hf/index.html",
      "conteudo": "a composição: uma função `render(f)` pura em função do quadro (na grade de 29,97), chamada por um único tween; cada plano é uma tabela de chaves por quadro interpolada por cúbica monotônica"
    },
    {
      "pasta": "audio/mix.py",
      "conteudo": "monta a trilha (intro só com a voz abafada, instrumental a partir do drop, música parando seca no corte do fecho com cauda de reverb), soma os efeitos em `evento − pico`, abaixa a música 2,5 dB na cena do prompt e faz o `loudnorm` em duas passagens (−14 LUFS)"
    },
    {
      "pasta": "scripts/revisar.sh",
      "conteudo": "junta o render de 120 qps em 60 qps com `tmix` de 2 quadros, monta as folhas de contato (a nossa e a do original) e mede os saltos entre quadros fora dos cortes"
    },
    {
      "pasta": "scripts/pares.py",
      "conteudo": "monta pares \"original | nossa\" nos mesmos quadros, para comparar posições"
    }
  ],
  "prompt": "Quero uma vinheta de lançamento no mesmo estilo do projeto \"Frame by Frame\", que está em 07-videos/projetos/frame/, para o meu produto.\n\nProduto: {{PRODUTO}}\nLogo: {{LOGO}} (arquivo, ou peça para desenhar uma marca simples)\nCores da marca: {{CORES}} (ou tire do logo)\nA frase que o usuário digita no produto: {{PROMPT_DO_USUARIO}}\nA página que responde (título + 2 ou 3 frases, com uma frase-chave): {{PAGINA}}\nDois nomes para os cartões: {{CARTOES}}\nFormato e duração: {{FORMATO}} (a referência é 1:1, 1080×1080, 12 s)\n(Se algum desses estiver vazio ou com as chaves, me pergunte antes de começar.)\n\n1. Estude o projeto antes de propor qualquer coisa. Leia, nesta ordem: LEIA-ME.md, estilo.md e roteiro.md da pasta frame, o prompt original em referencias/original/prompt-original.md (inteiro: ele é a aula) e o referencias/APRENDIZADOS.md. Abra o projeto/hf/index.html e me explique em poucas linhas como funcionam o render(f) por quadro, as tabelas de chaves com interpolação monotônica e o desfoque calculado pela velocidade, e o que você vai reaproveitar.\n\n2. Escreva a especificação antes do código, no formato de blocos do prompt original (<inputs> <direction> <structure> <build> <gotchas> <start>): qps de trabalho e do master, a batida como fórmula, os quadros de corte 2 quadros antes da batida, e para cada plano uma tabela de valores por quadro (posição, escala, opacidade, desfoque). Toda entrada já em movimento (12–19% da distância restante por quadro); toda saída acelerando ou em rampa de desfoque, com o corte no pico. No máximo um trecho calmo, declarado, e mesmo ele vivo. Liste os proibidos (crossfade, Math.random, timer, roxo ou outra cor fora da paleta) e as pegadinhas. Me mostre a especificação antes de construir.\n\n3. Trilha num subagente: música real que eu ainda não usei, com batida clara. Meça com o beat_this, ponha o drop no primeiro corte forte e, se a música tiver intro cantada, deixe só a voz abafada antes do drop (Demucs). No fecho, pare a música seca no corte e solte uma cauda de reverb.\n\n4. Reaproveite a engenharia, troque o conteúdo. Mantenha: o render(f) puro chamado por um único tween, as tabelas kf com cúbica monotônica, o desfoque separado em x e y pela derivada, o vidro com aro e backdrop, o título de vidro feito da arte desfocada e clareada recortada pelas letras, o cursor que gira para onde vai e afunda no clique, o match cut do ícone para o próximo plano, a deriva de câmera em todos os planos e o motion blur por subquadros (120 qps + tmix de 2), com todo evento discreto preso à grade de 60 qps. Troque: marca, cores, textos, páginas, cartões e trilha.\n\n5. Som: um efeito por ação, em evento − pico; um pop por elemento em sequência com o tom subindo; whoosh com pico no corte; música abaixando um pouco quando houver digitação e cliques. Final em −14 LUFS com loudnorm em duas passagens.\n\n6. Antes do render completo, me mostre 4 quadros que provem os planos principais (ex.: o cabeçalho na janela, o ícone travado, o prompt completo, os dois cartões). Depois do render, confira cada corte (quadro antes, do corte e depois, sem quadro misturado) e rode o detector de saltos fora dos cortes. Em cada movimento, pergunte: está humano ou robotizado? Entregue o vídeo, a ficha do projeto e uma anotação do que aprendeu.",
  "campos": [
    "CARTOES",
    "CORES",
    "FORMATO",
    "LOGO",
    "PAGINA",
    "PRODUTO",
    "PROMPT_DO_USUARIO"
  ],
  "fonte": {
    "nome": "Clube do Motion",
    "url": "https://clubedomotion.com/projeto/?id=frame",
    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
  }
}