{
  "id": "clube-antes-e-agora",
  "titulo": "Como começou, como está indo",
  "categoria": "elementos",
  "resumo": "edit quadrado de 28 s, sem narração, no formato \"antes e agora\": cinco segundos de motion simples de propósito, linear, de canto reto e quase sem desfoque, meio segundo de tela vazia e, no drop da música, um corte seco para o trabalho atual. Daí em diante as cenas emendam por objetos: ícone do After Effects que pousa, painel de arquivos, aviso de memória, trecho de música, cartão que gira e cresce até a cena seguinte, iPhone e MacBook em 3D, uma fita azul com texto que vira check e uma íris que abre o navegador. A comp inteira sai de um script do After Effects (`cenas.jsx`) e o som, de um script Python na Mesa. Recriação do estilo de @illdari, feita pelo Clube do Motion.",
  "indicado": "post de evolução de criador ou estúdio, portfólio de motion e UI, \"antes e depois\" de marca, abertura de apresentação de trabalho.",
  "estilo": [
    "antes e agora",
    "respiro antes do drop",
    "zoom através de objeto",
    "mockups 3D de iPhone e MacBook",
    "fita 3D com texto",
    "íris de três quadros",
    "câmera que nunca para"
  ],
  "ficha": {
    "formato": "1080×1080, 30 qps, desfoque de movimento com obturador de 270° e 16 amostras",
    "duracao": "28,17 s (845 quadros), sem narração",
    "motor": "ae",
    "voz": "sem narração",
    "musica": "ver o guia de estilo",
    "fontes": "SF Pro Display, SF Pro Text, SF Pro Rounded e Roboto Condensed Italic (nas frases do \"antes\")"
  },
  "etapas": [
    {
      "titulo": "Leia-me",
      "texto": "# Como começou e como está indo\n\n> Data: 2026-10-17 · Tipo: projeto · Status: aprovado · Id: antes-e-agora\n\n**Resumo:** edit quadrado de 28 s, sem narração, no formato \"antes e agora\": cinco segundos de motion simples de propósito, linear, de canto reto e quase sem desfoque, meio segundo de tela vazia e, no drop da música, um corte seco para o trabalho atual. Daí em diante as cenas emendam por objetos: ícone do After Effects que pousa, painel de arquivos, aviso de memória, trecho de música, cartão que gira e cresce até a cena seguinte, iPhone e MacBook em 3D, uma fita azul com texto que vira check e uma íris que abre o navegador. A comp inteira sai de um script do After Effects (`cenas.jsx`) e o som, de um script Python na Mesa. Recriação do estilo de @illdari, feita pelo Clube do Motion.\n\n## Descrição\n\nUm vídeo de evolução em que o contraste faz o trabalho. Sob o título \"como começou vs :\", um ícone de mensagem antigo solta o avião numa volta em velocidade constante, ganha um selo vermelho e estica uma barra branca com frases em itálico, tudo no tempo errado de propósito. A barra achata, sobra meio segundo de preto e, no tempo forte que abre o refrão, entra \"como está indo\": o ícone do After Effects pousa gigante e desfocado no meio da grade de apps da Adobe. As cenas seguintes nunca cortam no seco; cada uma nasce de uma peça da anterior, com desfoque de movimento, câmera viva e um efeito sonoro por ação. O fecho é um navegador de barra lateral rosa, onde o cursor abre pastas e arrasta uma aba até o lugar dela.\n\n- **Indicado para:** post de evolução de criador ou estúdio, portfólio de motion e UI, \"antes e depois\" de marca, abertura de apresentação de trabalho.\n- **Estilo:** antes e agora, respiro antes do drop, zoom através de objeto, mockups 3D de iPhone e MacBook, fita 3D com texto, íris de três quadros, câmera que nunca para\n- **Formato:** 1:1 · 28 s · sem narração\n\n**Tutorial em vídeo:** em breve.\n\n## O vídeo\n\n| Item | Valor |\n|---|---|\n| Duração | 28,17 s (845 quadros), sem narração |\n| Formato | 1080×1080, 30 qps, desfoque de movimento com obturador de 270° e 16 amostras |\n| Ferramenta | After Effects: um script ExtendScript (`cenas.jsx`) cria o projeto, monta a comp `RECRIACAO` com dez precomps em fila (`ANTES`, `ADOBE`, `PAINEL`, `OBTER INFO`, `MUSICA`, `CARTAO`, `TRES D`, `FITA`, `DESKTOP` com a `JANELA`) e salva o `.aep` |\n| Mockups 3D | iPhone e MacBook montados com camadas 3D do próprio AE: tela em precomp, moldura e oito cópias para a espessura; sem plugin |\n| Assets | ícones de app com os glifos oficiais do Simple Icons (CC0), logo do Spotify, fotos geradas para a galeria e a capa, papel de parede em flor azul desenhado por código, avatar gerado e as mãos de luva; `fazer_assets.py` refaz o que é gerado |\n| Fontes | SF Pro Display, SF Pro Text, SF Pro Rounded e Roboto Condensed Italic (nas frases do \"antes\") |\n| Trilha | \"Look At Me Now\", de Chris Brown com Lil Wayne e Busta Rhymes, desacelerada 1,5% sem mudar o tom para os 143,6 BPM da referência |\n| Som | 59 eventos tirados da comp; no \"antes\", efeitos a 60% do volume; do drop em diante, um efeito por ação e um golpe no corte; −14,0 LUFS e pico verdadeiro de −1,7 dBFS |\n| Referência | edit \"how it started vs how its going\", de @illdari (26/08/2026), estudado quadro a quadro |\n| Arquivo final | MP4 H.264 com áudio AAC, 29 MB |\n\n## O que tem no pacote\n\n| Pasta | Conteúdo |\n|---|---|\n| `projeto/` | `ae/cenas.jsx` (o gerador comentado), `ae/trust-process.aep` (o projeto montado), `assets/` (galeria, capa, papel de parede, avatar, mãos, logo do Spotify), `assets/icones/` e `assets/fazer_assets.py` |\n| `audio/` | `trilha.py` (o som inteiro), `eventos.json` (os 59 eventos da comp), `mix.wav`, `relatorio-som.json` e `mesa/`, com o motor de mix `mesa.py` e o `mapa_padrao.py` |\n| `referencias/` | `links.md` e `fora-do-pacote.md` |\n| `render.mp4` | o vídeo final |\n\nFica fora do pacote o trecho da música (`audio/musica.wav`). O `trilha.py` traz o comando do ffmpeg que corta e desacelera a faixa a partir de 7,563 s; com outra música, faça o tempo forte que abre o refrão cair em 5,48 s, no corte \"como está indo\".\n\n### Como os scripts funcionam\n\n| Arquivo | O que faz |\n|---|---|\n| `ae/cenas.jsx` | cria um projeto novo e monta tudo. No topo fica o bloco `TEXTOS`, com todos os textos da tela (títulos, frases, arquivos, avisos, a página de música, as telas dos mockups, a fita e as pastas do navegador). Cada cena é uma precomp numerada de 1 a 10, com os tempos dela no comentário; a função `poe` coloca cada uma na comp final. A ajudante `K` grava chaves com influência (−1 = linear, `'a'` = curva contínua) e `digita` escreve letra a letra. No fim, grava `audio/eventos.json` e salva `ae/trust-process.aep` |\n| `ae/trust-process.aep` | o resultado do script, pronto para abrir e renderizar |\n| `assets/fazer_assets.py` | desenha o papel de parede em flor, recorta as fotos da galeria e da capa e copia ícones e mãos |\n| `audio/trilha.py` | põe a música 11 dB abaixo, baixa para 60% os efeitos antes de 5,45 s, troca o impacto do drop por um golpe tonal, marca o drop em 5,48 s e mixa para −14 LUFS |\n| `audio/mesa/` | o motor de mix e o mapa de sons por tipo de evento |\n\n## Como abrir e renderizar\n\n1. **Fontes:** instale SF Pro Display, SF Pro Text, SF Pro Rounded e Roboto Condensed (Google Fonts) em `C:\\Program Files\\Common Files\\Adobe\\Fonts` e reinicie o After Effects.\n2. **Juntar as pastas:** copie `audio/` para dentro de `projeto/`. O script grava os eventos em `projeto/audio/eventos.json`.\n3. **Abrir:** `projeto/ae/trust-process.aep`. Se o AE pedir arquivos, aponte para `projeto/assets/`.\n4. **Adaptar:** troque o `TEXTOS` e as imagens e rode File › Scripts › Run Script File › `cenas.jsx`. Ele cria um projeto novo e sobrescreve o `.aep` em cerca de 6 s.\n5. **Som:** no topo do `trilha.py`, aponte o `sys.path.insert` para a pasta `audio/mesa`, gere o `musica.wav` com o comando do ffmpeg do próprio arquivo e rode `python audio/trilha.py`. Precisa de numpy, scipy, soundfile, librosa e pyloudnorm; no topo do `mesa.py`, aponte as pastas de efeitos para a sua biblioteca.\n6. **Render:** fila do AE em H.264 e o `mix.wav` colado com o ffmpeg: `ffmpeg -i video.mp4 -i audio/mix.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 320k -shortest final.mp4`.\n\n**Pegadinhas:** os mockups são camadas 3D filhas de um null 3D; um filho 2D ignora as rotações X e Y do pai, então tela, moldura e espessura também precisam ser 3D. O avião do \"antes\" orbita por expressão e se orienta pela própria velocidade. Para trocar os mockups por um modelo mais fiel, renderize um `.glb` e substitua a precomp `TRES D`. O `aerender` não aceita caminho com acento.\n\n## Decisões de direção que fizeram o vídeo funcionar\n\n1. **Feio de propósito no começo.** Movimento linear, canto reto, itálico genérico e nada na batida: o contraste vende o acabamento do resto.\n2. **Meio segundo de vazio antes do drop.** O preto entre 5,0 e 5,47 s prepara o corte, e a imagem nova entra já gigante e desfocada, pousando em 15 quadros.\n3. **Zoom através de um objeto.** As barras azuis viram um cartão que gira 34° e cresce de 100 para 640% em 0,44 s, até o miolo virar a galeria escura.\n4. **Mockups vivos.** O iPhone sobe de perfil e gira até ficar quase de frente, a câmera corre para o MacBook, e as telas se escrevem enquanto eles flutuam.\n5. **A fita fecha uma ação.** A onda azul vira faixa com o texto correndo, a faixa vira pílula, a pílula vira círculo, e spinner, seta e check aparecem em sequência; a íris de três quadros sai do check e abre o navegador.\n6. **Câmera que nunca para.** No navegador ela sobe 900 px em 8,8 s com tremida leve; o cursor clica, abre a pasta e arrasta a aba com a mão de luva.\n7. **O som respeita o contraste.** Efeitos discretos no \"antes\", golpe no drop e um efeito para cada ação do \"agora\".\n\nDetalhes de cores, tempos e números: [estilo.md](estilo.md). Cenas por tempo e texto na tela: [roteiro.md](roteiro.md). Para fazer o seu com o seu trabalho: [PROMPT.md](PROMPT.md).\n\n## Versões\n\n| Versão | O que mudou |\n|---|---|\n| **v1** | recriação cena a cena, ajustada lado a lado com o original, com textos em português e a página de música com conteúdo nosso |\n"
    },
    {
      "titulo": "Roteiro",
      "texto": "# Roteiro: como começou e como está indo\n\n> Data: 2026-10-17 · Tipo: roteiro · Status: aprovado · Projeto: antes-e-agora\n\n**Resumo:** o vídeo não tem narração; o roteiro é a sequência de cenas do \"antes\" e do \"agora\", com o texto da tela e os tempos do `cenas.jsx`. Todo o texto fica no bloco `TEXTOS`. Com o seu trabalho, mantenha a regra: cinco segundos simples, meio segundo de vazio e o drop abrindo a parte boa.\n\n## De onde veio a estrutura\n\nO edit estudado mostra 5,5 s de um motion antigo, linear e sem desfoque, e corta no drop da música para uma sequência do trabalho atual. Este projeto mantém as cenas, os tempos e as emendas, com textos em português e a página de música preenchida com conteúdo nosso.\n\n## Cenas e texto na tela\n\n| Tempo (s) | Tela | Texto na tela |\n|---|---|---|\n| 0,00–2,10 | fundo escuro; o avião sai do ícone, dá a volta e volta; selo vermelho | \"como começou vs :\" |\n| 2,10–4,80 | o ícone balança, vai para a esquerda e estica a barra branca; atravessa e troca a frase | \"Me chama quando quiser\", \"Pode deixar :)\" |\n| 4,80–5,50 | a barra achata; meio segundo de preto | — |\n| 5,50–6,25 | drop: o ícone do After Effects pousa gigante no meio da grade Adobe | \"como está indo\", \"After Effects\" |\n| 6,25–7,85 | painel de arquivos; aviso de travamento empurra a lista | \"Arquivos do projeto\", \"projeto-final\", \"abertura\", \"marca\", \"saas\", \"After Effects travou\", \"Precisa de mais memória.\" |\n| 7,85–9,67 | botão, clique com ripple, notificação | \"Obter info\", \"Mais memória\", \"16 GB\", \"agora o After Effects respira\" |\n| 9,67–13,55 | página de música em verde e preto: logo, título, artistas, texto, botão, faixa | \"Puro Movimento\", \"Som Global\", \"Você\", \"Marina\", \"Léo\", \"Imersão Global\", \"Ir além\", \"Luzes Piscando\" |\n| 13,55–14,30 | barras azuis viram um cartão que gira e cresce até virar a cena seguinte | — |\n| 14,30–15,80 | galeria escura; o iPhone sobe girando e a tela se escreve | \"Clube\", \"Puxe sua inspiração\", \"Abrir o Clube\", \"Fechar\" |\n| 15,80–17,30 | a câmera corre; o MacBook entra em perspectiva | \"Dentro do seu fluxo\" |\n| 16,80–19,30 | a fita azul atravessa, vira faixa com o texto, pílula, círculo e check | \"Salvando sua ideia\", \"Feito\" |\n| 19,33–21,30 | íris sai do check e abre o desktop com o navegador rosa; favoritos entram | \"Favoritos\", \"Clube\" |\n| 21,30–24,90 | o cursor abre a pasta \"Trabalho\" e passa pelos itens; a prévia abre à direita | \"Trabalho\", \"Pinterest\", \"Figma\", \"Gmail\", \"Entretenimento\", \"Redes sociais\", \"Nova aba\", \"Instagram\" |\n| 24,90–27,50 | o cursor arrasta a aba do Instagram até \"Redes sociais\" | — |\n| 27,50–28,17 | escurece até o preto | — |\n\n## Momentos para o som\n\n- O trecho mais vazio da introdução da música fica no \"antes\"; o tempo forte que abre o refrão cai em 5,48 s, no corte \"como está indo\".\n- No \"antes\", os efeitos ficam a 60% do volume: avião, pouso, notificação, barra, texto e achatamento.\n- No drop entra um golpe; daí em diante, um efeito por ação: pouso, letras, painel, alerta, clique, notificação, logo, pops dos artistas, viagem do cartão, subida e pouso dos mockups, digitação, chicote, fita, check, íris, pops dos favoritos, cliques, arraste e pouso da aba.\n- A música fica 11 dB abaixo do nível do arquivo, com fade de 0,8 s no fim.\n"
    },
    {
      "titulo": "Estilo",
      "texto": "# Estilo do vídeo: como começou e como está indo\n\n> Data: 2026-10-17 · Tipo: guia · Status: vigente · Projeto: antes-e-agora\n\n**Resumo:** o \"antes\" em `#161616` com um ícone azul-claro, barra branca de canto reto e itálico genérico; o \"agora\" em lilás `#D4D4E0`, cinza `#EDEDED`, preto com verde de música, azul-noite nos mockups 3D, fita em degradê azul e uma barra lateral rosa no navegador. SF Pro em quase tudo. Números tirados do `cenas.jsx` (q = quadro a 30 qps).\n\n## Palco\n\n| Peça | Como é |\n|---|---|\n| Tela | 1080×1080, 30 qps |\n| Desfoque de movimento | obturador de 270°, fase −135°, 16 amostras |\n| Montagem | comp `RECRIACAO` com dez precomps em fila, títulos fixos no topo e um preto final de 27,50 a 28,15 s |\n| Títulos | \"como começou vs :\" em branco até 5,5 s; \"como está indo\" em `#3A3A3C` de 5,5 a 9,0 s, apagando de 8,30 a 8,90 s; SF Pro Display Medium, 84 px |\n\n## Cores\n\n| Peça | Valor |\n|---|---|\n| Antes | fundo `#161616`; ícone com quadrado branco, círculo `#A3CDE1` e avião branco; selo `#E0303E`; barra `#FFFFFF`; frases `#111111` |\n| Adobe | fundo `#D4D4E0`; ícones cinza `#8E8E93` com letras `#B9B9BE`; Ae `#00005B` com letras `#9999FF` |\n| Painel e aviso | painel branco que esfria para `#EDEDED`; faixas `#F4F4F6`; aviso com ícone `#D01D2D` e texto `#E0505E` |\n| Obter info | fundo `#EDEDED`; pílula `#E3E3E8` que acende `#A7E6EE` no clique; ripple `#B9B9C6` |\n| Música | preto com brilho `#0B2E15`; verde `#1ED760` nos anéis e no botão |\n| Cartão | barras `#2C40D0` sobre um fundo que vai de `#0A0A0A` a branco em 0,31 s |\n| 3D | fundo `#050614`; galeria a 38% com desfoque 20; iPhone com moldura `#C9A46A` e espessura `#8C6A3A`; MacBook com tampa `#1C1C1E`, base `#AEB1B7` e teclado `#2A2A2E`; telas `#0B0B10` com destaque `#4F8DFF` |\n| Fita | fundo `#00010F`; traço `#1E9BDB`; faixa em degradê `#1784CC` → `#26BAE1` |\n| Navegador | janela `#D46F8E`, área `#DB7F9A`, favoritos `#EE6F86` com borda `#E8364E`; papel de parede tingido entre `#06207A` e `#A9D2FF` |\n\n## Fontes\n\n| Fonte | Onde |\n|---|---|\n| SF Pro Display Medium | títulos do topo |\n| SF Pro Display Semibold e Bold | letras dos ícones Adobe, rótulo \"After Effects\", página de música, telas dos mockups, fita (118 px) |\n| SF Pro Text | listas, avisos, botões, pastas do navegador |\n| SF Pro Rounded Semibold | letras dos avatares |\n| Roboto Condensed Italic | as duas frases do \"antes\" (60 px, tracking 60) |\n\n## Cena a cena\n\n| Cena | Números |\n|---|---|\n| Antes (0–5,5 s) | avião em órbita elíptica de 250×230 px, velocidade constante, de 0,20 a 1,92 s; selo de 0 a 100% em 0,1 s sem easing; balanço de 6°, −5° e 3° até 3,20 s; o ícone vai 419 px para a esquerda e a barra estica de 230 a 1.026 px entre 3,35 e 4,00 s, tudo linear; o ícone atravessa até x 391 e troca a frase; tudo achata em Y em 0,15 s a partir de 4,80 s |\n| Respiro (4,95–5,5 s) | só o título sobre o preto |\n| Adobe (5,5–7,2 s) | o Ae entra a 200%, a 30% de opacidade e com desfoque 30, e pousa em 100% (360 px) até 6,00 s; a grade cinza aparece de 80 a 100% em 8 q; \"After Effects\" sobe em onda; a grade anda para a esquerda a partir de 6,25 s |\n| Painel e aviso (6,25–8,0 s) | painel de 472×520 com raio 28; lista de quatro arquivos; o aviso de travamento entra e empurra a lista |\n| Obter info (7,85–9,67 s) | pílula de 270×68; clique com ripple de 1.200 px; a notificação de memória nasce do botão |\n| Música (9,67–13,6 s) | logo, título, três artistas com anéis verdes entrando a 10,98, 11,08 e 11,40 s, texto e botão a partir de 11,92 s, item da faixa em 12,92 s |\n| Cartão (13,55–14,32 s) | as barras se aproximam e afinam de 112 para 90 px até 13,85 s; o cartão cresce de 100 para 165, 290 e 640% e gira de 0 a 34° entre 13,86 e 14,30 s |\n| 3D (14,28–17,45 s) | a cena entra com desfoque 18 em 0,17 s; o iPhone a 82% sobe de y 1.500 a 560 entre 14,40 e 14,95 s, gira em Y de 85° a −16° e sai para a direita em 15,80 s; o MacBook a 62%, inclinado 26° em Y e 22° em X, entra em 15,95 s e sai em 17,30 s; as telas se digitam em 14,95–15,55 s e 16,00–16,45 s |\n| Fita (16,78–19,45 s) | onda de 120 a 270 px de espessura desenhada entre 16,80 e 17,20 s; a faixa reta gira de −3,5° a −16° com o texto correndo 260 px; vira pílula entre 18,55 e 19,08 s (2.400 para 250 px, raio 125); spinner, seta e check em 0,07, 0,06 e 0,08 s; \"Feito\" em 19,22 s |\n| Íris (19,33–19,43 s) | máscara circular com suavidade de 120 px, centrada no check, expandindo de −60 a 900 px em 3 q |\n| Navegador (19,33–28,17 s) | favoritos crescem de 0 a 100% em 6 q, 5 q entre eles, e recebem os ícones a partir de 19,95 s; pastas a 75 px de distância; clique em 21,65 s abre os filhos e empurra as pastas de baixo 225 px; prévia entra da direita em 22,93 s; arraste do Instagram de 25,00 a 26,60 s; a janela sobe 900 px com curva contínua e `wiggle(4, 2)`, e a escala vai de 100 a 102% |\n\n## O que é \"humano\" neste vídeo\n\n- No \"agora\", nenhuma cena entra parada: o Ae chega em curva contínua, a galeria deriva, os mockups flutuam e a janela do navegador sobe o tempo todo.\n- O cursor clica com um aperto de 130 para 105% e de volta, e a aba arrastada vai atrás dele com a mão de luva.\n- O \"antes\" é mecânico de propósito, e é por isso que o resto parece vivo.\n"
    },
    {
      "titulo": "O roteiro",
      "texto": "**Resumo:** o vídeo não tem narração; o roteiro é a sequência de cenas do \"antes\" e do \"agora\", com o texto da tela e os tempos do `cenas.jsx`. Todo o texto fica no bloco `TEXTOS`. Com o seu trabalho, mantenha a regra: cinco segundos simples, meio segundo de vazio e o drop abrindo a parte boa.\n\n## De onde veio a estrutura\n\nO edit estudado mostra 5,5 s de um motion antigo, linear e sem desfoque, e corta no drop da música para uma sequência do trabalho atual. Este projeto mantém as cenas, os tempos e as emendas, com textos em português e a página de música preenchida com conteúdo nosso.\n\n## Cenas e texto na tela\n\n | \n\n | Tempo (s)\n | Tela\n | Texto na tela\n\n | 0,00–2,10\n | fundo escuro; o avião sai do ícone, dá a volta e volta; selo vermelho\n | \"como começou vs :\"\n\n | 2,10–4,80\n | o ícone balança, vai para a esquerda e estica a barra branca; atravessa e troca a frase\n | \"Me chama quando quiser\", \"Pode deixar :)\"\n\n | 4,80–5,50\n | a barra achata; meio segundo de preto\n | —\n\n | 5,50–6,25\n | drop: o ícone do After Effects pousa gigante no meio da grade Adobe\n | \"como está indo\", \"After Effects\"\n\n | 6,25–7,85\n | painel de arquivos; aviso de travamento empurra a lista\n | \"Arquivos do projeto\", \"projeto-final\", \"abertura\", \"marca\", \"saas\", \"After Effects travou\", \"Precisa de mais memória.\"\n\n | 7,85–9,67\n | botão, clique com ripple, notificação\n | \"Obter info\", \"Mais memória\", \"16 GB\", \"agora o After Effects respira\"\n\n | 9,67–13,55\n | página de música em verde e preto: logo, título, artistas, texto, botão, faixa\n | \"Puro Movimento\", \"Som Global\", \"Você\", \"Marina\", \"Léo\", \"Imersão Global\", \"Ir além\", \"Luzes Piscando\"\n\n | 13,55–14,30\n | barras azuis viram um cartão que gira e cresce até virar a cena seguinte\n | —\n\n | 14,30–15,80\n | galeria escura; o iPhone sobe girando e a tela se escreve\n | \"Clube\", \"Puxe sua inspiração\", \"Abrir o Clube\", \"Fechar\"\n\n | 15,80–17,30\n | a câmera corre; o MacBook entra em perspectiva\n | \"Dentro do seu fluxo\"\n\n | 16,80–19,30\n | a fita azul atravessa, vira faixa com o texto, pílula, círculo e check\n | \"Salvando sua ideia\", \"Feito\"\n\n | 19,33–21,30\n | íris sai do check e abre o desktop com o navegador rosa; favoritos entram\n | \"Favoritos\", \"Clube\"\n\n | 21,30–24,90\n | o cursor abre a pasta \"Trabalho\" e passa pelos itens; a prévia abre à direita\n | \"Trabalho\", \"Pinterest\", \"Figma\", \"Gmail\", \"Entretenimento\", \"Redes sociais\", \"Nova aba\", \"Instagram\"\n\n | 24,90–27,50\n | o cursor arrasta a aba do Instagram até \"Redes sociais\"\n | —\n\n | 27,50–28,17\n | escurece até o preto\n | —\n\n## Momentos para o som\n\n- O trecho mais vazio da introdução da música fica no \"antes\"; o tempo forte que abre o refrão cai em 5,48 s, no corte \"como está indo\".\n\n- No \"antes\", os efeitos ficam a 60% do volume: avião, pouso, notificação, barra, texto e achatamento.\n\n- No drop entra um golpe; daí em diante, um efeito por ação: pouso, letras, painel, alerta, clique, notificação, logo, pops dos artistas, viagem do cartão, subida e pouso dos mockups, digitação, chicote, fita, check, íris, pops dos favoritos, cliques, arraste e pouso da aba.\n\n- A música fica 11 dB abaixo do nível do arquivo, com fade de 0,8 s no fim."
    },
    {
      "titulo": "A identidade visual",
      "texto": "**Resumo:** o \"antes\" em `#161616` com um ícone azul-claro, barra branca de canto reto e itálico genérico; o \"agora\" em lilás `#D4D4E0`, cinza `#EDEDED`, preto com verde de música, azul-noite nos mockups 3D, fita em degradê azul e uma barra lateral rosa no navegador. SF Pro em quase tudo. Números tirados do `cenas.jsx` (q = quadro a 30 qps).\n\n## Palco\n\n | \n\n | Peça\n | Como é\n\n | Tela\n | 1080×1080, 30 qps\n\n | Desfoque de movimento\n | obturador de 270°, fase −135°, 16 amostras\n\n | Montagem\n | comp `RECRIACAO` com dez precomps em fila, títulos fixos no topo e um preto final de 27,50 a 28,15 s\n\n | Títulos\n | \"como começou vs :\" em branco até 5,5 s; \"como está indo\" em `#3A3A3C` de 5,5 a 9,0 s, apagando de 8,30 a 8,90 s; SF Pro Display Medium, 84 px\n\n## Cores\n\n | \n\n | Peça\n | Valor\n\n | Antes\n | fundo `#161616`; ícone com quadrado branco, círculo `#A3CDE1` e avião branco; selo `#E0303E`; barra `#FFFFFF`; frases `#111111`\n\n | Adobe\n | fundo `#D4D4E0`; ícones cinza `#8E8E93` com letras `#B9B9BE`; Ae `#00005B` com letras `#9999FF`\n\n | Painel e aviso\n | painel branco que esfria para `#EDEDED`; faixas `#F4F4F6`; aviso com ícone `#D01D2D` e texto `#E0505E`\n\n | Obter info\n | fundo `#EDEDED`; pílula `#E3E3E8` que acende `#A7E6EE` no clique; ripple `#B9B9C6`\n\n | Música\n | preto com brilho `#0B2E15`; verde `#1ED760` nos anéis e no botão\n\n | Cartão\n | barras `#2C40D0` sobre um fundo que vai de `#0A0A0A` a branco em 0,31 s\n\n | 3D\n | fundo `#050614`; galeria a 38% com desfoque 20; iPhone com moldura `#C9A46A` e espessura `#8C6A3A`; MacBook com tampa `#1C1C1E`, base `#AEB1B7` e teclado `#2A2A2E`; telas `#0B0B10` com destaque `#4F8DFF`\n\n | Fita\n | fundo `#00010F`; traço `#1E9BDB`; faixa em degradê `#1784CC` → `#26BAE1`\n\n | Navegador\n | janela `#D46F8E`, área `#DB7F9A`, favoritos `#EE6F86` com borda `#E8364E`; papel de parede tingido entre `#06207A` e `#A9D2FF`\n\n## Fontes\n\n | \n\n | Fonte\n | Onde\n\n | SF Pro Display Medium\n | títulos do topo\n\n | SF Pro Display Semibold e Bold\n | letras dos ícones Adobe, rótulo \"After Effects\", página de música, telas dos mockups, fita (118 px)\n\n | SF Pro Text\n | listas, avisos, botões, pastas do navegador\n\n | SF Pro Rounded Semibold\n | letras dos avatares\n\n | Roboto Condensed Italic\n | as duas frases do \"antes\" (60 px, tracking 60)\n\n## Cena a cena\n\n | \n\n | Cena\n | Números\n\n | Antes (0–5,5 s)\n | avião em órbita elíptica de 250×230 px, velocidade constante, de 0,20 a 1,92 s; selo de 0 a 100% em 0,1 s sem easing; balanço de 6°, −5° e 3° até 3,20 s; o ícone vai 419 px para a esquerda e a barra estica de 230 a 1.026 px entre 3,35 e 4,00 s, tudo linear; o ícone atravessa até x 391 e troca a frase; tudo achata em Y em 0,15 s a partir de 4,80 s\n\n | Respiro (4,95–5,5 s)\n | só o título sobre o preto\n\n | Adobe (5,5–7,2 s)\n | o Ae entra a 200%, a 30% de opacidade e com desfoque 30, e pousa em 100% (360 px) até 6,00 s; a grade cinza aparece de 80 a 100% em 8 q; \"After Effects\" sobe em onda; a grade anda para a esquerda a partir de 6,25 s\n\n | Painel e aviso (6,25–8,0 s)\n | painel de 472×520 com raio 28; lista de quatro arquivos; o aviso de travamento entra e empurra a lista\n\n | Obter info (7,85–9,67 s)\n | pílula de 270×68; clique com ripple de 1.200 px; a notificação de memória nasce do botão\n\n | Música (9,67–13,6 s)\n | logo, título, três artistas com anéis verdes entrando a 10,98, 11,08 e 11,40 s, texto e botão a partir de 11,92 s, item da faixa em 12,92 s\n\n | Cartão (13,55–14,32 s)\n | as barras se aproximam e afinam de 112 para 90 px até 13,85 s; o cartão cresce de 100 para 165, 290 e 640% e gira de 0 a 34° entre 13,86 e 14,30 s\n\n | 3D (14,28–17,45 s)\n | a cena entra com desfoque 18 em 0,17 s; o iPhone a 82% sobe de y 1.500 a 560 entre 14,40 e 14,95 s, gira em Y de 85° a −16° e sai para a direita em 15,80 s; o MacBook a 62%, inclinado 26° em Y e 22° em X, entra em 15,95 s e sai em 17,30 s; as telas se digitam em 14,95–15,55 s e 16,00–16,45 s\n\n | Fita (16,78–19,45 s)\n | onda de 120 a 270 px de espessura desenhada entre 16,80 e 17,20 s; a faixa reta gira de −3,5° a −16° com o texto correndo 260 px; vira pílula entre 18,55 e 19,08 s (2.400 para 250 px, raio 125); spinner, seta e check em 0,07, 0,06 e 0,08 s; \"Feito\" em 19,22 s\n\n | Íris (19,33–19,43 s)\n | máscara circular com suavidade de 120 px, centrada no check, expandindo de −60 a 900 px em 3 q\n\n | Navegador (19,33–28,17 s)\n | favoritos crescem de 0 a 100% em 6 q, 5 q entre eles, e recebem os ícones a partir de 19,95 s; pastas a 75 px de distância; clique em 21,65 s abre os filhos e empurra as pastas de baixo 225 px; prévia entra da direita em 22,93 s; arraste do Instagram de 25,00 a 26,60 s; a janela sobe 900 px com curva contínua e `wiggle(4, 2)`, e a escala vai de 100 a 102%\n\n## O que é \"humano\" neste vídeo\n\n- No \"agora\", nenhuma cena entra parada: o Ae chega em curva contínua, a galeria deriva, os mockups flutuam e a janela do navegador sobe o tempo todo.\n\n- O cursor clica com um aperto de 130 para 105% e de volta, e a aba arrastada vai atrás dele com a mão de luva.\n\n- O \"antes\" é mecânico de propósito, e é por isso que o resto parece vivo."
    },
    {
      "titulo": "A montagem no After Effects",
      "texto": "| \n\n | Arquivo\n | O que faz\n\n | `ae/cenas.jsx`\n | cria um projeto novo e monta tudo. No topo fica o bloco `TEXTOS`, com todos os textos da tela (títulos, frases, arquivos, avisos, a página de música, as telas dos mockups, a fita e as pastas do navegador). Cada cena é uma precomp numerada de 1 a 10, com os tempos dela no comentário; a função `poe` coloca cada uma na comp final. A ajudante `K` grava chaves com influência (−1 = linear, `'a'` = curva contínua) e `digita` escreve letra a letra. No fim, grava `audio/eventos.json` e salva `ae/trust-process.aep`\n\n | `ae/trust-process.aep`\n | o resultado do script, pronto para abrir e renderizar\n\n | `assets/fazer_assets.py`\n | desenha o papel de parede em flor, recorta as fotos da galeria e da capa e copia ícones e mãos\n\n | `audio/trilha.py`\n | põe a música 11 dB abaixo, baixa para 60% os efeitos antes de 5,45 s, troca o impacto do drop por um golpe tonal, marca o drop em 5,48 s e mixa para −14 LUFS\n\n | `audio/mesa/`\n | o motor de mix e o mapa de sons por tipo de evento\n\n- **Fontes:** instale SF Pro Display, SF Pro Text, SF Pro Rounded e Roboto Condensed (Google Fonts) em `C:\\Program Files\\Common Files\\Adobe\\Fonts` e reinicie o After Effects.\n\n- **Juntar as pastas:** copie `audio/` para dentro de `projeto/`. O script grava os eventos em `projeto/audio/eventos.json`.\n\n- **Abrir:** `projeto/ae/trust-process.aep`. Se o AE pedir arquivos, aponte para `projeto/assets/`.\n\n- **Adaptar:** troque o `TEXTOS` e as imagens e rode File › Scripts › Run Script File › `cenas.jsx`. Ele cria um projeto novo e sobrescreve o `.aep` em cerca de 6 s.\n\n- **Som:** no topo do `trilha.py`, aponte o `sys.path.insert` para a pasta `audio/mesa`, gere o `musica.wav` com o comando do ffmpeg do próprio arquivo e rode `python audio/trilha.py`. Precisa de numpy, scipy, soundfile, librosa e pyloudnorm; no topo do `mesa.py`, aponte as pastas de efeitos para a sua biblioteca.\n\n- **Render:** fila do AE em H.264 e o `mix.wav` colado com o ffmpeg: `ffmpeg -i video.mp4 -i audio/mix.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 320k -shortest final.mp4`.\n\n**Pegadinhas:** os mockups são camadas 3D filhas de um null 3D; um filho 2D ignora as rotações X e Y do pai, então tela, moldura e espessura também precisam ser 3D. O avião do \"antes\" orbita por expressão e se orienta pela própria velocidade. Para trocar os mockups por um modelo mais fiel, renderize um `.glb` e substitua a precomp `TRES D`. O `aerender` não aceita caminho com acento."
    },
    {
      "titulo": "As decisões de direção",
      "texto": "- **Feio de propósito no começo.** Movimento linear, canto reto, itálico genérico e nada na batida: o contraste vende o acabamento do resto.\n\n- **Meio segundo de vazio antes do drop.** O preto entre 5,0 e 5,47 s prepara o corte, e a imagem nova entra já gigante e desfocada, pousando em 15 quadros.\n\n- **Zoom através de um objeto.** As barras azuis viram um cartão que gira 34° e cresce de 100 para 640% em 0,44 s, até o miolo virar a galeria escura.\n\n- **Mockups vivos.** O iPhone sobe de perfil e gira até ficar quase de frente, a câmera corre para o MacBook, e as telas se escrevem enquanto eles flutuam.\n\n- **A fita fecha uma ação.** A onda azul vira faixa com o texto correndo, a faixa vira pílula, a pílula vira círculo, e spinner, seta e check aparecem em sequência; a íris de três quadros sai do check e abre o navegador.\n\n- **Câmera que nunca para.** No navegador ela sobe 900 px em 8,8 s com tremida leve; o cursor clica, abre a pasta e arrasta a aba com a mão de luva.\n\n- **O som respeita o contraste.** Efeitos discretos no \"antes\", golpe no drop e um efeito para cada ação do \"agora\".\n\nDetalhes de cores, tempos e números: estilo.md. Cenas por tempo e texto na tela: roteiro.md. Para fazer o seu com o seu trabalho: PROMPT.md."
    },
    {
      "titulo": "As versões até o final",
      "texto": "| \n\n | Versão\n | O que mudou\n\n | **v1**\n | recriação cena a cena, ajustada lado a lado com o original, com textos em português e a página de música com conteúdo nosso"
    }
  ],
  "prompt": "# Prompt: \"como começou e como está indo\" com o seu trabalho\n\n> Data: 2026-10-17 · Tipo: guia · Status: vigente · Projeto: antes-e-agora\n\n**Resumo:** o prompt para colar no seu agente (Claude Code ou Codex), aberto na pasta da sua central, para ele estudar este projeto e montar o seu vídeo de evolução no mesmo método: um trecho simples de propósito, meio segundo de vazio e, no drop da música, as suas melhores cenas emendadas por objetos. Troque os marcadores `{{…}}` ou apague a linha, e o agente pergunta.\n\n## Como usar\n\n1. Descompacte o pacote em `07-videos/projetos/antes-e-agora/` dentro da sua central e copie `audio/` para dentro de `projeto/`.\n2. Instale SF Pro e Roboto Condensed e separe a música (veja `referencias/fora-do-pacote.md`).\n3. Junte o que vai aparecer no \"agora\": telas, ícones das ferramentas que você usa e, se tiver, trechos de vídeos seus já aprovados.\n4. Abra o agente na pasta da central, copie o bloco abaixo, troque os marcadores que já souber e cole.\n\n## O prompt\n\n```text\nQuero um vídeo de evolução no mesmo método do projeto \"Como começou e como está indo\", que está em 07-videos/projetos/antes-e-agora/: cinco segundos simples de propósito, meio segundo de vazio e, no drop, o meu trabalho atual com as cenas emendadas por objetos.\n\nQuem está evoluindo (eu, meu estúdio, minha marca): {{QUEM}}\nTítulos do topo (antes e depois): {{TITULOS}}\nComo era o \"antes\" (o motion antigo, um layout velho, um print do começo): {{ANTES}}\nCenas do \"agora\", em ordem (telas, ferramentas, mockups, trechos de vídeos meus): {{AGORA}}\nFecho (a última cena e a ação que fecha o vídeo): {{FECHO}}\nMúsica (com um vão antes do refrão e um drop forte): {{MUSICA}}\nDuração: {{DURACAO}} (a referência tem 28 s) · Formato: {{FORMATO}} (a referência é 1080×1080)\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 LEIA-ME.md, estilo.md e roteiro.md. Abra projeto/ae/cenas.jsx e veja o bloco TEXTOS, as dez precomps numeradas, a função poe que monta a fila, o avião em órbita do \"antes\", o zoom através do CARTAO, os mockups 3D da precomp TRES D, a FITA que vira check, a íris e a câmera do navegador. Me diga em poucas linhas o que vai reaproveitar.\n\n2. Meça a música: BPM, o vão antes do refrão e o tempo forte do drop. O corte para o \"agora\" cai nesse tempo forte, com meio segundo de tela vazia antes; cada cena do \"agora\" entra numa batida.\n\n3. Tire a identidade do que é real: ícones oficiais das ferramentas, telas dos seus projetos, cores das suas marcas. Nada de tela inventada no lugar de um trabalho que existe.\n\n4. Escreva o roteiro cena a cena, com o tempo, o texto exato e a emenda de cada troca (pousa, nasce do botão, gira e cresce até a próxima, íris saindo do check), no molde do roteiro.md. O \"antes\" tem que parecer antigo: linear, de canto reto, fora da batida. Me mostre e espere meu ok.\n\n5. Construa copiando o projeto, sem editar o original: troque TEXTOS e imagens, reaproveite as precomps que servem e escreva as novas com as mesmas ajudantes. No \"agora\", nenhuma cena entra parada e nenhum corte é seco, a não ser o do drop. Rode o cenas.jsx e me mostre uma folha de contato com 16 quadros, incluindo o drop, o meio do zoom através e o meio da íris.\n\n6. Revise antes do render: drop fora do tempo forte, \"antes\" bonito demais, cena do \"agora\" parada, filho 2D num pai 3D (some na rotação), texto cortado nos mockups.\n\n7. Som: rode audio/trilha.py na Mesa com os eventos da comp, efeitos discretos no \"antes\", golpe no drop e um efeito por ação depois, master em −14 LUFS. Renderize em H.264, cole o mix com o ffmpeg e entregue o MP4 com uma anotação do que mudou em relação ao projeto.\n```\n\n## Checklist antes de entregar (da referência)\n\n- [ ] O \"antes\" é linear, de canto reto e fora da batida, e dura uns 5 s.\n- [ ] Há meio segundo de vazio antes do drop, e o corte cai no tempo forte.\n- [ ] No \"agora\", cada cena nasce de uma peça da anterior.\n- [ ] Mockups e telas flutuam; a câmera do fecho nunca para.\n- [ ] Ícones, telas e trechos são reais e seus.\n- [ ] Efeitos discretos no \"antes\", um efeito por ação no \"agora\", −14 LUFS.\n",
  "campos": [
    "AGORA",
    "ANTES",
    "DURACAO",
    "FECHO",
    "FORMATO",
    "MUSICA",
    "QUEM",
    "TITULOS"
  ],
  "fonte": {
    "nome": "Clube do Motion",
    "url": "https://clubedomotion.com/projeto/?id=antes-e-agora",
    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
  },
  "ferramentas": [
    "Claude Code",
    "After Effects"
  ],
  "scripts_ae": {
    "pasta": "lib/estudio/dados/projetos-ae/antes-e-agora",
    "arquivos": [
      "ae/cenas.jsx",
      "assets/fazer_assets.py"
    ],
    "como_usar": "modelo: leia os .jsx (montam as comps no After Effects) e os .py (preparam assets/áudio) e adapte para o estudio_ae; não copie o conteúdo do vídeo, troque pelo assunto da pessoa."
  }
}