{
  "id": "clube-viralgrow",
  "titulo": "Influencers de IA",
  "categoria": "saas",
  "resumo": "showreel de 15 s, horizontal e sem narração, de um SaaS fictício de influencers de IA, o ViralGrow. É uma recriação fiel, em português, de um vídeo da galeria do prompt-motion.com: mesmas cenas, cores, tipografia e tempos, com criadores, telas e trilha próprios. Feito em HyperFrames (HTML com uma timeline GSAP) a 60 qps, sem passar pelo After Effects. Versão final: v5.",
  "indicado": "startup ou SaaS que quer um vídeo curto de lançamento ou de apresentação do produto para site, anúncio ou redes.",
  "estilo": [
    "landing page em movimento",
    "fundo claro quente",
    "tipografia seminegrita",
    "desfoque nas entradas",
    "celulares com interface",
    "painel de métricas",
    "ritmo na batida."
  ],
  "ficha": {
    "formato": "1920×1080, 60 qps, 16:9",
    "duracao": "15,0 s",
    "motor": "ae",
    "voz": "sem narração: texto na tela, música e efeitos",
    "musica": "ver o guia de estilo",
    "fontes": "ver o guia de estilo"
  },
  "ferramentas": [
    "Claude Code",
    "After Effects",
    "ElevenLabs"
  ],
  "ficha_tecnica": {
    "Duração": "15,0 s",
    "Formato": "1920×1080, 60 qps, 16:9",
    "Voz": "sem narração: texto na tela, música e efeitos",
    "Ferramenta": "HyperFrames (HTML estático + uma timeline GSAP pausada), render a 60 qps",
    "Trilha": "\"Summer\" (Calvin Harris), 127,9 BPM, com o drop em 2,00 s",
    "Áudio final": "−14,7 LUFS",
    "Imagens geradas": "20 retratos de criadores (GPT Image 2.5) e 1 vídeo de reação (Grok Imagine 1.5 Lite), na Higgsfield",
    "Fecho": "ícone, \"ViralGrow\", \"Seu marketing no piloto automático.\" e o botão \"Começar agora →\", clicado pelo cursor"
  },
  "etapas": [
    {
      "titulo": "O roteiro",
      "texto": "**Resumo:** o showreel não tem narração; os títulos contam o produto em sete cenas, uma por compasso. Aqui estão os textos exatos em português, como eles foram adaptados do original em inglês e as cenas por tempo (de `main.js`).\n\n## Como o texto foi feito\n\n- O original em inglês veio de um prompt que pedia um showreel no estilo de uma landing page para um produto fictício.\n\n- A tradução seguiu a função de cada frase: as palavras que giram são todas masculinas, para o \"seu\" da frase não mudar; o \"slideshow\" do TikTok virou \"carrossel\"; os textos dos celulares ganharam R$, @suamarca e \"CRIADOR IA\".\n\n- A copy passou pela revisão de português do projeto.\n\n## Os textos da tela (verbatim)\n\n | \n\n | Cena\n | Texto\n\n | 1\n | \"Coloque [pílula com avatares] influencers de IA\" / \"para divulgar seu\" app → SaaS → negócio → produto\n\n | 2\n | \"Conheça seu\" / \"criador de IA.\"\n\n | 3\n | \"Carrosséis e vídeos de reação.\"\n\n | 4\n | \"Publica no\" / \"TikTok, Reels\" / \"e Shorts.\"\n\n | 5\n | \"Aprende o que\" / \"funciona.\" · painel \"Visualizações · últimos 30 dias\" · 48,2 mil · \"↑ 38%\" · \"Vencedor\"\n\n | 6\n | \"Você nunca grava\" / \"nem edita.\"\n\n | 7\n | \"ViralGrow\" · \"Seu marketing no piloto automático.\" · \"Começar agora →\" · viralgrow.ai\n\n## Cenas por tempo\n\n | \n\n | Tempo (s)\n | Cena\n | Tela\n\n | 0–0,5\n | ponto\n | um ponto laranja com anel pulsando abre numa pílula branca\n\n | 0,6–1,4\n | gancho\n | quatro avatares estalam na pílula; a linha 1 chega grande e desfocada, centrada na pílula, e assenta\n\n | 1,42–2,0\n | \n | entra \"para divulgar seu app\"\n\n | 2,00\n | **drop**\n | as palavras giram na batida: SaaS (2,0), negócio (2,235), produto (2,47); \"produto\" fica preto\n\n | 2,72–3,0\n | \n | os avatares trocam de rosto girando\n\n | 3,17–3,41\n | saída\n | a cena avança para a frente com desfoque\n\n | 3,41–5,75\n | conheça seu criador\n | o título entra pela esquerda; à direita, a coluna de retratos rola rápido com borrão e para no retrato da ruiva, que ganha borda laranja e selo (4,55–4,8)\n\n | 5,12–5,75\n | morph\n | o retrato vira o celular com o vídeo de reação e vai para o centro\n\n | 5,75–7,63\n | carrosséis e reação\n | o celular no centro e quatro cartões em leque 3D, com corações subindo\n\n | 7,63–9,51\n | publica nas redes\n | o celular vai para a direita, entram mais dois celulares e os ícones de TikTok, Instagram e YouTube Shorts, um por batida (8,0 · 8,235 · 8,47)\n\n | 9,51–11,38\n | aprende o que funciona\n | o painel entra pela direita; o número conta até 48,2 mil, a linha se desenha, \"↑ 38%\" estala; as duas primeiras miniaturas ganham X vermelho e a terceira cresce com \"Vencedor\" (10,8)\n\n | 11,38–13,26\n | nunca grava\n | a parede de cartões inclinada entra pela direita e rola na diagonal\n\n | 13,26–14,1\n | marca\n | o ícone estala e vai para a esquerda; \"ViralGrow\" sai de trás dele, letra por letra; entram o slogan e o botão\n\n | 14,06–15,0\n | clique\n | o cursor chega em curva, clica em \"Começar agora →\" (14,5) com ripple e escorrega um pouco; fade final"
    },
    {
      "titulo": "A identidade visual",
      "texto": "**Resumo:** \"landing page em movimento\": fundo creme quase branco com grade de pontos e manchas laranja desfocadas, Inter seminegrita preta com espaçamento apertado, laranja da marca só nos destaques, celulares pretos com a interface fiel das redes. Movimento em GSAP: tudo entra e sai com desfoque, pops com quique, câmera que deriva. Eletrônica a 127,9 BPM com drop em 2 s e cerca de 65 efeitos. Números tirados de `style.css`, `main.js` e `mixar.py`.\n\n## Fontes\n\n | \n\n | Uso\n | Fonte\n | Onde baixar\n\n | Títulos (600, espaçamento −0,045 em, entrelinha 1,0)\n | Inter\n | Google Fonts (pesos estáticos 400 a 700, no pacote)\n\n | Interface dos celulares, painel, rótulos\n | Inter 400 a 700\n | Google Fonts\n\n | Endereço do fecho\n | GeistMono 500\n | no pacote\n\n | Emojis das legendas\n | Segoe UI Emoji\n | fonte do Windows (veja a ficha)\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Uso\n\n | Fundo\n | `#FBF9F7`\n | fundo creme, com grade de pontos a 11% e grão a 5%\n\n | Texto\n | `#0F0F10`\n | títulos\n\n | Palavra que gira\n | `#A19D99`\n | as palavras cinza; a última fica preta\n\n | Laranja inicial\n | `#E8572A`\n | o ponto do primeiro quadro\n\n | **Laranja da marca**\n | **`#EC6A3C`**\n | borda do retrato escolhido, selo de check\n\n | Ícone do app\n | degradê `#F59569` → `#EC6A3C` → `#DD4A1B`\n | ícone com play\n\n | Botão\n | degradê `#E8683A` → `#D2461C`\n | \"Começar agora →\"\n\n | Manchas de luz\n | laranja a 50% e 30%, desfocadas\n | uma embaixo e uma em cima; no fim, um degradê quente no canto inferior direito\n\n | Verde\n | `#21B26B`, fundo `#E3F5EA`, texto `#157A45`\n | \"Vencedor\", \"↑ 38%\"\n\n | Vermelho\n | `#E5484D`\n | os X das miniaturas que não funcionaram\n\n | Celular\n | `#0D0D0F`\n | moldura e ilha\n\n | Cinzas de apoio\n | `#77716C`, `#8F8882`, `#6F6862`\n | rótulo do painel, segunda parte do slogan, endereço\n\n | Redes\n | TikTok `#25F4EE` e `#FE2C55`; Instagram `#FEDA75` → `#FA7E1E` → `#D62976` → `#4F5BD5`\n | ícones oficiais desenhados em SVG\n\n## Componentes\n\n- **Pílula com avatares:** começa como um ponto laranja com anel pulsando, abre numa pílula branca com sombra e recebe quatro avatares que estalam; depois os rostos trocam girando no eixo Y.\n\n- **Palavra que gira:** troca vertical com desfoque, e a largura do espaço acompanha a palavra.\n\n- **Coluna de retratos** (460×780, raio 34) que rola rápido com borrão vertical e para no retrato escolhido, que ganha borda laranja e selo de check.\n\n- **Celular** (370×790, raio 58) com ilha dinâmica e a interface do TikTok: status 9:41, abas \"Seguindo\" e \"Para você\", \"Compartilhar\", @suamarca e o selo \"CRIADOR IA\".\n\n- **Leque 3D** de quatro cartões inclinados em volta do celular, com corações subindo.\n\n- **Três celulares** com os ícones de TikTok, Instagram e YouTube Shorts entrando um por batida.\n\n- **Painel** \"Visualizações · últimos 30 dias\" com o número contando de 0 a 48,2 mil, \"↑ 38%\", a linha se desenhando, a área preenchida e três miniaturas: duas com X vermelho e a terceira com \"Vencedor\" em verde.\n\n- **Parede** de cartões inclinada em −12°, com quatro colunas rolando em velocidades diferentes.\n\n- **Fecho:** ícone laranja com play, o nome letra por letra, o slogan, o botão com ripple, o endereço e o cursor que clica.\n\n## Movimento\n\n | \n\n | Função\n | Como é\n\n | Entrada com desfoque\n | opacidade 0 → 1, desfoque 14 px → 0, sobe 24 px, 0,55 s, `power3.out`\n\n | Saída com desfoque\n | desfoque 0 → 14 px, 0,28 s, `power2.in`\n\n | Pop\n | escala 0,3 → 1, 0,42 s, `back.out(2.2)`\n\n | Celulares e painel entrando\n | `expo.out`, 0,5 a 0,6 s, vindo de lado com desfoque\n\n | Morph do retrato no celular\n | `power3.inOut`, 0,55 s\n\n | Flutuação\n | `sine.inOut`, ida e volta, 7 a 10 px\n\n | Câmera\n | deriva de 6 × 4 px em ciclos de 3,75 s; manchas de luz andando em ciclos de 3,75 e 5 s\n\n | Zoom lento\n | cenas crescem 2 a 3,5% enquanto ficam na tela\n\nA cascata entre irmãos fica entre 0,035 e 0,08 s.\n\n## Tempo\n\nCompasso de 1,877 s a 127,9 BPM; drop em 2,00 s. Trocas de cena nos tempos fortes: 3,41 · 5,75 · 7,63 · 9,51 · 11,38 · 13,26 s. As palavras que giram trocam em 2,0 · 2,235 · 2,47 s e os ícones das redes entram em 8,0 · 8,235 · 8,47 s, na batida.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Summer\" (Calvin Harris), trecho a partir de 121,86 s da faixa\n\n | Tempo\n | 127,9 BPM; drop da faixa em 123,86 s, medido no beat_this, que cai em 2,00 s do vídeo\n\n | Abertura\n | passa-baixas de 950 Hz com o volume subindo até o drop\n\n | Emenda\n | crossfade de 30 ms centrado em 2,00 s\n\n | Fim\n | fade da música e do master nos últimos 0,6 s\n\n## Sound design e mix\n\n | \n\n | Item\n | Valor\n\n | Efeitos\n | cerca de 65, da biblioteca nivelada, cada um posicionado em evento − pico do arquivo\n\n | Música\n | volume 0,34, com sidechain leve pelos efeitos (limiar 0,03, razão 4)\n\n | Final\n | loudnorm em duas passagens a −14 LUFS e pico de −1,5 dBTP; medido −14,7 LUFS\n\nO que soa: pops nos avatares e na troca de rostos, riser até o drop e até o fecho, impacto no drop, cliques nas palavras que giram e na coluna desacelerando, sucesso no selo, whooshes nas trocas, contador rolando no painel, cliques nos X e sucesso no \"Vencedor\", whoosh grave e impacto no ícone, clique de mouse, notificação e cauda de sino no botão.\n\n## O que é \"humano\" neste vídeo\n\n- A câmera e as manchas de luz nunca param.\n\n- A coluna de retratos desacelera até parar no escolhido, como um dedo soltando a rolagem.\n\n- O cursor chega em curva, aperta, o botão afunda e o cursor ainda escorrega um pouco depois do clique.\n\n- O número do painel conta com freio no fim.\n\n- O vídeo de reação é uma pessoa reagindo, e não uma tela parada."
    },
    {
      "titulo": "A montagem no HyperFrames",
      "texto": "- **Instale o Node.js** (versão atual). O HyperFrames roda por `npx` e baixa sozinho na primeira vez (`hyperframes@0.8.144`, como no `package.json`).\n\n- **Fonte de emoji:** o vídeo usa a fonte de emoji do Windows (Segoe UI Emoji, `seguiemj.ttf`), que não vem no pacote. No Windows, copie de `C:\\Windows\\Fonts` para `hf/assets/fonts/`. Em outro sistema, troque o `@font-face` \"EmojiV\" do `style.css` por uma fonte de emoji instalada.\n\n- **Prévia:** dentro de `hf/`, `npm run dev` abre o estúdio do HyperFrames com a timeline.\n\n- **Conferir:** `npm run check` valida a composição.\n\n- **Render:** `npx hyperframes render -f 60 -q delivery -w 3 -o saida.mp4` (cerca de 1 minuto)."
    },
    {
      "titulo": "As decisões de direção",
      "texto": "- **Recriar antes de inventar.** A referência foi assistida quadro a quadro (folhas a 4 qps, quadros em resolução cheia, BPM e energia do áudio) e comparada lado a lado com cada versão.\n\n- **HTML no lugar do After Effects.** A referência é um filme feito em HTML; a timeline determinística a 60 qps dá o mesmo desfoque por elemento e a interface nítida.\n\n- **Uma ideia por cena, trocando no tempo forte**, a cada compasso de 1,877 s: 3,41 · 5,75 · 7,63 · 9,51 · 11,38 · 13,26 s.\n\n- **Todo texto entra e sai por desfoque e opacidade**, nunca deslizando seco.\n\n- **Nada fica parado:** a câmera deriva, as manchas de luz andam, o leque flutua, o painel cresce devagar.\n\n- **Copy adaptada, não traduzida.** As palavras que giram são todas masculinas (app, SaaS, negócio, produto), para o \"seu\" não mudar; o \"slideshow\" do TikTok virou carrossel; as legendas dos reels ganharam R$, @suamarca e \"CRIADOR IA\".\n\n- **Pesos estáticos da Inter.** A Inter do sistema tinha só o peso 400 e o título saía fino; o pacote traz 400, 500, 600 e 700.\n\n- **O nome sai de trás do ícone**, letra por letra, de trás para a frente, como no original (correção da v5).\n\n- **Som com fim e começo:** passa-baixas abrindo até o drop, crossfade de 30 ms na emenda, efeitos com o pico no quadro do evento, a música cedendo um pouco a cada efeito e uma cauda de sino no clique final.\n\nDetalhes de cores, curvas e som: estilo.md. Textos e cenas por tempo: 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 | estrutura e tempos fiéis; a fonte saiu fina e os textos encostavam\n\n | v2\n | pesos da Inter, tamanhos, zoom inicial segurado, coluna desacelerando até 4,3 s e a transição de 9,4 s sem clarão\n\n | v3 e v4\n | mix corrigido depois da escuta de uma IA (emenda, efeitos encobertos, final); nota 9,5 para o movimento e 9,5 para o som\n\n | **v5**\n | o nome \"ViralGrow\" sai de trás do ícone, de trás para a frente, como no original"
    }
  ],
  "pacote": [
    {
      "pasta": "projeto/",
      "conteudo": "a pasta `hf/`: `build.py`, `main.js`, `style.css`, o `index.html` gerado, as configurações do HyperFrames (`hyperframes.json`, `meta.json`, `package.json`) e `assets/` (os 20 retratos, o vídeo de reação, o mix e as fontes Inter 400 a 700 e GeistMono)"
    },
    {
      "pasta": "audio/",
      "conteudo": "`mixar.py`, o mix final (`mix.wav`) e os efeitos usados (`sfx/`)"
    },
    {
      "pasta": "referencias/",
      "conteudo": "o vídeo de referência e o áudio dele, as folhas de contato a 4 qps, os quadros em resolução cheia, a forma de onda e os links"
    },
    {
      "pasta": "render/",
      "conteudo": "`final.mp4`"
    },
    {
      "pasta": "build.py",
      "conteudo": "gera o `index.html`: a marcação estática das 7 cenas, os celulares com a interface das redes, o painel, a parede de cartões e os ícones em SVG"
    },
    {
      "pasta": "main.js",
      "conteudo": "uma timeline GSAP pausada com todo o movimento, em segundos do vídeo, com funções de entrada e saída com desfoque e de pop"
    },
    {
      "pasta": "style.css",
      "conteudo": "fontes, fundo, tipografia, celulares e componentes"
    },
    {
      "pasta": "audio/mixar.py",
      "conteudo": "música com subida até o drop, cerca de 65 efeitos posicionados por evento menos o pico, sidechain leve e loudnorm a −14 LUFS"
    }
  ],
  "prompt": "Quero fazer um showreel curto no mesmo estilo do projeto \"Influencers de IA (ViralGrow)\", que está em 07-videos/projetos/viralgrow/, com o meu produto.\n\nProduto: {{PRODUTO}} (nome, o que faz e para quem)\nSite ou landing page: {{SITE}} (cores, fonte, logo e prints das telas)\nAs 5 ideias que o vídeo precisa mostrar: {{IDEIAS}} (uma por cena)\nChamada final: {{CHAMADA}} (texto do botão e endereço)\nFormato: {{FORMATO}} (a referência é 1920×1080, 15 s, 60 qps)\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: 07-videos/projetos/viralgrow/LEIA-ME.md, estilo.md e roteiro.md. Depois abra projeto/hf/build.py, main.js e style.css e o audio/mixar.py, e me explique em poucas linhas como a marcação estática, a timeline GSAP e as funções de entrada e saída com desfoque se encaixam. Diga o que vai reaproveitar.\n\n2. Siga o passo a passo de 07-videos/_LEIA.md e os números de 07-videos/regras-vigentes.md. Crie o meu projeto em 07-videos/projetos/AAAA-MM-DD-tema/ a partir de 07-videos/projetos/_modelo/README.md e marque cada etapa no checklist. Não edite os arquivos do projeto viralgrow: copie a pasta hf/ e o mixar.py.\n\n3. Use as skills instaladas: hyperframes (composição, check e render), video-referencias (assets reais e referências) e better-portuguese (todo texto da tela).\n\n4. A copy: uma frase curta por cena, no máximo duas linhas, no tom da minha landing page. Monte a tabela das 7 cenas como no roteiro.md da referência (abertura com palavra que gira, apresentação, três provas do produto, uma promessa e o fecho com o botão) e diga, para cada uma, o elemento visual que prova a frase (celular com a interface, painel com número, parede de cartões). Adapte a copy sem traduzir ao pé da letra: confira gênero e concordância das palavras que giram. Espere o meu ok.\n\n5. Identidade: use o fundo, a fonte e a cor de destaque da minha marca. Se eu não tiver, mantenha o fundo creme, a Inter seminegrita com espaçamento apertado e um único laranja de destaque, como na referência. As telas e os ícones são os reais do meu produto e das redes citadas; imagens de pessoas, se precisar, me pergunte antes de gerar.\n\n6. Música primeiro: escolha uma faixa real com o drop perto dos 2 s do trecho, meça o BPM com o beat_this e me mostre a grade de compassos. As cenas trocam nos tempos fortes, como na referência (uma a cada compasso).\n\n7. Reaproveite o motor, troque o conteúdo. Mantenha deste projeto: a timeline GSAP única e pausada, toda entrada e saída por desfoque e opacidade, os pops com quique nos elementos pequenos, a câmera e as manchas de luz que nunca param, o retrato ou card que vira o próximo elemento (morph), o número que conta com freio, o fecho com o ícone, o nome letra por letra, o botão e o cursor que clica, cerca de um efeito por ação em evento − pico e o mix a −14 LUFS. Troque: textos, cores, imagens, telas, a música e o nome.\n\n8. Rode `npm run check`, renderize a 60 qps e compare em folhas de contato. Em cada movimento, pergunte: está humano ou robotizado? Peça a uma IA que ouça o mix, corrija e me entregue o vídeo, a ficha atualizada e uma anotação em anotacoes/.",
  "campos": [
    "CHAMADA",
    "FORMATO",
    "IDEIAS",
    "PRODUTO",
    "SITE"
  ],
  "fonte": {
    "nome": "Clube do Motion",
    "url": "https://clubedomotion.com/projeto/?id=viralgrow",
    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
  }
}