{ "id": "clube-glass", "titulo": "Glass Tides", "categoria": "saas", "resumo": "filme de produto de 18 s, horizontal, no estilo do Spotify: um palco escuro de cantos arredondados sobre fundo verde, a interface do app recriada e uma única capa de disco, \"Glass Tides\", que atravessa o filme inteiro até virar textura dentro das letras de \"Find your rhythm\". É uma recriação: a referência é o filme que @brainextends gerou com o Claude Opus 5.5 e publicou no prompt-motion.com, a partir de um prompt em blocos que o autor colou inteiro. A nossa versão manteve a linha do tempo do prompt e corrigiu o que o original errava (títulos sobrepostos, dissoluções, barra de progresso parada, nenhum efeito sonoro, 30 qps). Tudo é um HTML só, com o quadro calculado pelo tempo (`window.seek(t)`), renderizado no Chrome a 60 qps com desfoque de movimento por subquadros. O autor: \"ficou muito bom e aprovado\".", "indicado": "marca ou startup apresentando um app ou produto digital; lançamento de recurso em vídeo curto horizontal para site, anúncio ou redes.", "estilo": [ "filme de produto", "interface recriada", "modo escuro", "objeto herói", "transferências", "cor da marca como evento", "sincronizado na batida" ], "ficha": { "formato": "1920×1080, 60 qps reais, 16:9, cor BT.709", "duracao": "18,0 s (1.080 quadros), sem narração", "motor": "html", "voz": "ver o guia de estilo", "musica": "ver o guia de estilo", "fontes": "ver o guia de estilo" }, "ferramentas": [ "Claude Code" ], "ficha_tecnica": { "Duração": "18,0 s (1.080 quadros), sem narração", "Formato": "1920×1080, 60 qps reais, 16:9, cor BT.709", "Ferramenta": "HTML + CSS + JavaScript num arquivo só, render com Playwright no Chrome sem janela, ProRes nos trechos e H.264 no final", "Desfoque de movimento": "4 subquadros por quadro, obturador de meio quadro, juntados no ffmpeg (`tmix`)", "Trilha": "\"Dancin (feat. Luvli) – Krono Remix\", Aaron Smith, 120 BPM; o drop da faixa cai no zoom da capa (8,30 s)", "Som": "47 efeitos em 7 famílias, sempre abaixo da música; −14,0 LUFS", "Referência": "filme Spotify \"Glass Tides\" de @brainextends no prompt-motion.com (30 qps, sem efeitos sonoros)" }, "etapas": [ { "titulo": "O roteiro", "texto": "**Resumo:** o filme não tem narração; o roteiro é a linha do tempo do prompt em blocos que gerou a referência, cena a cena, com o texto exato da tela. Os tempos abaixo já passaram pelo mapa de tempo, ou seja, são os tempos vistos no vídeo final. O texto da tela é em inglês, como no prompt original.\n\n## De onde veio a estrutura\n\nO prompt da referência tem oito blocos: entrega (formato, duração, 60 qps, fonte editável), direção de arte (palco, fundo, cores, uma fonte, nada de legenda externa ou marca d'água), arte (a capa \"Glass Tides\" de \"AURA\" e as capas secundárias), linha do tempo por segundo, player persistente, qualidade de movimento (molas sem quique, transferências, título que sai antes do próximo), áudio (eletrônica perto de 120 BPM, efeitos abaixo da música) e validação (`seek(t)` determinístico, subquadros, folhas de contato). A nossa versão seguiu a mesma linha do tempo e trocou cada dissolução por uma transferência.\n\n## Cenas por tempo\n\n | \n\n | #\n | Tempo (s)\n | Texto na tela\n | O que acontece\n\n | 1\n | 0,00–0,60\n | —\n | o logotipo cresce de 0 a 150 px no centro do palco, girando de −24° a 0°, com mola de passagem mínima\n\n | 2\n | 0,54–1,35\n | \"Spotify\" · \"Discover\" / \"new music\"\n | o ícone encolhe e sobe; \"Spotify\" sai de trás dele por máscara lateral; \"Discover\" (branco) e \"new music\" (verde) sobem por máscara e saem por cima antes da janela\n\n | 3\n | 1,51–2,30\n | \"Made for you\" · \"Recently played\"\n | a janela do app (barra lateral, busca, 3 capas, player) sobe inclinada (24° → 0°) e assenta com mola; as capas sobem em cascata; a identidade pequena voa até o lugar dela na barra lateral\n\n | 4\n | 2,39–3,30\n | \"New for you\"\n | a câmera aproxima nas 3 capas (escala 1 → 1,42); \"Made for you\" sai antes de \"New for you\" entrar no mesmo lugar; o player passa para a base do palco e a barra de progresso começa a andar\n\n | 5\n | 3,30–4,05\n | \"Fresh finds\"\n | as 3 capas viajam até as miniaturas da lista, uma de cada vez; a 4ª linha (Deep Focus) nasce com mola; a 1ª linha fica verde com equalizador animado\n\n | 6\n | 4,05–4,97\n | \"Every mood\" / \"Find what moves you\"\n | os textos da lista saem, as miniaturas crescem para 236 px e viram uma faixa horizontal na mesma ordem; a faixa desliza para a esquerda e sai em chicote com desfoque direcional\n\n | 7\n | 4,97–5,90\n | \"What do you want to play?\" → \"Glass Tides\" · \"Song · AURA\"\n | a lupa nasce como círculo e se estica até virar o campo; 11 letras digitadas em 0,3 s com cursor verde; o resultado desce com mola e é selecionado com um clique\n\n | 8\n | 5,90–6,55\n | \"Glass Tides\" · \"AURA\"\n | a miniatura do resultado é a própria capa herói: ela cresce até 360 px no centro e deriva enquanto espera\n\n | 9\n | 6,55–7,45\n | \"Glass Tides\" · \"AURA\" · \"A new frequency\" · botão \"Play\"\n | a capa vai para a esquerda; a coluna da direita entra em cascata; o Play chega com mola e é clicado em 7,28 s (afunda 6% e solta uma onda)\n\n | 10\n | 7,45–8,30\n | identidade escura \"Spotify\"\n | um círculo verde nasce do botão e cobre o palco em 0,46 s; a capa encolhe para um bloco de 232 px; a identidade preta com arcos verdes entra embaixo\n\n | 11\n | 8,26–10,10\n | —\n | o escuro volta crescendo de dentro da capa; **no drop (8,30 s)** a capa cresce de 236 para 1.700 px em 0,62 s e segue empurrando devagar; o player volta por cima, translúcido\n\n | 12\n | 9,78–11,14\n | \"Find your\" / \"rhythm\"\n | as letras aparecem em escala 2,5 preenchidas com a própria capa e encolhem até o tamanho final, como se a imagem se recolhesse para dentro da palavra; em 10,30 s ganham as cores finais (branco e degradê verde) e um brilho passa por \"rhythm\"\n\n | 13\n | 11,30–12,55\n | \"Made for your every day\" · \"Your sound, always evolving\"\n | Late Nights, Good Energy e Deep Focus sobem inclinadas em 3D; depois encolhem e Daily Mix 1, 2 e 3 entram pela direita, em leque\n\n | 14\n | 12,51–13,80\n | —\n | seis capas viram quatro: Daily Mix 2 e 3 tombam e recuam; Good Energy vira de costas e mostra a capa herói no verso; as quatro flutuam juntas em profundidade\n\n | 15\n | 13,80–15,30\n | —\n | as capas se fecham em volta do centro como um livro; o ícone nasce no mesmo ponto (14,30 s) com um brilho verde atrás e respira\n\n | 16\n | 15,30–18,00\n | \"Spotify\" · \"Discover new music\" / \"every day\"\n | o ícone vai para a esquerda; \"Spotify\" (118 px) entra por cortina macia sem nunca encostar nele; a linha final entra em 16,30 s; o conjunto cresce 1,8% até o fim\n\n## Momentos para a trilha\n\n- 0,30–7,30 s: pulso grave em cada tempo, introdução da faixa 8 dB mais alta.\n\n- 7,30–8,30 s: um compasso sem pulso, para a subida da própria faixa aparecer.\n\n- **8,30 s: drop no zoom da capa**, com whoosh e impacto.\n\n- 10,24 s: nota tonal (lá) quando as letras ganham cor.\n\n- 14,32 s: Ping Boom em lá quando o ícone nasce do centro.\n\n- 15,52 s: nota tonal (mi) na marca; a música sai em rampa de 16,4 s a 18,0 s.\n\nA lista completa dos 47 efeitos, com tempo, arquivo, família e volume, está em `audio/eventos.json`." }, { "titulo": "A identidade visual", "texto": "**Resumo:** palco quase preto de cantos arredondados sobre um fundo verde atmosférico que se move devagar, interface do Spotify recriada em HTML, Figtree no lugar da fonte do Spotify e o verde `#1ED760` como única cor de destaque. O movimento usa molas sem quique, transferências por posição e títulos por máscara; o filme roda a 60 qps com desfoque de movimento por subquadros. Números tirados do `index.html`, do `trilha.py` e do tutorial do projeto.\n\n## Palco e fundo\n\n | \n\n | Peça\n | Como é\n\n | Palco\n | 1536×810 (80% × 75% da tela) em (192, 156), centrado na horizontal e 21 px abaixo do centro; cantos de 44 px, fundo `#0b0c0e`, contorno interno de 1 px branco a 7%\n\n | Sombra do palco\n | larga, num div atrás do palco (o `clip-path` do palco cortaria a sombra)\n\n | Fundo externo\n | quatro gradientes: esmeralda luminoso no canto superior esquerdo (`rgba(46,232,120,.95)`), floresta nas laterais, quase preto embaixo (`#010302`); o centro deriva ±1,6% numa senoide lenta e o brilho sobe 22% quando o verde da marca toma o palco (7,5–8,5 s)\n\n | Grão\n | ruído de 256 px com semente fixa, 5% em `overlay`, deslocado a cada quadro; evita faixas no gradiente escuro depois da compressão\n\n | Brilho interno\n | radial verde a 7% no canto superior esquerdo do palco\n\n## Cores e fonte\n\n | \n\n | Token\n | Valor\n | Papel\n\n | Texto\n | `#fff`\n | títulos e marca\n\n | Secundário\n | `#a7a7ad`\n | apoio\n\n | Verde\n | `#1ED760`\n | destaque, botões, linha tocando\n\n | Degradê de \"rhythm\"\n | `#4ff08a → #1ed760 → #16b852`\n | palavra de destaque, com um brilho diagonal que passa\n\n- **Fonte: Figtree** (variável 300–900), a livre mais próxima da tipografia do Spotify. Pesos: 550 no apoio, 650–700 nos títulos, 750–850 na marca e no destaque. A marca \"Spotify\" é texto em Figtree 760 com tracking −0,035 em.\n\n- **Tamanhos de anúncio, não de apresentação:** títulos de 36–46 px, destaque de 66–74 px, marca de 118 px, apoio de 21 px.\n\n## Capas e ícones\n\n- **Capa herói \"Glass Tides\":** gerada no GPT Image 2.5 (seda líquida perolada e vidro derretido, dobra em S, lavanda, ciano, rosa, dourado e menta, sem texto) e ampliada para 2K para aguentar o zoom de 1.700 px.\n\n- **Seis capas em SVG 300×300**, cada uma com título em Figtree 900, um motivo geométrico próprio e rodapé \"SPOTIFY MIX\":\n\n | \n\n | Capa\n | Fundo\n | Motivo\n\n | Late Nights\n | mostarda `#EDB52B`\n | sol em dois tons, lua crescente e 3 estrelas\n\n | Good Energy\n | rosa `#F35B9C`\n | 18 raios em leque e 3 círculos concêntricos\n\n | Deep Focus\n | azul `#2B55E0`\n | 4 anéis finos e esfera com gradiente radial\n\n | Daily Mix 1\n | creme `#E6EBDA`\n | 10 barras de equalizador e \"1\" verde\n\n | Daily Mix 2\n | violeta `#8857F2`\n | grade 6×6 de pontos\n\n | Daily Mix 3\n | coral `#FF6A3C`\n | 5 ondas em traço grosso\n\n- **Logotipo** redesenhado em SVG (círculo verde e três arcos pretos com pontas redondas), com versão invertida para a identidade sobre o verde. Ícones de interface com traço de 2 px e pontas redondas.\n\n- Capas mudam de tamanho por `width/height`, não por `scale`, para texto e SVG ficarem nítidos de 32 px a 250 px.\n\n## Curvas e molas\n\n | \n\n | Nome no código\n | Curva\n | Uso\n\n | expo\n | saída exponencial\n | entrada de texto\n\n | inC\n | cúbica de entrada\n | saídas\n\n | smooth\n | `cubic-bezier(.65,0,.35,1)`\n | câmera e transferências\n\n | move\n | `cubic-bezier(.7,0,.2,1)`\n | capa que viaja\n\n | zoom\n | `cubic-bezier(.55,0,.1,1)`\n | o zoom do drop: o trecho mais rápido fica logo depois do bumbo\n\n | crit\n | mola criticamente amortecida, sem quique\n | janela, lupa, cartões\n\n | soft\n | mola com cerca de 2% de passagem\n | só na chegada da marca e do ícone\n\n- **Cascatas:** capas que sobem 0,06 s uma da outra; capas que viajam para a lista com 0,045 s entre elas; linhas da lista com 0,06 s.\n\n- **Títulos por máscara vertical:** entrada de 0,5 s, saída de 0,15–0,2 s, e o próximo só entra depois que o anterior saiu.\n\n- **Chicote da faixa de capas:** aceleração para a esquerda (900 px, potência 2,2) com desfoque direcional proporcional à velocidade. Sem esse desfoque, os 4 subquadros viram 4 cópias em degrau.\n\n## Transições\n\nCada troca é escrita como \"de quê para quê\" antes de animar: ícone que encolhe e vira a identidade pequena; identidade que voa para a barra lateral da janela; capas que viram miniaturas da lista; miniaturas que viram a faixa \"Every mood\" na mesma ordem, sem cruzar caminhos; miniatura do resultado da busca que vira a capa grande; botão Play que infla até cobrir o palco de verde (círculo de 27 px até 1.020 px em 0,46 s); escuro que volta crescendo de dentro da capa no drop; capa gigante que se recolhe para dentro das letras de \"Find your rhythm\"; capas em 3D que se fecham em volta do ícone como um livro.\n\nQuando um elemento precisa sair de um grupo transformado (janela inclinada, câmera), uma cópia idêntica assume no palco no instante em que o grupo está plano e parado. A troca não aparece.\n\n## 3D\n\nContêiner com `perspective: 1500px` e `preserve-3d`; cada capa tem duas faces com `backface-visibility: hidden` e sombra por face. As quatro capas flutuam ±7 px na mesma onda (período de 1,7 s), defasadas 0,45 rad, e o grupo inteiro orbita de +5° a −5° em Y.\n\n## Render\n\n60 qps reais. Cada quadro é a média de 4 capturas espalhadas em meio intervalo (`--sub 4 --shutter 0.5`): o ffmpeg recebe 240 qps, faz `tmix=frames=4` e pega um quadro a cada quatro. Parado continua nítido; o que se move ganha um rastro contido.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Dancin (feat. Luvli) – Krono Remix\", Aaron Smith; deep house a 120 BPM (beat_this)\n\n | Encaixe\n | drop da faixa em 63,62 s; início em 55,32 s para o drop cair no zoom de 8,30 s; batidas do filme em 0,30 + 0,5·k s\n\n | Introdução\n | fica cerca de 16 dB abaixo do refrão; `INTRO_DB = 8`: sobe 8 dB até 6,3 s, desce para +2 dB até 8,26 s e volta a 0 no drop\n\n | Pulso\n | bumbo grave sintetizado (seno de 110 a 48 Hz, passa-baixa de 180 Hz) em cada tempo de 0,30 s a 7,30 s; para um compasso antes do drop\n\n | Saída\n | rampa de 16,4 s a 18,0 s, com uma nota tonal soando sob a marca\n\n## Sound design e mix\n\n | \n\n | Família\n | Quando\n | Arquivo\n | Volume\n\n | pop\n | algo entra (ícone, linhas, busca, resultado, Play, capas)\n | `transitions-bigcasualpop.wav`; os pequenos em cascata com `pop-up-sound-pack.wav`, tom subindo 5–6% por item\n | 0,12–0,42\n\n | clique\n | seleção do resultado e clique no Play\n | `tap.wav`\n | 0,55–0,60\n\n | digitação\n | 11 letras da busca\n | procedural (ruído + seno de 1,9–2,6 kHz, 50 ms)\n | baixo\n\n | whoosh\n | troca de tela, câmera, capa viajando\n | `motion-whoosh-swipe.wav`, `rm-whoosh.wav`, `cinematic-whoosh(-2).wav`, passa-baixa de 7–9 kHz e pan para o lado do movimento\n | 0,26–0,46\n\n | whoosh invertido\n | arte se condensando nas letras\n | `cinematic-whoosh.wav` ao contrário\n | 0,34\n\n | impacto\n | drop e zoom\n | `whoosh-hit-2.wav`\n | 0,62\n\n | marca\n | ícone nasce, verde, letras ganham cor, marca final\n | tonais Ping Boom e Clarity em lá e mi, mais `activating.wav` no verde\n | 0,28–0,55\n\n- Cada efeito entra em `evento − pico do arquivo`.\n\n- Medido no resultado: efeitos sempre abaixo da música (mediana −17 dB, o mais alto −6,8 dB, em janelas de 300 ms).\n\n- **Final:** `loudnorm` em duas passagens para −14 LUFS; pico −2,5 dBFS.\n\n## O que é \"humano\" neste vídeo\n\n- A capa deriva e cresce um pouco enquanto espera, em vez de parar e sair num golpe.\n\n- O ícone respira antes de ir para a marca, e o conjunto final cresce 1,8% até o último quadro.\n\n- O botão Play afunda 6% no clique e solta uma onda branca.\n\n- A palavra \"Spotify\" entra por uma cortina de borda macia e nunca encosta no ícone." }, { "titulo": "A montagem em HTML", "texto": "| \n\n | Arquivo\n | O que faz\n\n | `html/index.html`\n | `apply(t)` recalcula cada elemento a partir do tempo, cena por cena, com comentário em cada bloco; `window.seek(t)` espera fontes e imagem e chama `apply`. No fim do script fica a tabela `WARP`, o mapa de tempo que leva os eventos para a batida da música\n\n | `render.mjs`\n | abre o HTML no Chrome sem janela. `--stills 1.0,4.5,8.4 --dir nome` grava quadros parados para conferir; `--full --sub 4 --shutter 0.5 --from 0 --to 2` renderiza um trecho com subquadros\n\n | `render-trechos.sh`\n | renderiza o filme em trechos de 2 s (navegador novo a cada trecho, até 3 tentativas), junta sem recomprimir, põe o áudio e gera o MP4; trecho que já existe é pulado\n\n | `verificar.py`\n | confere o MP4: quadros, intervalo entre quadros, duração, qps, cor, LUFS e pico\n\n | `folha.py`\n | monta a folha de contato de uma pasta de quadros\n\n | `audio/trilha.py`\n | lê a tabela `WARP` direto do HTML, posiciona os efeitos pelo pico de cada arquivo, cria o pulso grave da abertura, ajusta o volume da introdução e normaliza em duas passagens para −14 LUFS\n\n | `audio/analisar.py`\n | mede batidas e tempos fortes com o beat_this e imprime a energia por compasso, para achar o drop de outra faixa\n\n- **Junte as pastas:** copie `audio/` para dentro de `projeto/`. O `trilha.py` lê o mapa de tempo em `../html/index.html` e o `render-trechos.sh` procura `audio/mix.wav`.\n\n- **Ver no navegador:** abra `html/index.html?play` no Chrome para tocar em tempo real, ou `html/index.html?t=8.4` para parar num instante.\n\n- **Preparar o render:** instale Node, ffmpeg e o `playwright-core` (`npm i playwright-core`). No topo do `render.mjs`, troque a linha do `createRequire` pelo caminho do seu `playwright-core` e o `executablePath` pelo Chrome da sua máquina.\n\n- **Quadros de conferência:** `node render.mjs --stills 1.0,4.5,8.4 --dir teste`, depois `python folha.py revisao/teste revisao/folha.jpg`.\n\n- **Som:** nas primeiras linhas do `audio/trilha.py`, aponte `PREM` para `audio/sfx/premium` e `TON` para `audio/sfx/tonais`, e rode `python audio/trilha.py` (gera `audio/mix.wav` e `audio/eventos.json`). Precisa de Python com numpy e scipy.\n\n- **Vídeo:** `bash render-trechos.sh v5 audio/mix.wav` gera `render/glass-tides-v5.mp4`. O filme inteiro leva cerca de 5 min; a prévia sem subquadros, cerca de 80 s. Depois, `python verificar.py render/glass-tides-v5.mp4`.\n\n- **Corrigir só uma cena:** copie a pasta de trechos da versão anterior, apague só os trechos afetados e rode de novo; os outros são reaproveitados.\n\n**Pegadinhas:** sombra com `filter: drop-shadow` achata o 3D e espelha o verso das capas (use `box-shadow` em cada face); `visibility: visible` num filho aparece mesmo com o pai escondido (esconda com `display: none`); o desfoque dos subquadros só aparece no arquivo final, então confira o render completo e não só a prévia." }, { "titulo": "As decisões de direção", "texto": "- **Um objeto herói atravessa tudo.** A mesma capa é miniatura da busca, capa grande, bloco no verde, zoom gigante e textura dentro das letras. Ela nunca some para outra aparecer no lugar.\n\n- **Toda troca de cena é uma transferência.** O que sai vira o que entra: capas viram miniaturas da lista, a lista vira a faixa horizontal, o botão Play infla e vira o palco verde, o escuro volta crescendo de dentro da capa. Não há dissolução de tela cheia.\n\n- **Um elemento persistente costura as cenas curtas.** O player fica na base do palco de 2,3 s a 14,3 s, com a barra de progresso andando de verdade.\n\n- **O título sai antes de o próximo entrar** no mesmo lugar: máscara vertical, entrada de 0,5 s e saída de 0,15 a 0,2 s.\n\n- **Nada para morto.** A capa deriva enquanto espera, o ícone respira, as capas em 3D orbitam juntas e o fundo externo se move devagar.\n\n- **A cor da marca é um evento.** O verde nasce do botão Play e o escuro volta de dentro da capa no drop.\n\n- **O drop cai no maior gesto:** o zoom da capa em 8,30 s, no primeiro bumbo do refrão.\n\n- **Mapa de tempo para a grade da música.** Cada cena é animada no tempo que pede, e uma curva leva os eventos à batida ou à colcheia mais próxima: antes, 7 de 25 eventos caíam perto da batida; depois, 20 de 25 caem na colcheia.\n\n- **Família de som por ação.** Pop quando algo entra, clique em botão, digitação no campo, whoosh na troca de tela, impacto no drop e nota no tom quando aparece a marca.\n\n- **Revisão em três passadas** (quadro parado, movimento e olho externo) e conferência do arquivo final.\n\nDetalhes de cores, curvas e som: estilo.md. Cenas por tempo e texto na tela: roteiro.md. Para fazer um filme no mesmo estilo com o seu produto: PROMPT.md." }, { "titulo": "As versões até o final", "texto": "| \n\n | Versão\n | O que mudou\n\n | v1\n | primeiro render completo; parou perto do quadro 1.030 porque o Chrome recusou uma captura; não entregue\n\n | v2\n | mapa de tempo na batida, 11 defeitos da primeira revisão corrigidos e render em trechos de 2 s\n\n | v3\n | desfoque direcional no chicote da faixa de capas (os 4 subquadros viravam cópias em degrau), ícone que não cruza mais o \"Discover\", lupa que nasce depois das capas; aprovada com a trilha \"Vibe Check\" (YouTube Audio Library)\n\n | **v4**\n | a mesma imagem da v3, com a trilha trocada a pedido por \"Dancin (Krono Remix)\" da playlist do autor, início em 55,32 s da faixa para o drop cair em 8,30 s e introdução 8 dB mais alta; nenhum quadro mudou" } ], "pacote": [ { "pasta": "projeto/", "conteudo": "`html/index.html` (o filme inteiro), `html/assets/` (fonte Figtree, a capa `hero.jpg` e a versão 2K `hero-2k.png`), `render.mjs`, `render-trechos.sh`, `verificar.py`, `folha.py`" }, { "pasta": "audio/", "conteudo": "`trilha.py` (música + pulso + efeitos + mix), `analisar.py` (batidas e energia da faixa), a música, as batidas medidas (`dancin-krono.json`), a lista dos 47 eventos (`eventos.json`), o mix final, a faixa só de efeitos e `sfx/` com os 13 arquivos de efeito usados" }, { "pasta": "referencias/", "conteudo": "o vídeo original (`ref.mp4`), as folhas de contato dele a 4 qps, a leitura do Gemini com áudio e o estudo da referência com o resumo do prompt em blocos" }, { "pasta": "render.mp4", "conteudo": "o filme final (v4)" }, { "pasta": "html/index.html", "conteudo": "`apply(t)` recalcula cada elemento a partir do tempo, cena por cena, com comentário em cada bloco; `window.seek(t)` espera fontes e imagem e chama `apply`. No fim do script fica a tabela `WARP`, o mapa de tempo que leva os eventos para a batida da música" }, { "pasta": "render.mjs", "conteudo": "abre o HTML no Chrome sem janela. `--stills 1.0,4.5,8.4 --dir nome` grava quadros parados para conferir; `--full --sub 4 --shutter 0.5 --from 0 --to 2` renderiza um trecho com subquadros" }, { "pasta": "render-trechos.sh", "conteudo": "renderiza o filme em trechos de 2 s (navegador novo a cada trecho, até 3 tentativas), junta sem recomprimir, põe o áudio e gera o MP4; trecho que já existe é pulado" }, { "pasta": "verificar.py", "conteudo": "confere o MP4: quadros, intervalo entre quadros, duração, qps, cor, LUFS e pico" }, { "pasta": "folha.py", "conteudo": "monta a folha de contato de uma pasta de quadros" }, { "pasta": "audio/trilha.py", "conteudo": "lê a tabela `WARP` direto do HTML, posiciona os efeitos pelo pico de cada arquivo, cria o pulso grave da abertura, ajusta o volume da introdução e normaliza em duas passagens para −14 LUFS" }, { "pasta": "audio/analisar.py", "conteudo": "mede batidas e tempos fortes com o beat_this e imprime a energia por compasso, para achar o drop de outra faixa" } ], "prompt": "Quero um filme de produto horizontal no mesmo método do projeto \"Glass Tides\", que está em 07-videos/projetos/glass/, com o meu produto.\n\nProduto ou marca: {{PRODUTO}}\nSite oficial (para tirar cores, fonte e logo): {{SITE}}\nObjeto herói que atravessa o filme (capa, produto, cartão, tela): {{OBJETO_HEROI}}\nMensagem final e chamada: {{CHAMADA}}\nDuração: {{DURACAO}} (a referência tem 18 s) · Formato: {{FORMATO}} (a referência é 1920×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, nesta ordem: LEIA-ME.md, estilo.md e roteiro.md. Depois abra projeto/html/index.html e veja como apply(t), window.seek(t), as curvas (expo, smooth, move, crit, soft), maskLine() e a tabela WARP funcionam; leia também render.mjs, render-trechos.sh e audio/trilha.py. Me explique em poucas linhas o que você vai reaproveitar.\n\n2. Tire a identidade do assunto, não da imaginação. Abra o site oficial, pegue o logo, as cores do CSS e a fonte (ou a livre mais próxima, como o Figtree fez para o Spotify). Se o objeto herói for uma imagem, gere em alta resolução, sem texto, e amplie para aguentar o maior zoom; as peças secundárias podem ser SVG desenhado no próprio HTML.\n\n3. Escreva o prompt do meu filme no molde em blocos antes de codar: (formato, duração, 60 qps, áudio, fonte editável), (palco, fundo, cores com hex, uma fonte, tamanhos de anúncio), (o objeto herói e as peças secundárias), (um parágrafo por trecho de ~1 s com o texto exato), (o elemento que costura as cenas, como o player), ,