{
  "id": "clube-telegram-ilha",
  "titulo": "A ligação na pílula",
  "categoria": "produto",
  "resumo": "loop quadrado de 8,9 s, sem narração, em que o ícone do Telegram sobe, vira um card de recentes, e o card dá lugar a uma pílula preta no estilo da Dynamic Island que recebe uma ligação e a recusa. Toda troca passa por um respiro azul: o fundo vira azul-claro e o próximo elemento já nasce desfocado por cima dele. Um script do After Effects (`cenas.jsx`) monta o projeto inteiro do zero. Feito pelo Clube do Motion como recriação do estilo de @illdari.",
  "indicado": "app ou produto digital que quer um loop curto de chamada, notificação ou alerta; portfólio de UI motion; vinheta quadrada de recurso novo.",
  "estilo": [
    "interface da Apple",
    "Dynamic Island",
    "respiro na cor da marca",
    "entrada pelo desfoque",
    "rastro longo",
    "loop"
  ],
  "ficha": {
    "formato": "1080×1080, 30 qps, desfoque de movimento com obturador de 720° (fase −360°, 16 amostras)",
    "duracao": "8,9 s, sem narração; o trecho de 4,367 s (131 quadros) se repete a partir de 4,37 s e de 8,73 s",
    "motor": "ae",
    "voz": "ver o guia de estilo",
    "musica": "ver o guia de estilo",
    "fontes": "SF Pro Display (Bold, Medium e Regular)"
  },
  "ferramentas": [
    "Claude Code",
    "After Effects"
  ],
  "ficha_tecnica": {
    "Duração": "8,9 s, sem narração; o trecho de 4,367 s (131 quadros) se repete a partir de 4,37 s e de 8,73 s",
    "Formato": "1080×1080, 30 qps, desfoque de movimento com obturador de 720° (fase −360°, 16 amostras)",
    "Ferramenta": "After Effects: um script ExtendScript (`cenas.jsx`) cria as comps `CARD`, `AVATAR chamada`, `LOOP` e `RECRIACAO`; o `.aep` já vem montado",
    "Assets": "logo oficial do Telegram (ícone de app e círculo), fone, dois avatares ilustrados e um monograma neutro no lugar do logo do autor original",
    "Fonte": "SF Pro Display (Bold, Medium e Regular)",
    "Som": "trecho de \"Life Is Good\" (Future e Drake), a 143,6 BPM, recortado para as trocas caírem na batida, e 38 efeitos sonoros posicionados pela Mesa; −14,0 LUFS. A música fica fora do pacote",
    "Referência": "edit \"Telegram apple style\" de @illdari (21/07/2026)",
    "Arquivo final": "MP4 H.264 com áudio AAC"
  },
  "etapas": [
    {
      "titulo": "O roteiro",
      "texto": "**Resumo:** o vídeo não tem narração; o roteiro é a sequência de peças do trecho de 4,37 s, com o texto que aparece na tela e os tempos do `cenas.jsx`. A segunda passada repete tudo com +4,37 s.\n\n## De onde veio a estrutura\n\nO edit de @illdari conta uma ligação no Telegram em menos de cinco segundos e toca o trecho duas vezes. Cada peça nasce da anterior e toda troca grande passa pelo azul. Esta recriação mantém as peças e os tempos, troca os textos pelo português e põe avatares ilustrados e um monograma neutro no lugar das imagens do autor.\n\n## Cenas por tempo\n\n | \n\n | Tempo (s)\n | Texto na tela\n | O que acontece\n\n | 0,00–0,13\n | —\n | só o azul do respiro\n\n | 0,13–0,57\n | —\n | o ícone do Telegram sobe de baixo com rastro longo e o fundo volta ao cinza\n\n | 0,45–0,82\n | —\n | o ícone gira, anda para a esquerda e some desfocando; o fundo fica azul de novo\n\n | 0,87–1,27\n | \"Recentes\" · \"Cliente Marcos\" · \"Bia Souza\" · \"Estúdio\"\n | o card branco sai do desfoque inclinado em 3D e assenta; avatares e nomes entram em cascata\n\n | 1,27–1,66\n | —\n | o card cresce acelerando, as bordas abaulam e ele estoura no azul\n\n | 1,64–2,00\n | —\n | a pílula preta nasce do desfoque; três pontos azuis acendem um depois do outro\n\n | 2,00–2,27\n | —\n | a pílula desce e os pontos caem para dentro dela\n\n | 2,27–2,77\n | —\n | esticão até virar a barra da chamada, com um rebote só\n\n | 2,40–2,87\n | \"Telegram\" · \"Bia está ligando… atende aí\"\n | o avatar da Bia sobe do desfoque; o letreiro corre com as pontas esfumadas; o botão verde aparece\n\n | 2,87–3,30\n | —\n | o botão verde é arrastado para a esquerda, acelerando\n\n | 3,32–3,53\n | \"ou deixa para depois\"\n | no quadro mais rápido o botão vira o vermelho de recusar e freia; o texto entra palavra por palavra; a pílula recua e inclina\n\n | 3,53–4,20\n | —\n | a pílula respira e deriva\n\n | 4,20–4,37\n | —\n | tudo desfoca e o fundo volta ao azul do primeiro quadro\n\n | 4,37–8,90\n | o mesmo\n | segunda passada e o começo da terceira\n\n## Momentos para o som\n\n- A música começa no primeiro quadro; as trocas grandes (ícone, card, pílula) foram colocadas perto das batidas, com desvio de até 0,2 s, como no original.\n\n- Um efeito curto para cada peça que sobe, sai, aparece ou estoura; um tique por ponto que acende.\n\n- O esticão da pílula leva o efeito de morph, a chamada leva o de notificação, o arrasto leva um deslize e a troca para o vermelho leva o clique.\n\n- Na segunda passada, a música não repete; os mesmos eventos tocam de novo com +4,37 s."
    },
    {
      "titulo": "A identidade visual",
      "texto": "**Resumo:** fundo cinza neutro (`#E0E0E0`), respiro azul-claro (`#ACD3DC`) nas trocas, pílula quase preta, verde de atender e vermelho de recusar, tudo em SF Pro Display, sem sombra. Movimento com curva de saída rápida e chegada longa, rastro de 720° e um único rebote. Números tirados do `cenas.jsx`.\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 720°, fase −360°, 16 amostras (limite adaptativo 128)\n\n | Montagem\n | comp `LOOP` de 4,367 s; a `RECRIACAO` empilha três cópias dela em 0, 4,367 e 8,733 s\n\n | Pré-comps\n | `CARD` (900×420) com o card \"Recentes\"; `AVATAR chamada` (200×200) com o avatar recortado em círculo\n\n## Cores\n\n | \n\n | Peça\n | Valor\n\n | Fundo\n | `#E0E0E0`\n\n | Respiro e véu\n | `#ACD3DC`\n\n | Pílula\n | `#050505`\n\n | Ponto apagado › aceso\n | `#174766` › `#2C8ED3`\n\n | Atender\n | `#22D23A`\n\n | Recusar\n | `#C00014`\n\n | Card\n | `#FFFFFF`, texto `#000000`\n\n | Letreiro\n | `#BDBDC2`; segunda linha `#EDECEF`\n\n## Fontes\n\n | \n\n | Fonte\n | Onde\n\n | SF Pro Display Bold\n | \"Recentes\" (40 px)\n\n | SF Pro Display Medium\n | \"Telegram\" na pílula (42 px)\n\n | SF Pro Display Regular\n | nomes no card (25 px), letreiro e \"ou deixa para depois\" (27 px)\n\n## Curvas\n\n | \n\n | Nome\n | Chaves\n | Uso\n\n | Saída rápida\n | saída 5% · chegada 90%\n | entradas, assentar do card, avatares\n\n | Aceleração\n | saída 90% · chegada linear\n | arrasto do botão verde, empurrão do card\n\n | Suave\n | 50/50\n | deriva, respiração e inclinação da pílula\n\nTodas as chaves caem na grade de quadros, e o caminho entre chaves é reto, sem curva espacial automática.\n\n## Cena a cena\n\n | \n\n | Cena\n | Números\n\n | Ícone\n | 205 px; sobe de y 1140 a 540 em 0,13–0,57 s; X 20° › 0°; depois Z até 42°, Y até −15° e x até 400 px; desfoque 60 › 0 na entrada e 0 › 150 na saída (valores ×5, por causa da escala); 4 cópias de eco a 55, 38, 24 e 12%\n\n | Card\n | 806×380, raio 60; entra em 0,87–1,27 s com X 22° › 0°, Y −28° › 0° e escala 80 › 100%; avatares de 156 px em 1,00, 1,10 e 1,17 s (escala 80 › 100%, desfoque 60 › 0); nomes a cada 2 quadros; \"Recentes\" com tracking 25 › 0\n\n | Estouro\n | o card cresce 100 › 112 › 130 › 165% entre 1,27 e 1,66 s; Optics Compensation 0 › 60 invertido (1,46–1,58 s) abaula as bordas; véu azul em 1,55–1,67 s\n\n | Pílula\n | nasce em 1,64 s com 300×110 e chega a 492×186 em 1,80 s; raio sempre igual a metade da altura (expressão); pontos de 84 px acendem com 2 quadros de defasagem\n\n | Queda\n | o nulo `PILULA ctrl` desce de y 562 a 732 (2,00–2,27 s); os pontos caem 110 px recortados por uma cópia da pílula (track matte)\n\n | Esticão\n | 463×177 › 836×243 (2,27–2,53 s) com Box Blur até 22; assenta em 801×240 em 2,77 s\n\n | Chamada\n | avatar sobe 60 px saindo do desfoque (2,40–2,63 s); letreiro anda 60 px/s numa janela de 340 px com pena de 36 px\n\n | Arrasto\n | botão verde de 144 px de x 270 a −9 (2,87–3,30 s), acelerando; em 3,32 s entra o vermelho de 176 px, com o fone girado 135°, freando até −302 em 3,50 s\n\n | Vida\n | nulo da pílula: x 540 › 505 › 540 › 512 › 540 entre 2,53 e 3,75 s; escala 100 › 101,7 › 100 › 100,8%; rotação 0 › 2° › 0 em 3,33–3,72 s\n\n | Saída\n | desfoque 0 › 30 em 4,20–4,37 s e o fundo volta ao azul no último quadro\n\n## Som\n\n | \n\n | Item\n | Valor\n\n | Música\n | trecho a partir de 187,222 s de \"Life Is Good\", 143,6 BPM; ganho −10 dB antes da soma, entrada de 0,03 s e saída de 0,6 s\n\n | Eventos\n | 38 (19 por passada): sobe, sai, aparece, item, empurra, estoura, pílula, ponto, cai, morph, notificação, desliza, clique e palavra\n\n | Efeitos\n | um por evento, pelo mapa padrão da Mesa, sem tonais; barramentos ×4 para o efeito ficar de 4 a 6 dB abaixo da música na janela\n\n | Medido\n | final −14,0 LUFS, pico −1,3 dBFS; música −15,4 e efeitos −17,9 LUFS\n\n## O que é \"humano\" neste vídeo\n\n- A pílula nunca para depois de assentar: deriva, respira e inclina de leve.\n\n- Os pontos acendem em onda, um depois do outro, como um carregamento.\n\n- O rastro fica atrás do movimento, nunca na frente."
    },
    {
      "titulo": "A montagem no After Effects",
      "texto": "| \n\n | Arquivo\n | O que faz\n\n | `ae/cenas.jsx`\n | apaga o que houver no projeto aberto e monta tudo. No topo fica o bloco `CFG`, com textos, cores, fontes e a duração do loop. Ajudantes: `K` (chaves com influência de entrada e saída, ou linear e hold), `retang`, `circulo`, `texto`, `animador`, `mascaraCirculo`, `blur`, `rastro` (Directional Blur ligado à velocidade) e `eco` (cópias atrasadas que fazem o rastro só para trás). As cenas ficam em ordem dentro de `montar()`, com o segundo de cada chave comentado\n\n | `ae/telegram.aep`\n | o resultado do script, pronto para abrir e renderizar\n\n | `audio/trilha.py`\n | lê `eventos.json`, põe a música 10 dB abaixo antes da soma, coloca um efeito por evento pelo mapa padrão, reforça os efeitos ×4 e mixa para −14 LUFS\n\n | `audio/eventos.json`\n | os tempos e tipos de cada evento (sobe, sai, item, ponto, pílula, cai, morph, notificação, desliza, clique…), escritos a partir das chaves do `.aep`\n\n- **Fonte:** instale a SF Pro Display em `C:\\Program Files\\Common Files\\Adobe\\Fonts` e reinicie o After Effects.\n\n- **Abrir:** `projeto/ae/telegram.aep`. Se o AE pedir arquivos, aponte para `projeto/assets/`.\n\n- **Adaptar:** troque os textos em `CFG.textos`, as cores em `CFG.cor` e as imagens em `assets/`, mantendo os nomes. Abra um projeto vazio e rode File › Scripts › Run Script File › `cenas.jsx`; ele procura `assets/` uma pasta acima de `ae/`.\n\n- **Render:** fila do AE com a comp `RECRIACAO` em H.264.\n\n- **Som:** no `audio/trilha.py`, troque o `sys.path` para a pasta `audio/mesa`, ponha a sua faixa em `audio/musica.wav` e rode `python audio/trilha.py`. Sai `audio/mix.wav`. Cole no vídeo com `ffmpeg -i render.mp4 -i audio/mix.wav -map 0:v -map 1:a -c:v copy -c:a aac -shortest final.mp4`.\n\n**Pegadinhas:** opacidade não passa do pai para o filho, por isso o fone copia a opacidade do botão por expressão. Efeito roda antes da escala: o ícone é uma imagem de 1024 px a 20%, então o desfoque dele vai ×5. Directional Blur no ícone borra a imagem por dentro; o rastro dele vem das quatro cópias de eco. Depois de acrescentar um efeito numa camada, releia a referência do efeito anterior, porque ela deixa de valer."
    },
    {
      "titulo": "As decisões de direção",
      "texto": "- **O respiro azul faz a transição.** Nas trocas, o fundo vira `#ACD3DC` e volta ao cinza em 0,3 s, enquanto o elemento novo ainda está desfocado por cima. O corte some.\n\n- **Cada peça nasce da anterior.** O ícone dá lugar ao card, o card estoura na pílula e a pílula estica e vira a chamada.\n\n- **Tudo entra saindo do desfoque**, com uma curva que começa rápida e freia longo (influência de 5% na saída e 90% na chegada).\n\n- **O rastro é mais longo que o padrão.** Obturador de 720° e, no ícone, quatro cópias atrasadas um quadro cada, de 55% a 12% de opacidade, só atrás do movimento.\n\n- **A troca de cor fica escondida no rastro.** O verde vira vermelho em 3,32 s, no quadro mais rápido do arrasto.\n\n- **Um rebote só.** A pílula estica até 836 px e assenta em 801 px, cerca de 4%, sem oscilar.\n\n- **Nada para.** Depois de assentar, a pílula deriva até 35 px na horizontal, respira a 101,7% de escala, recua no arrasto e inclina 2°.\n\n- **Loop barato.** O trecho de 4,37 s toca duas vezes; o último quadro cai no mesmo azul do primeiro.\n\nDetalhes de cores, tempos e números: estilo.md. Cenas por tempo: 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 ajustada lado a lado com o original, quadro a quadro; textos em português, avatares ilustrados e monograma neutro no lugar do logo do autor"
    }
  ],
  "pacote": [
    {
      "pasta": "projeto/",
      "conteudo": "`ae/cenas.jsx` (o gerador comentado), `ae/telegram.aep` (o projeto montado) e `assets/` (os 6 PNGs que o script importa)"
    },
    {
      "pasta": "audio/",
      "conteudo": "`trilha.py` (o som inteiro), `eventos.json` (os 38 eventos), `mix.wav`, `relatorio-som.json` e `mesa/`, com o motor de mix `mesa.py` e o `mapa_padrao.py`"
    },
    {
      "pasta": "referencias/",
      "conteudo": "`estudo-da-referencia.md` (o edit original quadro a quadro, com cores, tempos e receita), `links.md` e `fora-do-pacote.md`"
    },
    {
      "pasta": "render.mp4",
      "conteudo": "o vídeo final"
    },
    {
      "pasta": "ae/cenas.jsx",
      "conteudo": "apaga o que houver no projeto aberto e monta tudo. No topo fica o bloco `CFG`, com textos, cores, fontes e a duração do loop. Ajudantes: `K` (chaves com influência de entrada e saída, ou linear e hold), `retang`, `circulo`, `texto`, `animador`, `mascaraCirculo`, `blur`, `rastro` (Directional Blur ligado à velocidade) e `eco` (cópias atrasadas que fazem o rastro só para trás). As cenas ficam em ordem dentro de `montar()`, com o segundo de cada chave comentado"
    },
    {
      "pasta": "ae/telegram.aep",
      "conteudo": "o resultado do script, pronto para abrir e renderizar"
    },
    {
      "pasta": "audio/trilha.py",
      "conteudo": "lê `eventos.json`, põe a música 10 dB abaixo antes da soma, coloca um efeito por evento pelo mapa padrão, reforça os efeitos ×4 e mixa para −14 LUFS"
    },
    {
      "pasta": "audio/eventos.json",
      "conteudo": "os tempos e tipos de cada evento (sobe, sai, item, ponto, pílula, cai, morph, notificação, desliza, clique…), escritos a partir das chaves do `.aep`"
    }
  ],
  "prompt": "Quero um loop quadrado de UI motion no mesmo método do projeto \"telegram-ilha\", que está em 07-videos/projetos/telegram-ilha/: peças que nascem uma da outra, respiro na cor da marca em cada troca e tudo entrando pelo desfoque.\n\nApp ou marca: {{APP}}\nSite oficial (para tirar cor, logo e fonte): {{SITE}}\nO que acontece na tela, em 3 peças (ex.: ícone › card › pílula com notificação): {{HISTORIA}}\nTextos da tela, em português: {{TEXTOS}}\nMúsica (arquivo e segundo de início): {{MUSICA}}\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 e abra projeto/ae/cenas.jsx: o bloco CFG, os ajudantes K, retang, texto, animador, blur, rastro e eco, e a ordem das cenas em montar(). Me diga em poucas linhas o que vai reaproveitar.\n\n2. Tire a identidade do app real: logo oficial em PNG ou SVG, a cor da marca para o respiro (em tom claro, como o azul #ACD3DC do Telegram) e um fundo neutro. Nada de sombra; profundidade só com desfoque e escala.\n\n3. Escreva a sequência como transferências antes de animar: de qual peça nasce a próxima e em que quadro. Toda troca grande passa pelo respiro: o fundo vira a cor da marca e o elemento novo nasce desfocado por cima. Me mostre a tabela tempo › peça › texto e espere meu ok.\n\n4. Construa copiando o projeto, sem editar o original. Mantenha a curva de saída rápida e chegada longa (5/90), o obturador de 720°, o eco atrás de quem anda rápido, a troca de cor no quadro mais rápido de um gesto e um único rebote de uns 4%. Depois de assentar, nada para: deriva, respiração e uma inclinação leve.\n\n5. Feche o loop: o último quadro tem de ser igual ao primeiro. A comp final empilha duas ou três cópias do trecho.\n\n6. Meça as batidas da música (librosa) e encaixe as trocas grandes perto delas. Escreva os eventos (tempo, tipo, volume, pan) num eventos.json e faça o som pelo audio/trilha.py: um efeito por peça que entra ou sai, música 10 dB abaixo antes da soma, final em −14 LUFS.\n\n7. Antes do render, me mostre uma folha de contato com 12 quadros, incluindo o meio dos movimentos, e confira: troca com corte seco, peça que surge do nada, tela parada e emenda do loop visível. Renderize a comp RECRIACAO em H.264, cole o som com o ffmpeg e entregue o MP4 com uma anotação do que mudou em relação ao projeto.",
  "campos": [
    "APP",
    "HISTORIA",
    "MUSICA",
    "SITE",
    "TEXTOS"
  ],
  "fonte": {
    "nome": "Clube do Motion",
    "url": "https://clubedomotion.com/projeto/?id=telegram-ilha",
    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
  }
}