{
  "id": "clube-telegram-chat",
  "titulo": "Do ícone ao chat",
  "categoria": "produto",
  "resumo": "vídeo quadrado de 16,25 s a 60 qps, sem narração, em que o ícone do Telegram sai de uma fileira de apps, dá duas voltas inteiras e vira a tab bar, que vira a lista de conversas, que vira o chat. No chat, a câmera trabalha em pulsos de zoom com giro acumulado e as bolhas são digitadas palavra por palavra no tempo da música. 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": "vídeo de app de mensagens ou de atendimento, demonstração de chatbot, conversa com cliente encenada, abertura de produto em que um ícone leva para dentro da interface.",
  "estilo": [
    "interface da Apple",
    "morph contínuo",
    "rotação longa sem mola",
    "letterbox animado",
    "câmera em pulsos de zoom",
    "digitação no tempo da música"
  ],
  "ficha": {
    "formato": "1080×1080, 60 qps, desfoque de movimento com obturador de 240° e 16 amostras",
    "duracao": "16,25 s (975 quadros), sem narração",
    "motor": "ae",
    "voz": "ver o guia de estilo",
    "musica": "ver o guia de estilo",
    "fontes": "SF Pro Text (Regular, Medium e Semibold) e SF Pro Rounded Semibold"
  },
  "ferramentas": [
    "Claude Code",
    "After Effects"
  ],
  "ficha_tecnica": {
    "Duração": "16,25 s (975 quadros), sem narração",
    "Formato": "1080×1080, 60 qps, desfoque de movimento com obturador de 240° e 16 amostras",
    "Ferramenta": "After Effects: um script ExtendScript (`cenas.jsx`) cria o projeto, monta a comp `RECRIACAO` com as precomps `TABBAR`, `LISTA` e `CHAT` (maior que o quadro, para a câmera passear) e salva o `.aep`",
    "Assets": "20 ícones de app em squircle feitos com os glifos oficiais do Simple Icons (CC0), papel de parede verde com desenhos, avatar de uma pessoa gerada; scripts `fazer_icones.py` e `fazer_fundo_chat.py`",
    "Fontes": "SF Pro Text (Regular, Medium e Semibold) e SF Pro Rounded Semibold",
    "Trilha": "\"Hot (Remix)\", de Young Thug com Gunna e Travis Scott, 111 BPM, a partir de 2,33 s da faixa",
    "Som": "40 eventos tirados da comp, tique por palavra, pop por bolha, morph com tonal e chicote; −14,0 LUFS e pico verdadeiro de −1,3 dBFS",
    "Referência": "edit \"Telegram\" com chat cantado, de @illdari (09/08/2026), estudado quadro a quadro",
    "Arquivo final": "MP4 H.264 com áudio AAC, 50 MB"
  },
  "etapas": [
    {
      "titulo": "O roteiro",
      "texto": "**Resumo:** o vídeo não tem narração; o roteiro é a sequência de telas e o diálogo digitado no chat, com os tempos do `cenas.jsx`. O texto é nosso e trocável no bloco `TEXTOS`. Com outro app, mantenha a regra: um objeto só do ícone até a conversa, e as palavras entrando no tempo da música.\n\n## De onde veio a estrutura\n\nO edit estudado leva 16 s do dock de apps até um chat em que as bolhas recebem, palavra por palavra, a letra da música. Este projeto mantém as telas, os tempos e a câmera, e troca a letra por um diálogo sobre o próprio trabalho de motion, com o mesmo número de palavras por bolha e o mesmo ritmo.\n\n## Cenas e texto na tela\n\n | \n\n | Tempo (s)\n | Tela\n | Texto na tela\n\n | 0,00–1,60\n | fundo cinza; ícones de Arc, Finder, Discord, Instagram, Mail, TikTok, Telegram e WhatsApp entram pela direita; barras de cinema fecham\n | —\n\n | 1,60–2,40\n | as barras reabrem; os ícones caem, menos o Telegram, que sobe ao centro\n | —\n\n | 2,00–3,80\n | o Telegram gira e, em 2,85 s, estica numa pílula escura\n | —\n\n | 3,65–5,40\n | ícones e rótulos brotam da pílula; a seleção acende em \"Chats\"; a barra estica e some\n | \"Chats\", \"Contatos\", \"Ajustes\", \"Você\"\n\n | 5,40–6,05\n | lista de conversas em foco, prévias se escrevendo\n | \"Cliente · Dá para trocar a música também?\", \"Marina · Você viu o que eu te mandei?\", \"After Effects · Já tá pronto?\", \"Clube do Motion · Projeto novo no ar\"\n\n | 6,05–6,75\n | só a conversa \"After Effects\" fica e sobe; a prévia vira a primeira bolha\n | \"Já tá pronto?\"\n\n | 6,75–8,10\n | papel de parede verde; a câmera aproxima; chega a bolha enviada\n | \"Falta só o som\"\n\n | 8,10–12,40\n | a 3ª bolha nasce como mancha e é digitada palavra por palavra; a câmera dá um soco e recua; faixas pretas engrossam\n | \"Ajustando cada quadro / pra ficar bem liso\"\n\n | 12,40–14,60\n | chicote de câmera; bolha branca recebida, digitada palavra por palavra\n | \"Manda assim que sair, hein?\"\n\n | 14,60–16,25\n | tudo clareia até o branco\n | —\n\n## Momentos para o som\n\n- A música entra a partir de 2,33 s da faixa; assim, o primeiro tempo forte do refrão (4,30 s na faixa) cai em 1,97 s do vídeo, na queda dos ícones.\n\n- Na grade de 0,54 s da música caem a saída da barra (5,2 s), o isolamento da conversa (6,3 s), a entrada do chat (6,8 s) e o soco de câmera (9,0 a 9,5 s).\n\n- Um pop para cada ícone que entra, queda, whoosh longo com um tonal no morph, pop na pílula, rótulos, clique na seleção, letras da lista, bolha nova, um tique leve por palavra digitada, chicote e o clarão do fim.\n\n- A música fica 11 dB abaixo do nível do arquivo, com fade de 1,4 s no fim."
    },
    {
      "titulo": "A identidade visual",
      "texto": "**Resumo:** cinza claro do iOS (`#EBEBEB`), ícones oficiais em squircle, a pílula da tab bar num preto levemente roxo, a lista no layout do Telegram e o chat com papel de parede verde. Rotações com ease-out puro, entradas pelo desfoque e uma câmera que nunca para no chat. Números tirados do `cenas.jsx`.\n\n## Palco\n\n | \n\n | Peça\n | Como é\n\n | Tela\n | 1080×1080, 60 qps, 8 bits por canal\n\n | Desfoque de movimento\n | obturador de 240°, fase −90°, 16 amostras\n\n | Montagem\n | comp `RECRIACAO` com a fileira de ícones (null `FILEIRA`), as barras de cinema, `TABBAR`, `LISTA` e `CHAT` (precomp de 1.640×1.600, filha do null `CAM`)\n\n | Câmera do chat\n | a âncora do `CHAT` diz qual ponto fica no centro; a escala e o giro ficam no null `CAM`, com `wiggle(2.4,3)` na posição depois de 6,7 s\n\n## Cores\n\n | \n\n | Peça\n | Valor\n\n | Fundo das telas de sistema\n | `#EBEBEB`\n\n | Telegram no giro\n | `#3C93DC`, escurecendo até `#1B1A1F` em 0,6 s; borda `#2E2D33` de até 3 px\n\n | Seleção na tab bar\n | `#2081D6` a 32%; rótulo ativo `#5FB0FF`\n\n | Lista\n | nome `#0B0B0D`, prévia `#6E6E73`, hora e contador `#8E8E93` (a conversa escolhida em `#2F9BF0`); avatares laranja `#E8913A`, Ae `#00005B` com letras `#9999FF` e um losango preto no avatar branco\n\n | Bolha enviada\n | `#D5FFAE`, hora `#3FA33A` com ✓✓\n\n | Bolha recebida\n | branca, hora `#8E8E93`; sombra de 35% com distância 3 e suavidade 12\n\n | Fim\n | branco puro\n\n## Fontes\n\n | \n\n | Fonte\n | Onde\n\n | SF Pro Text Regular\n | prévias (36 px), bolhas (54 px, entrelinha 62 nas de duas linhas), horas\n\n | SF Pro Text Semibold\n | nomes da lista (42 px) e contadores\n\n | SF Pro Text Medium\n | rótulos da tab bar (17 px)\n\n | SF Pro Rounded Semibold\n | letras dos avatares\n\n## Cena a cena\n\n | \n\n | Cena\n | Números\n\n | Dock (0–1,6 s)\n | oito ícones de 216 px, passo de 240 px, entrando em 0,00, 0,12, 0,25, 0,38, 0,58, 0,78, 0,97 e 1,17 s; cada um nasce 12% maior, com desfoque 22 e 60 px adiante, e assenta em 12 q (o primeiro em 8); a fileira anda de x 540 a −714 com curva contínua e encolhe de 105 para 87%; quem passa da borda esquerda vai a 45% de opacidade com desfoque 10\n\n | Letterbox\n | barras de 240 px descem até 113 px de altura visível entre 0,02 e 1,30 s, seguram até 1,60 s e voltam até 2,40 s\n\n | Queda (1,60–2,30 s)\n | cada ícone, menos o Telegram, desce 860 px em 40 q acelerando, gira de −10° a 12° e vai a 45% de opacidade; 1 q de defasagem entre eles\n\n | Giro e morph (2,0–3,8 s)\n | o Telegram gira de 0 a 720° (influência de saída 60 e de chegada 67) e, em 2,85 s, cede o lugar à pílula num crossfade de 4 q; a pílula vai de 173×172 a 746×128 até 3,80 s (influências 18 e 97), com o raio de 40 para 64; o ponto branco de 40 px nasce no centro e vai até a aba \"Você\"\n\n | Tab bar (3,65–5,45 s)\n | três ícones de linha saem do centro para x 262, 437 e 624 em 20 q, de 60 a 100% e desfoque 12, com 3 q entre eles; rótulos sobem 5 px em 10 q a partir de 4,40 s; seleção cresce de 40 a 100% em 4,90–5,00 s; saída com escala X de 100 a 165% e desfoque direcional de 0 a 90 entre 5,18 e 5,45 s\n\n | Lista (5,38–6,80 s)\n | entra de 105 a 100% com desfoque 40 em 0,38 s; as prévias se digitam de 5,42 a 5,80 s; em 6,05 s as outras conversas somem em 20 q (3 q entre elas) e a escolhida sobe até y 486 e cresce 8%\n\n | Chat (6,45–14,6 s)\n | bolhas de 107 px (uma linha) e 167 px (duas), raio 40; a 2ª, a 3ª e a 4ª nascem em 7,22, 8,12 e 12,40 s como mancha (90%, desfoque 18 a 20, deslocadas 30 a 60 px) e assentam em 9 a 12 q; a câmera vai de 72 a 100% na entrada e oscila 145, 108, 158, 121 e 173%, com giro até −6° e depois até +5,4°; chicote entre 12,47 e 12,67 s; faixas pretas de até 208 px entre 8,55 e 12,47 s\n\n | Digitação\n | palavras da 3ª bolha em 8,25 a 10,23 s e da 4ª em 12,78 a 14,14 s, a cada 0,33 a 0,34 s, a cerca de 19 letras por segundo\n\n | Fim (14,60–16,25 s)\n | sólido branco de 0 a 100% em 0,26 s\n\n## O que é \"humano\" neste vídeo\n\n- A câmera do chat foi medida no original a cada 0,2 s e tem curva contínua em todos os pontos, mais uma tremida de 3 px a 2,4 Hz.\n\n- A rotação do morph freia até menos de 1° por quadro sem passar do ponto.\n\n- Os ícones não caem juntos: cada um tem um quadro de diferença e um giro próprio.\n\n- As faixas pretas engrossam e afinam com a câmera em vez de entrarem prontas."
    },
    {
      "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 ficam o bloco `TEXTOS` (abas, lista de conversas com nome, prévia, hora, contador e tipo de avatar, e as bolhas) e as listas `TEMPOS_B3` e `TEMPOS_B4`, com o segundo em que cada palavra começa a ser digitada. A ajudante `K` grava chaves com influência (−1 = linear, `'a'` = curva contínua) e `digita` escreve letra a letra. A câmera do chat é a tabela `CAMQ`: tempo, ponto do chat no centro, zoom e giro, medidos no original a cada 0,2 s. No fim, grava `audio/eventos.json` e salva `ae/telegram-chat.aep`\n\n | `ae/telegram-chat.aep`\n | o resultado do script, pronto para abrir e renderizar\n\n | `assets/fazer_icones.py`\n | desenha os ícones em squircle de 512 px a partir dos SVGs de `assets/svg/`\n\n | `assets/fazer_fundo_chat.py`\n | repete e tinge um padrão de desenhos em degradê verde para o papel de parede do chat\n\n | `audio/trilha.py`\n | põe a música 11 dB abaixo, marca o drop em 1,97 s e troca três sons do mapa padrão: tecla por palavra, whoosh longo com tonal no morph e pop na pílula\n\n | `audio/mesa/`\n | o motor de mix e o mapa de sons por tipo de evento\n\n- **Fontes:** instale SF Pro Text e SF Pro Rounded 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/telegram-chat.aep`. Se o AE pedir arquivos, aponte para `projeto/assets/`.\n\n- **Adaptar:** troque o `TEXTOS`, os tempos de digitação e os ícones e rode File › Scripts › Run Script File › `cenas.jsx`. Ele cria um projeto novo e sobrescreve o `.aep` em cerca de 3 s.\n\n- **Som:** no topo do `trilha.py`, aponte o `sys.path.insert` para a pasta `audio/mesa` e o `MUSICA` para a sua faixa, 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 a 60 qps 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:** filho não herda opacidade, por isso o texto e a hora de cada bolha leem a opacidade do corpo por expressão. As faixas pretas do chat são filhas da câmera e corrigem a própria escala pelo zoom, para manterem a espessura na tela. Ícone que passa da borda esquerda fica translúcido e desfocado por expressão, calculada pela posição real na tela. O Gaussian Blur vem com \"Repeat Edge Pixels\" desligado; ligado, PNG desfocado vira caixa. O `aerender` não aceita caminho com acento."
    },
    {
      "titulo": "As decisões de direção",
      "texto": "- **Um objeto só, do ícone ao chat.** O ícone vira pílula, a pílula vira tab bar, a prévia da conversa vira a primeira bolha no mesmo lugar.\n\n- **Rotação longa sem mola.** Duas voltas inteiras em 1,8 s, acelerando até o morph e freando sem rebote: parece caro e não fica borrachudo.\n\n- **Letterbox no começo.** As barras de cinema fecham enquanto os ícones entram e reabrem na queda, e a escala muda sem nenhum corte.\n\n- **Gravidade na saída.** Os ícones caem acelerando e girando, cada um com um quadro de diferença; só o Telegram sobe.\n\n- **Câmera em pulsos.** No chat, zoom de 100 a 173% em ondas, giro que chega a −6° e a +5,4°, tremida de 3 px e um chicote: oito segundos num plano só sem nada parado.\n\n- **Digitação no tempo da música.** Cada palavra começa num tempo da grade de 0,33 s, letra a letra, e cada bolha nasce como mancha borrada e ganha forma em 9 a 12 quadros.\n\n- **Nada parado nem na tab bar.** Na revisão, uma respiração de 2% de escala e 6 px de subida entrou entre 4,35 e 5,45 s, onde o render acusou 0,6 s de tela parada.\n\nDetalhes de cores, tempos e números: estilo.md. Cenas por tempo e texto na tela: roteiro.md. Para fazer o seu com outro app: 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 diálogo nosso no lugar da letra da música\n\n | **v1.1**\n | respiração na tab bar entre 4,35 e 5,45 s, para a tela não ficar parada"
    }
  ],
  "pacote": [
    {
      "pasta": "projeto/",
      "conteudo": "`ae/cenas.jsx` (o gerador comentado), `ae/telegram-chat.aep` (o projeto montado), `assets/icones/` (20 PNGs), `assets/svg/` (os glifos de origem), `assets/chat-fundo-v4.jpg`, `assets/avatar-pessoa.png` e os dois scripts que fazem essas imagens"
    },
    {
      "pasta": "audio/",
      "conteudo": "`trilha.py` (o som inteiro), `eventos.json` (os 40 eventos da comp), `mix.wav`, `relatorio-som.json` e `mesa/`, com o motor de mix `mesa.py` e o `mapa_padrao.py`"
    },
    {
      "pasta": "referencias/",
      "conteudo": "`links.md` e `fora-do-pacote.md`"
    },
    {
      "pasta": "render.mp4",
      "conteudo": "o vídeo final"
    },
    {
      "pasta": "ae/cenas.jsx",
      "conteudo": "cria um projeto novo e monta tudo. No topo ficam o bloco `TEXTOS` (abas, lista de conversas com nome, prévia, hora, contador e tipo de avatar, e as bolhas) e as listas `TEMPOS_B3` e `TEMPOS_B4`, com o segundo em que cada palavra começa a ser digitada. A ajudante `K` grava chaves com influência (−1 = linear, `'a'` = curva contínua) e `digita` escreve letra a letra. A câmera do chat é a tabela `CAMQ`: tempo, ponto do chat no centro, zoom e giro, medidos no original a cada 0,2 s. No fim, grava `audio/eventos.json` e salva `ae/telegram-chat.aep`"
    },
    {
      "pasta": "ae/telegram-chat.aep",
      "conteudo": "o resultado do script, pronto para abrir e renderizar"
    },
    {
      "pasta": "assets/fazer_icones.py",
      "conteudo": "desenha os ícones em squircle de 512 px a partir dos SVGs de `assets/svg/`"
    },
    {
      "pasta": "assets/fazer_fundo_chat.py",
      "conteudo": "repete e tinge um padrão de desenhos em degradê verde para o papel de parede do chat"
    },
    {
      "pasta": "audio/trilha.py",
      "conteudo": "põe a música 11 dB abaixo, marca o drop em 1,97 s e troca três sons do mapa padrão: tecla por palavra, whoosh longo com tonal no morph e pop na pílula"
    },
    {
      "pasta": "audio/mesa/",
      "conteudo": "o motor de mix e o mapa de sons por tipo de evento"
    }
  ],
  "prompt": "Quero um vídeo quadrado no mesmo método do projeto \"Telegram, do ícone ao chat\", que está em 07-videos/projetos/telegram-chat/: um objeto só, do ícone do app até a conversa, e o diálogo digitado no tempo da música.\n\nApp que vira a interface (mensagens, atendimento, o meu produto...): {{APP}}\nÍcones da fileira de abertura (6 a 8 apps): {{ICONES}}\nAbas da barra do app: {{ABAS}}\nLista de conversas (nome, prévia, hora e qual é a escolhida): {{LISTA}}\nDiálogo do chat, bolha por bolha, dizendo quem envia: {{DIALOGO}}\nMúsica (com um tempo forte claro e uma grade estável): {{MUSICA}}\nDuração: {{DURACAO}} (a referência tem 16,25 s) · Formato: {{FORMATO}} (a referência é 1080×1080 a 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 LEIA-ME.md, estilo.md e roteiro.md. Abra projeto/ae/cenas.jsx e veja o bloco TEXTOS, as listas TEMPOS_B3 e TEMPOS_B4, as ajudantes K e digita, o morph da pílula na precomp TABBAR, o isolamento da conversa na LISTA, a função bolha do CHAT e a tabela CAMQ da câmera. Me diga em poucas linhas o que vai reaproveitar.\n\n2. Meça a música: BPM, grade e o primeiro tempo forte. A queda dos ícones cai nesse tempo; a saída da barra, o isolamento da conversa e a entrada do chat caem na grade; cada palavra digitada começa num tempo.\n\n3. Junte os assets reais: o glifo oficial de cada app em SVG (Simple Icons ou o site da marca), as cores oficiais e o padrão de fundo do chat do app escolhido. Gere os ícones com assets/fazer_icones.py e anote de onde veio cada um.\n\n4. Escreva o roteiro tela a tela, com o tempo de cada troca e o texto exato, no molde do roteiro.md. O diálogo é seu: nada de letra de música, nem traduzida nem adaptada. Mantenha o número de palavras por bolha perto do original para o ritmo bater. Me mostre e espere meu ok.\n\n5. Construa copiando o projeto, sem editar o original: troque TEXTOS, ícones e tempos. Regras: rotação longa com ease-out puro e sem rebote no morph, a prévia da conversa continuando no lugar como primeira bolha, bolha que nasce como mancha e ganha forma, câmera do chat com curva contínua em todos os pontos e uma tremida leve. Rode o cenas.jsx e me mostre uma folha de contato com 12 quadros, incluindo o meio do giro e do chicote.\n\n6. Revise antes do render: tela parada por mais de meio segundo (a tab bar já precisou de uma respiração), palavra que aparece antes do tempo, borda do papel de parede aparecendo fora das faixas pretas, texto cortado na bolha.\n\n7. Som: rode audio/trilha.py na Mesa com os eventos da comp (pop por ícone e por bolha, tique por palavra, whoosh no morph, chicote), master em −14 LUFS. Renderize em H.264 a 60 qps, cole o mix com o ffmpeg e entregue o MP4 com uma anotação do que mudou em relação ao projeto.",
  "campos": [
    "ABAS",
    "APP",
    "DIALOGO",
    "DURACAO",
    "FORMATO",
    "ICONES",
    "LISTA",
    "MUSICA"
  ],
  "fonte": {
    "nome": "Clube do Motion",
    "url": "https://clubedomotion.com/projeto/?id=telegram-chat",
    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
  }
}