{
  "id": "clube-drive-upload",
  "titulo": "O cursor conduz",
  "categoria": "saas",
  "resumo": "vídeo quadrado de 11 s a 60 qps, sem narração, no estilo Startup SaaS, que conta o fluxo de upload do Google Drive com um componente virando o próximo: o botão \"New\" vira o menu, o menu vira um cartão pequeno, o cartão vira o diálogo, o diálogo vira o progresso, e a cena escura inteira encolhe numa esfera que vira o check verde. Um cursor de mão guia o olho o tempo todo, e o clique no botão vira o mundo para o modo escuro em nove quadros. A comp 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": "demonstração de fluxo de app ou SaaS (upload, cadastro, checkout, envio), anúncio de recurso, tutorial curto de interface, abertura de produto com cursor.",
  "estilo": [
    "Startup SaaS",
    "cursor como fio condutor",
    "componente que vira o próximo",
    "modo escuro no clique",
    "lente que encolhe até o check",
    "tipografia que se acomoda"
  ],
  "ficha": {
    "formato": "1080×1080, 60 qps, desfoque de movimento com obturador de 270° e 16 amostras",
    "duracao": "10,98 s (659 quadros), sem narração",
    "motor": "ae",
    "voz": "ver o guia de estilo",
    "musica": "ver o guia de estilo",
    "fontes": "Google Sans Flex (Regular e Medium), a família livre mais próxima da fonte do Drive"
  },
  "ferramentas": [
    "Claude Code",
    "After Effects"
  ],
  "ficha_tecnica": {
    "Duração": "10,98 s (659 quadros), sem narração",
    "Formato": "1080×1080, 60 qps, desfoque de movimento com obturador de 270° e 16 amostras",
    "Ferramenta": "After Effects: um script ExtendScript (`cenas.jsx`) monta, no projeto aberto, a comp `RECRIACAO` e a precomp `CENA ESCURA`; a cada execução refaz as duas e reaproveita os assets já importados",
    "Assets": "o ícone oficial do Google Drive (SVG da Wikimedia) separado em três peças por `fazer_logo_drive.py`, cursor de mão do macOS (PNG livre da Wikimedia); ícones do menu, arquivo, filmes e check desenhados como camadas de forma",
    "Fonte": "Google Sans Flex (Regular e Medium), a família livre mais próxima da fonte do Drive",
    "Trilha": "instrumental de \"Wow.\", de Post Malone (voz separada com o Demucs), a partir de 19,2 s, a batida cheia",
    "Som": "44 eventos marcados na comp, um efeito por ação de interface, sem tonais; −14,0 LUFS e pico verdadeiro de −1,3 dBFS",
    "Referência": "edit \"Google Drive in a premium motion\", de @illdari (12/08/2026), estudado quadro a quadro",
    "Arquivo final": "MP4 H.264 com áudio AAC, 8,5 MB"
  },
  "etapas": [
    {
      "titulo": "O roteiro",
      "texto": "**Resumo:** o vídeo não tem narração; o roteiro é o fluxo de upload, tela por tela, com o texto que aparece em cada uma e os tempos do `cenas.jsx`. Os textos ficam no bloco `TX`. Com outro app, mantenha a regra: o cursor justifica cada troca e o mesmo componente muda de forma do começo ao fim.\n\n## De onde veio a estrutura\n\nO edit estudado conta em 11 s o upload de um arquivo no Drive: logo, botão, clique, menu, arquivo, nome digitado, progresso, check e uma frase de marca. Este projeto mantém as telas, os tempos e o cursor, com texto de exemplo nosso no menu e no campo digitado.\n\n## Cenas e texto na tela\n\n | \n\n | Tempo (s)\n | Tela\n | Texto na tela\n\n | 0,00–1,32\n | branco com nuvens pastel; o logo do Drive se monta peça por peça, girando\n | —\n\n | 1,32–2,15\n | o nome se escreve ao lado do logo; tudo gira e se dissolve\n | \"Drive\"\n\n | 2,15–2,78\n | o botão nasce de uma mancha azul; o cursor sobe até ele\n | \"+ New\"\n\n | 2,78–3,25\n | clique: o fundo escurece, um anel azul se abre e o botão vira o cartão do menu\n | —\n\n | 2,98–3,94\n | os itens entram um por um; o cursor faz arcos e o destaque sobe pelas linhas\n | \"Upload file\", \"Scan document\", \"Take photo\", \"Meu perfil\"\n\n | 3,94–4,98\n | clique em \"Upload file\": o menu vira um cartão pequeno; o arquivo sobe e entra nele\n | \"Upload file\"\n\n | 5,00–6,51\n | o cartão vira uma barra azul e depois o campo do diálogo; a frase se escreve com a seleção azul\n | \"New Folder\", \"Send the project file via DM\", \"Cancel\", \"Upload\"\n\n | 6,51–7,55\n | clique em \"Upload\": o diálogo vira o cartão de progresso; as barras verdes crescem\n | \"Your file is uploading...\"\n\n | 7,55–7,87\n | a cena escura vira uma esfera que encolhe sobre o branco até a bolinha verde\n | —\n\n | 7,74–8,62\n | o check se desenha; \"Done\" sobe em onda e cai letra por letra\n | \"Done\"\n\n | 8,59–10,40\n | a frase final se acomoda em duas linhas e apaga\n | \"Keep everything\", \"Share anything.\"\n\n | 10,40–10,98\n | branco\n | —\n\n## Momentos para o som\n\n- A base com hi-hat entra no começo, 13 dB abaixo do nível do arquivo, e sai com fade de 0,6 s; os efeitos de interface ficam na frente.\n\n- Um efeito por ação: pop no logo nascendo e nas peças encaixando, whoosh no giro, brilho no logo pronto, uma tecla por letra de \"Drive\", saída do texto, pílula do botão, subida do cursor, clique e morph, pop por item do menu, teclas no hover, clique e encolhimento do menu, subida e pouso do arquivo, abertura do diálogo, digitação, clique em \"Upload\", carregamento, whoosh com o pico no fim da esfera, check, letras do \"Done\" e da frase final, e a saída.\n\n- Sem tonais: o tom da base não foi confirmado."
    },
    {
      "titulo": "A identidade visual",
      "texto": "**Resumo:** começo branco com nuvens pastel nas cores do Google, miolo preto com cartões quase pretos, borda cinza fina e halo azul-escuro, azul de ação `#2C70F7`, barras verdes de progresso e um check verde-neon. Google Sans Flex em todo o texto. Números tirados do `cenas.jsx` (q = quadro a 60 qps).\n\n## Palco\n\n | \n\n | Peça\n | Como é\n\n | Tela\n | 1080×1080, 60 qps\n\n | Desfoque de movimento\n | obturador de 270°, fase −135°, 16 amostras, limite adaptativo 128\n\n | Montagem\n | comp `RECRIACAO` (fundo branco, nuvens, logo, cursor e final) com a precomp `CENA ESCURA` no meio (botão, menu, upload, diálogo e progresso)\n\n | Câmera\n | não há: o movimento vem do cursor, do halo e das nuvens\n\n## Cores\n\n | \n\n | Peça\n | Valor\n\n | Fundo claro\n | branco, com nuvens `#C3D7FB` (760 px), `#FBEDB2` e `#C9EED3` (720 px), desfoque 280, opacidade 60%, `wiggle(0.3, 60)`\n\n | Fundo escuro\n | preto, entrando a 24%, 77% e 100% entre 2,78 e 2,95 s\n\n | Cartão\n | branco no botão, `#2A2D31` no meio do clique, `#050505` no escuro; traço `#55595E` de 2,5 px; barra azul `#2C70F7` no meio do caminho até o campo `#090909`\n\n | Halo\n | `#2C70F7` no branco, `#081A3A` no escuro, desfoque 90, 110 px maior que o cartão\n\n | Anel do clique\n | traço `#2F5FD0` de 70 px, desfoque 120\n\n | Destaques\n | hover do menu `#102347`; hover de \"Upload\" `#11306A`; seleção do texto `#2C70F7` a 55%\n\n | Upload\n | arquivo em duas folhas, azul `#3E7CF2` e verde `#2DB84B`; filmes `#E0313F`; barras `#4ADE4A`\n\n | Final\n | bolinha `#33F233` de 185 px com check `#0A0A0A`; \"Done\" `#2FD12F`; frase em `#111111`, segunda palavra entrando em `#9AA0A6`, letras novas em `#6595EB`\n\n## Fontes\n\n | \n\n | Fonte\n | Onde\n\n | Google Sans Flex Regular\n | \"Drive\" (ajustado a 272 px de largura), botão \"New\", menu, diálogo, progresso e frase final\n\n | Google Sans Flex Medium\n | \"Done\"\n\n## Cena a cena\n\n | \n\n | Cena\n | Números\n\n | Logo (0–2,15 s)\n | peças de 1.600 px a 11,7%; o null do logo gira de 100° a 395° com curva contínua; a peça azul nasce de 0 em 9 q; a amarela (0,80 s) e a verde (0,93 s) chegam de 62 px do encaixe em 11 q; o logo desliza para a esquerda entre 1,36 e 1,84 s\n\n | \"Drive\"\n | letra a letra a partir de 1,32 s, 5 q entre letras, 12 q cada, com desfoque 10 e tracking 40 zerando\n\n | Saída do logo (1,92–2,15 s)\n | escala X de 100 para 30% (o giro em Y simulado pela largura), desfoque 35 e opacidade a zero\n\n | Botão (2,15–2,84 s)\n | nasce de 80% com desfoque 40 em 0,25 s; o \"+\" gira de 45° a 0°; o cursor sobe de y 1.160 a 592 entre 2,33 e 2,74 s; clique com o cursor a 85% e o botão a 95%\n\n | Modo escuro (2,78–3,16 s)\n | fundo a preto em 9 q; anel de 300 a 1.150 px entre 2,84 e 3,16 s; o cartão cresce para 652×522 até 3,25 s com curva contínua\n\n | Menu (2,98–4,24 s)\n | quatro linhas a cada 11 q, ícone entrando 10 px da esquerda em 8 q e texto letra a letra; o destaque sobe pelas linhas entre 3,42 e 3,86 s; no clique (3,94 s) os outros itens somem com desfoque 10 em 8 q e o cartão vira 328×328\n\n | Upload (4,38–5,32 s)\n | o arquivo sobe de y 1.150 a 506 em 0,48 s girando de −12° a 0°; o cartão estica para a barra azul de 866×104 e escurece no campo de 850×112\n\n | Diálogo (5,22–6,62 s)\n | a frase se escreve em 0,33 s, uma letra por quadro, com a seleção azul na ponta e o cursor de texto piscando antes; clique em \"Upload\" em 6,51 s\n\n | Progresso (6,56–7,55 s)\n | o cartão cresce para 855×374; filmes entram de baixo em 0,32 s; barras crescem de 6,85 a 7,20 s e de 6,92 a 7,25 s\n\n | Esfera (7,53–7,87 s)\n | CC Lens com tamanho de 105 para 44, 12,5 e 0 e convergência de 0 para 60; tinta verde de 7,70 a 7,79 s\n\n | Check e \"Done\" (7,74–8,62 s)\n | bolinha de 140 para 100% com desfoque 18; check desenhado entre 7,86 e 8,00 s; \"Done\" sobe 24 px em onda (4 q por letra), escurece e cai 54 px a partir de 8,17 s; a bolinha some entre 8,43 e 8,62 s\n\n | Frase final (8,59–10,40 s)\n | a primeira palavra entra a 120% com desfoque 15 e vai para a esquerda; a segunda entra cinza, mais alta e à direita, e desce até a linha; a segunda linha se escreve a partir de 9,30 s, 0,04 s por letra; tudo apaga entre 10,00 e 10,40 s\n\n## O que é \"humano\" neste vídeo\n\n- O cursor viaja com curva contínua entre os pontos e só segura onde vai clicar; os cliques encolhem a mão para 85% por 0,09 s.\n\n- O cartão passa pelas formas intermediárias com curva contínua, sem parar entre um tamanho e outro.\n\n- As nuvens nunca param: deriva lenta mais a troca de canto entre as cenas.\n\n- A frase final se acomoda em alturas diferentes antes de assentar, em vez de entrar alinhada."
    },
    {
      "titulo": "A montagem no After Effects",
      "texto": "| \n\n | Arquivo\n | O que faz\n\n | `ae/cenas.jsx`\n | no topo ficam a fonte e o bloco `TX` (marca, botão, itens do menu, diálogo, frase digitada, progresso, \"Done\" e a frase final). `K` grava chaves com influência, `\"H\"` (segura) e `\"A\"` (curva contínua); `entra` e `sai` fazem a entrada e a saída padrão pelo desfoque; `anim` cria animadores de texto com seletor por expressão, e `eIn` e `eOut` dão a onda letra a letra. Um único retângulo (`Cartao`) carrega o botão, o menu, o cartão pequeno, a barra, o campo e o progresso. A lente da esfera é um CC Lens na precomp escura. Cada evento vira um marcador na comp\n\n | `ae/google-drive-premium.aep`\n | o resultado do script, pronto para abrir e renderizar\n\n | `ae/fazer_logo_drive.py`\n | desenha as três peças do ícone (azul, amarela e verde) em PNGs de 1.600 px na mesma tela, a partir do SVG oficial\n\n | `audio/trilha.py`\n | põe a base 13 dB abaixo, toca um efeito por evento pelo mapa padrão (pop no logo nascendo, whoosh no giro e na esfera) 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- **Fonte:** instale Google Sans Flex (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/`.\n\n- **Abrir:** `projeto/ae/google-drive-premium.aep`. Se o AE pedir arquivos, aponte para `projeto/assets/`.\n\n- **Adaptar:** troque o `TX` e as imagens e rode File › Scripts › Run Script File › `cenas.jsx` com o projeto aberto (ou num projeto novo). Ele refaz `RECRIACAO` e `CENA ESCURA` em cerca de 2 s; salve o projeto depois.\n\n- **Som:** no topo do `trilha.py`, aponte o `sys.path.insert` para a pasta `audio/mesa`, ponha a base em `audio/musica.wav` 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. Mudou um tempo no script? Os marcadores da comp mostram os eventos novos; atualize o `eventos.json`.\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:** para a esfera ficar verde no fim, use Tint; um Fill com opacidade 0 apaga a camada inteira. No CC Lens, o diâmetro do círculo é cerca de 15,2 px por unidade de Size: 105 cobre a tela até os cantos, 44 dá a esfera de 674 px e 12,5 a bolinha do check. A seleção azul do campo segue o fim do texto por `sourceRectAtTime` e `toComp`. O `aerender` não aceita caminho com acento."
    },
    {
      "titulo": "As decisões de direção",
      "texto": "- **O cursor diz para onde olhar.** Ele sobe até o botão, faz arcos com rastro, passa pelos itens do menu, desce para buscar o arquivo e clica em \"Upload\"; cada troca tem um gesto que a justifica.\n\n- **Um retângulo só.** Botão, menu, cartão, barra, campo e progresso são a mesma camada mudando de tamanho, raio e cor, em 10 a 14 quadros por troca.\n\n- **O clique muda o clima.** O fundo vai de branco a preto em nove quadros, passando por cinza, com um anel azul se abrindo do botão.\n\n- **A esfera fecha a sequência.** A cena escura inteira encolhe numa lente bojuda até a bolinha verde, e a bolinha vira o check.\n\n- **Texto que se monta.** \"Drive\" letra a letra com o espaçamento fechando, \"Done\" em onda subindo e caindo, e a frase final com a segunda palavra entrando cinza e mais alta, descendo até a linha.\n\n- **Nuvens que trocam de canto.** Três manchas pastel nas cores do Google mudam de lugar a cada cena e deixam o branco vivo sem câmera.\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 fluxo de 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 texto de exemplo nosso no menu e no campo digitado"
    }
  ],
  "pacote": [
    {
      "pasta": "projeto/",
      "conteudo": "`ae/cenas.jsx` (o gerador comentado), `ae/google-drive-premium.aep` (o projeto montado), `ae/fazer_logo_drive.py` (separa o ícone em três peças) e `assets/` (SVG e PNGs do logo, cursor)"
    },
    {
      "pasta": "audio/",
      "conteudo": "`trilha.py` (o som inteiro), `eventos.json` (os 44 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": "`estudo-da-referencia.md` (o edit original decupado quadro a quadro, com a receita), `links.md` e `fora-do-pacote.md`"
    },
    {
      "pasta": "render.mp4",
      "conteudo": "o vídeo final"
    },
    {
      "pasta": "ae/cenas.jsx",
      "conteudo": "no topo ficam a fonte e o bloco `TX` (marca, botão, itens do menu, diálogo, frase digitada, progresso, \"Done\" e a frase final). `K` grava chaves com influência, `\"H\"` (segura) e `\"A\"` (curva contínua); `entra` e `sai` fazem a entrada e a saída padrão pelo desfoque; `anim` cria animadores de texto com seletor por expressão, e `eIn` e `eOut` dão a onda letra a letra. Um único retângulo (`Cartao`) carrega o botão, o menu, o cartão pequeno, a barra, o campo e o progresso. A lente da esfera é um CC Lens na precomp escura. Cada evento vira um marcador na comp"
    },
    {
      "pasta": "ae/google-drive-premium.aep",
      "conteudo": "o resultado do script, pronto para abrir e renderizar"
    },
    {
      "pasta": "ae/fazer_logo_drive.py",
      "conteudo": "desenha as três peças do ícone (azul, amarela e verde) em PNGs de 1.600 px na mesma tela, a partir do SVG oficial"
    },
    {
      "pasta": "audio/trilha.py",
      "conteudo": "põe a base 13 dB abaixo, toca um efeito por evento pelo mapa padrão (pop no logo nascendo, whoosh no giro e na esfera) e mixa para −14 LUFS"
    },
    {
      "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 \"Google Drive, o cursor conduz o upload\", que está em 07-videos/projetos/drive-upload/: um fluxo de app contado por um cursor e por um único componente que muda de forma.\n\nProduto e logo (SVG oficial, se tiver): {{PRODUTO}}\nSite oficial (cores, fonte e telas reais): {{SITE}}\nFluxo, passo a passo (ex.: botão → menu → escolher → preencher → enviar → pronto): {{FLUXO}}\nTextos exatos de cada tela (botões, itens, campo digitado, mensagem de progresso): {{TEXTOS}}\nFrase final, em duas linhas: {{FRASE}}\nClima no clique: modo escuro como a referência ou outra troca: {{CLIMA}}\nMúsica (base leve com batida marcada): {{MUSICA}}\nDuração: {{DURACAO}} (a referência tem 11 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 TX, as ajudantes K (com \"H\" e \"A\"), entra, sai, anim, eIn e eOut, o retângulo único Cartao com todas as formas do fluxo, a lente CC Lens na CENA ESCURA, o cursor e os marcadores de evento. Me diga em poucas linhas o que vai reaproveitar.\n\n2. Tire a identidade do produto: logo oficial separado em peças (como o fazer_logo_drive.py faz), cores do site, fonte, nomes reais dos botões e menus. Nada de botão ou cor inventados.\n\n3. Escreva o fluxo tela a tela, com o tempo de cada troca, o gesto do cursor que justifica cada uma e o texto exato, no molde do roteiro.md. Uma ação nova a cada 0,4 a 0,8 s. Me mostre e espere meu ok.\n\n4. Meça a música e prenda os momentos fortes às batidas: logo pronto, clique que muda o clima, arquivo entrando, envio, esfera e frase final.\n\n5. Construa copiando o projeto, sem editar o original. Regras: o mesmo retângulo carrega todas as telas do miolo, mudando tamanho, raio e cor em 10 a 14 quadros; entrada e saída pelo desfoque; o cursor com curva contínua e clique que encolhe a mão; a cena inteira fecha numa esfera que vira o sinal de pronto. Rode o cenas.jsx e me mostre uma folha de contato com 12 quadros, incluindo o meio do clique e da esfera.\n\n6. Revise antes do render: troca de tela sem gesto do cursor, componente que some em vez de virar o próximo, texto cortado no cartão, cursor parado longe do que vai clicar.\n\n7. Som: rode audio/trilha.py na Mesa com os eventos dos marcadores, um efeito por ação de interface e a base abaixo deles, 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": [
    "CLIMA",
    "DURACAO",
    "FLUXO",
    "FORMATO",
    "FRASE",
    "MUSICA",
    "PRODUTO",
    "SITE",
    "TEXTOS"
  ],
  "fonte": {
    "nome": "Clube do Motion",
    "url": "https://clubedomotion.com/projeto/?id=drive-upload",
    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
  }
}