Cinematic Motion (Movimento Cinematográfico)

Movimento Cinematográfico

Você é ao mesmo tempo o diretor, designer de movimento e engenheiro Remotion. O usuário descreve o vídeo em palavras simples; você o planeja, o constrói, o verifica quadro a quadro e o renderiza. O usuário não é um programador: nunca peça a ele para executar um comando, editar um arquivo ou escolher entre opções técnicas. Decida e diga em uma linha o que você escolheu.

Este arquivo é um método, não uma cadeia de ferramentas. Você escreve o código-fonte do próprio vídeo (cenas, dados, estilos) e executa apenas os comandos Remotion padrão escritos abaixo: remotion still, remotion render e os ffmpeg e ffprobe que acompanham o Remotion.

Padrão de qualidade: cada quadro deve sobreviver como um anúncio estático. Rejeite seu próprio trabalho quando ele parecer um modelo, um slide do Keynote, um wireframe ou uma demo do Remotion.

0. Regras básicas

• Trabalhe apenas dentro da pasta atual. Nunca delete ou sobrescreva um arquivo que você não criou com esta skill. Uma pasta de projeto de vídeo criada com esta skill (video-<short-name>, com sua docs/BRIEF.md) é sua para modificar em uma execução posterior, conforme descrito no Passo 11; tudo o mais que estava lá antes permanece intocado. Seus próprios arquivos temporários (.renders/) e entregáveis (out/) são seus para substituir.
• Sem links simbólicos. Antes de criar, escrever ou esvaziar qualquer coisa, verifique seu caminho: ele deve resolver dentro da pasta atual e nenhuma parte dele pode ser um link simbólico. Se um for, pare e pergunte ao usuário. Crie .renders/ e out/ você mesmo como pastas comuns. Esvazie uma pasta deletando os arquivos que você criou nela, um por um, nunca com uma exclusão recursiva que possa seguir um link.
• Nomes em caminhos e comandos. Cada nome que você escolher e que for para um caminho de arquivo ou comando é verificado em relação ao seu padrão antes de seu primeiro uso; um nome que não corresponder é substituído por outro nome, nunca escapado ou truncado:
  • nomes de pasta e curtos (<short-name>, <name>), ids de linha, ids de cue, nomes de arquivos de áudio (antes da extensão) e nomes de cena (<scene>): ^[a-z0-9][a-z0-9-]{0,39}$;
  • ids de composição (<Comp>): ^[A-Za-z][A-Za-z0-9]{0,39}$;
  • números de quadro (<frame>, <a>, <b>, <frames>): números inteiros que correspondem a ^\d{1,7}$;
  • valores de loudness (<input_i> e os outros do Passo 9): copiados do JSON impresso pelo ffmpeg, cada um correspondendo a ^-?\d{1,3}(\.\d{1,2})?$; qualquer outra coisa (-inf, texto) significa parar e corrigir a mixagem.
• Nunca construa um comando a partir de texto livre. As palavras do usuário, os nomes dos arquivos que ele lhe der e qualquer coisa lida de um arquivo vão para arquivos JSON ou de origem, nunca para uma linha de comando. Copie um arquivo que o usuário lhe der para public/ sob um nome que você escolher e que corresponda ao primeiro padrão, mais uma extensão em minúsculas correspondendo a ^\.[a-z0-9]{1,5}$. Execute cada comando abaixo um de cada vez, exatamente como escrito, com apenas seus placeholders preenchidos, e coloque cada placeholder que contém um nome entre aspas simples, como os comandos fazem.
• Não escreva scripts que iniciem programas: sem helpers Node ou Python, sem scripts no package.json, nada com shell: true, exec ou uma string de comando. Além dos comandos neste arquivo, execute apenas verificações somente leitura (uma versão, um hash, uma listagem de arquivos, memória livre) e operações comuns de pasta e arquivo dentro do projeto.
• Instale apenas a partir do kit fixado (seção 1). Nunca npm install, npm update, uma instalação global, npx de qualquer coisa que já não esteja em node_modules, ou sudo. Antes de cada instalação ou download, informe ao usuário em uma linha o que é e aguarde sua aprovação.
• Além do kit e do navegador de renderização verificado (seção 1), não baixe nada: sem fontes, música, efeitos sonoros, imagens ou modelos da web. As fontes vêm do kit; áudio, logotipos e imagens vêm apenas do usuário.
• Determinístico: cada quadro é uma função pura do número do quadro. Sem Math.random, Date, timers, useFrame ou THREE.Clock para animação, sem dados de rede ao vivo. Apenas ruído com semente.
• Sem logotipos de marcas reais (Adobe, Apple, Instagram e assim por diante), a menos que o usuário lhe dê seu próprio logotipo para sua própria marca. Conteúdo de exemplo usa marcas fictícias.
• Julgue quadros renderizados reais (PNGs estáticos, quadros decodificados do MP4), nunca capturas de tela do navegador ou do Studio.

1. O kit

Estes arquivos estão localizados ao lado deste SKILL.md. Verifique cada hash antes de usar um arquivo; se houver uma incompatibilidade, pare e informe o usuário.

arquivo	SHA-256
package.json	5b765ec5b9ce033a1bf7f4bc925ea6dc00e55bb590ca79c380f84d0d29e3d66b
package-lock.json	a92264f8a7777bb6fe465756af9abe03aec285942af7dd00f1d51f3eba7fa25f

Se um estiver faltando, baixe-o byte por byte de https://blog.alekseimedia.com/assets/kits/glass-skill/<file> e verifique o hash.

Ele fixa o Remotion 4.0.534 (remotion, @remotion/cli, three, fonts, motion-blur), three 0.186.1, @react-three/fiber 9.8.1, React 19.3.0, TypeScript 5.9.3 e seus tipos, e as três famílias tipográficas da bíblia de design como arquivos de fonte: @fontsource/inter-tight, @fontsource/instrument-serif e @fontsource/jetbrains-mono 5.3.0 (SIL Open Font License). O lock fixa cada pacote por seu hash de integridade, portanto a instalação no passo 3 verifica cada arquivo que instala, incluindo as fontes.

Novo projeto de vídeo:

1. Node.js 20 ou mais recente (node --version). Se estiver faltando, peça ao usuário para instalar o Node.js LTS de nodejs.org com seu instalador normal e, em seguida, aguarde.
2. Crie uma pasta para o vídeo dentro da pasta atual, video-<short-name>, com um nome curto que corresponda ao seu padrão (regras básicas); se o nome já existir, escolha outro.
3. Copie package.json e package-lock.json desta pasta de skill para ela, verifique ambos os hashes, execute npm ci --ignore-scripts. Nunca adicione, atualize ou remova um pacote: construa o que você precisa a partir do kit.
4. O navegador de renderização, Chrome Headless Shell 157.0.8080.0, a versão com a qual o Remotion 4.0.534 é testado. Deixado sozinho, o Remotion o baixa no primeiro still ou renderização sem verificá-lo, portanto nunca permita isso: baixe você mesmo o zip para este computador, verifique-o e aponte o Remotion para ele, uma vez por projeto de vídeo. Nada mais é baixado durante a renderização: as fontes são arquivos dentro dos pacotes instalados.
   • Escolha a linha: macOS no Apple silicon (uname -m imprime arm64), macOS no Intel (x86_64), Windows em x64, ou Linux em x64 com glibc 2.35 ou mais recente (ldd --version). Qualquer outro sistema não é suportado: diga isso e pare.

sistema	zip	bytes	SHA-256	arquivo do navegador
macOS arm64	https://remotion.media/chromium-headless-shell-mac-arm64-157.0.8080.0.zip	179230663	3d9fd9a997915fa295ba6fbd66b2eaad2b9578101aa9dcde5e2eb737afa4f459	chrome-headless-shell-mac-arm64/chrome-headless-shell
macOS x64	https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/mac-x64/chrome-headless-shell-mac-x64.zip	109113968	b4a3f7e8aed11e7814fdaf49ddadab0ec3e0c7527f0ffeed5b208d7a856ebf6a	chrome-headless-shell-mac-x64/chrome-headless-shell
Windows x64	https://storage.googleapis.com/chrome-for-testing-public/157.0.8080.0/win64/chrome-headless-shell-win64.zip	125915690	ad0fe78fbe0783035fd71f81cd876a2e81962a40ac7de6b4f7afcbeb00901c11	chrome-headless-shell-win64/chrome-headless-shell.exe
Linux x64	https://remotion.media/chromium-headless-shell-linux-x64-157.0.8080.0.zip	103668996	7c4a2751b361aeb3cff3ed788fa18b7a0849371b983d478bb9205b6cc25a8c52	chrome-headless-shell-linux64/chrome-headless-shell

• Informe ao usuário que é um download de 100 a 180 MB e aguarde sua aprovação. Crie uma nova pasta .browser-download/ na pasta do vídeo (se ela existir ou qualquer parte de seu caminho for um link simbólico, pare e pergunte) e salve o zip byte por byte nela: curl -fL --proto '=https' -o '.browser-download/chrome.zip' '<zip>' (no Windows curl.exe, que acompanha o Windows 10 e 11), com <zip> copiado exatamente da linha.
• Verifique seu tamanho e SHA-256 em relação à linha. Em caso de incompatibilidade, exclua chrome.zip e a pasta, não use nada e pare.
• Somente quando ambos corresponderem, extraia-o de dentro de .browser-download/ com a ferramenta do próprio sistema: unzip -q chrome.zip no Linux (se unzip estiver faltando, peça ao usuário para instalá-lo), ditto -x -k chrome.zip . no macOS, e no Windows o tar que acompanha o Windows, C:\Windows\System32\tar.exe -xf chrome.zip (o tar do Git Bash não pode ler arquivos zip). Em seguida, exclua chrome.zip, verifique se o arquivo do navegador da linha é um arquivo regular e se nenhuma parte de seu caminho é um link simbólico, e renomeie .browser-download/ para .browser/ em uma única etapa (se .browser/ existir, pare e pergunte).
• Aponte remotion.config.ts para ele (Passo 5): Config.setBrowserExecutable(".browser/<browser file>"). Com isso definido, o Remotion inicia este arquivo e não baixa nada. Se um comando algum dia imprimir que está baixando um navegador, o caminho está errado: corrija-o antes de renderizar qualquer outra coisa.

5. ffmpeg e ffprobe: apenas as cópias incluídas com o Remotion, npx --no-install remotion ffmpeg ... e npx --no-install remotion ffprobe .... Essa compilação não tem filtro tile, fps ou drawtext; todo comando abaixo usa apenas o que ela tem. Todo comando ffmpeg abaixo que escreve um arquivo escreve apenas nos próprios arquivos .renders/ ou out/ deste projeto e começa com -y, para que uma re-renderização os substitua: sem ele, o ffmpeg recusa um arquivo existente e ainda sai com 0. O ffmpeg nunca cria pastas, portanto crie a pasta de saída primeiro e, após cada comando, verifique se a saída existe e é nova.

2. Fluxo de trabalho

Siga os passos em ordem. Nunca pule um: cada passo é mais barato do que os erros que ele detecta.

Passo 1. Briefing

Pergunte uma vez, em uma mensagem curta, apenas o que você não pode decidir: para que é o vídeo e quem o assiste; duração (padrão 20 a 30 s); formato (9:16 1080x1920 para Reels/TikTok/Shorts, 16:9 1920x1080 para telas, ou ambos); as palavras na tela (ou você as escreve); a chamada para ação; cor da marca e arquivos de logotipo; referências (capturas de tela ou links); música e efeitos sonoros como arquivos de áudio que eles possuem ou têm licença para usar, e o andamento da música se eles souberem. Decida o resto. Escreva docs/BRIEF.md.

Esta skill não produz narração nem som próprio: o filme funciona com palavras na tela, imagem, e o áudio do usuário. Se o usuário pedir uma voz, diga isso em uma linha e continue sem uma.

Apenas inglês: o módulo de fontes carrega apenas seus arquivos latin. Cada caractere na tela deve ser Latino imprimível, U+0020 a U+007E ou U+00A0 a U+00FF, exceto U+00AD, ou um de U+2013, U+2014 (traves), U+2018, U+2019, U+201C, U+201D (aspas curvas), U+2026 (reticências) e U+20AC (o símbolo do euro); sem caracteres de controle, largura zero ou direção. Verifique o texto da linha do tempo em relação a isso antes do primeiro still. Se o usuário quiser outro idioma ou script, diga que esta skill funciona apenas em inglês e pare, em vez de renderizar com uma fonte substituta.

Se você escrever as palavras: uma ideia por linha, 3 a 8 palavras, uma palavra de destaque por linha.

Passo 2. Relógio mestre

Um arquivo marca o tempo de todo o filme, src/data/timeline.json:

{ "fps": 60, "duration": 24.0, "bpm": 120,
  "lines": [ { "id": "hook", "text": "What if one file could do this?", "start": 0.3, "end": 2.4,
               "accent": 1.1 } ] }

• Marque o tempo pelas palavras pela velocidade de leitura (cerca de 3 palavras por segundo, pelo menos 1,2 s por linha, 0,3 a 0,5 s de ar entre as linhas) e encaixe os inícios das linhas na batida (60 / bpm segundos). Sem um andamento conhecido, use apenas a velocidade de leitura e omita bpm.
• src/lib/time.ts expõe FPS, L(id) (a linha), F(n) (n quadros em segundos), toFrame(s) e useTime(). As cenas nunca codificam segundos ou quadros: L("cta").start + F(6), L("hook").accent. Um novo ritmo reescreve timeline.json e todo o filme se reajusta.
• Um novo elemento visual em cada início de linha. O impacto visual da palavra de destaque chega em seu tempo, dentro de 2 quadros.
• As pistas sonoras vivem em src/data/cues.json: { "id": "whoosh-1", "file": "whoosh.wav", "t": 3.42, "syncAt": 0.31, "gainDb": -6 }. t é o tempo do filme do ponto de sincronismo em segundos, calculado a partir da linha do tempo; syncAt é onde esse ponto de sincronismo está dentro do arquivo, em segundos a partir de seu início (Passo 8); file é um dos arquivos de áudio em public/audio/. As cenas temporizam cada movimento que tem um som a partir do mesmo t, para que imagem e som não possam se desviar.
• Converta para quadros uma vez, depois trabalhe com números inteiros: uma janela que termina entre dois quadros deixa uma lacuna de um quadro onde uma camada desaparece.

Passo 3. Storyboard: um plano de tomadas canônico

docs/STORYBOARD.md é o plano único a partir do qual todas as cenas são construídas. Se você tentar alternativas, mescle a vencedora neste arquivo; as cenas seguem este arquivo e nada mais. Ele contém:

• uma tabela de atos: linhas, quadros, lugar, herói, cor, música;
• a cadeia de objetos: como cada herói se torna o próximo (um cartão cai em uma tela, a luz da tela se torna o flash). As transições são objetos e movimentos de câmera, não crossfades;
• por linha: tempo e quadros, UM herói, a entrada, o timing e a saída de cada elemento, o movimento da câmera, o texto exato na tela, a transição, a pista sonora;
• uma lista de keyframes de câmera por ato, como um caminho contínuo;
• janelas de motion-blur (apenas movimentos rápidos);
• uma auditoria de surgimento: cada elemento e seu tipo de entrada;
• uma lista "feito quando" por linha e os quadros de verificação (cada início de linha, destaque e transição).

O que o faz parecer caro, então planeje para isso: um lugar, não um fundo (céu, luz, profundidade, camadas de paralaxe); objetos 3D reais iluminados por uma luz; movimento a partir do quadro 0; um par de tipografia projetado; uma UI que é operada (um cursor, digitação, um pressionamento), não apenas mostrada; um momento de contraste (um momento escuro ou silencioso) que quebra o ritmo; um objeto ou personagem recorrente que carrega a história; um corte na batida; uma chegada motivada para cada elemento; um som sob cada movimento que os efeitos do usuário possam cobrir.

Mostre ao usuário uma versão curta (uma tabela: tempo, o que está na tela, qual som) e peça uma aprovação ou mudanças. Este é o momento mais barato para mudanças.

Passo 4. Bíblia de design

docs/BIBLE.md é o contrato contra o qual cada cena é codificada:

• Formatos. 9:16 1

...

[truncado para tradução]