Communitygithub.com

smasikurr/RemotionMaster

Dirija, construa e renderize filmes cinemáticos premium de motion design a partir de código — vídeos de lançamento, demonstrações de produtos e funcionalidades, loops animados para landing pages e redes sociais, vinhetas de logotipo, walkthroughs de UI, demos de aplicativos, tipografia cinética, teasers, trailers, introduções e clipes promocionais.

O que é RemotionMaster?

Esta skill transforma um desenvolvedor ou Agente de IA em um diretor de curtas-metragens, capaz de criar vídeos e animações de nível profissional inteiramente a partir de código. Ela se baseia em dois motores principais: o **Remotion 4.0.529** (React, orientado a quadros) como padrão e o **HyperFrames 0.8.79** (HTML + GSAP) como alternativa. O fluxo de trabalho é altamente estruturado, guiado por cinco leis fundamentais (ideia única, dispositivo de história, realce com significado, sistema de movimento próprio e verificação por medição) e um conjunto de proibições rigorosas para evitar visuais genéricos ou com aparência gerada automaticamente, como gradientes multicoloridos, neon, emojis ou partículas. A skill oferece suporte a uma variedade de formatos — desde filmes de lançamento e loops de funcionalidades até walkthroughs de UI — com métricas padrão para duração, quadros por segundo, BPM e densidade de texto. O processo é iterativo e orientado a verificação: cada etapa gera um arquivo (BRIEF.md, TREATMENT.md, timeline.ts) e o trabalho só é considerado concluído após os pixels renderizados e o áudio decodificado passarem por scripts de verificação e uma rodada de crítica. A skill também possui um sistema de 'sorteio' de técnicas a partir de uma biblioteca, garantindo que cada filme tenha um visual distinto, e inclui um loop de autocorreção baseado em 'contact sheets' para refinar o resultado final.

Funciona com~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/smasikurr/RemotionMaster/tree/HEAD/.agents/skills/cinetic

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

cinetic

Você está dirigindo um curta-metragem, não animando uma página web. Imagem, texto e som são um único sistema conduzido por um único arquivo de timeline, e nada está finalizado até que tenha sido renderizado, medido e criticado.

  • Motores. Remotion 4.0.529 (React, orientado a quadros) é o padrão. HyperFrames 0.8.79 (HTML mais uma timeline GSAP pausada) é a alternativa. O ofício é independente do motor; a §7 lista as regras que diferem por motor.
  • Números. Cada número aqui é um padrão comprovado de trabalhos entregues: um ponto de partida do qual você pode se afastar quando tiver uma razão declarada. Não é uma lei da natureza.
  • Marca. Quando o usuário fornece uma marca (cores, fontes, logotipo, imagens, tom), a marca vence. Os padrões de gosto cobrem as partes que você precisa inventar.
  • Caminhos. Caminhos como scripts/render.sh funcionam a partir da raiz da skill e também dentro de um projeto de filme, porque scripts/new-film.sh copia todos os scripts para dentro do projeto. Todos os scripts, exceto os auxiliares internos brand-svg.ts (que brand-kit.sh chama) e hf-preflight.cjs (que hf-finish.sh executa), exibem --help.
  • Exemplo prático. references/worked-example.md detalha o Tessel, um filme de lançamento de 33 s em 1920×1080 e 60 fps, e mostra cada regra abaixo em uso, incluindo os erros. Leia-o uma vez antes do seu primeiro filme.

O padrão

O alvo é um filme que as pessoas assistem duas vezes: uma ideia que o produto possui, contada em imagens, onde cada quadro parece escolhido e nada está ali para preencher espaço.

  • Substância antes do polimento. Mostre a coisa específica e inteligente que este produto faz, aquilo que um produto mais simples não faria. Movimento impecável em torno de uma afirmação genérica ainda perde para um filme bruto que faz o espectador pensar "oh, isso é inteligente".
  • Visual próprio. Cada marca recebe uma linguagem visual derivada de seu nome, seu produto e sua personalidade, dentro das proibições severas abaixo. Restrição não significa decoração; não significa um único estilo minimalista para tudo.
  • Ultra limpo e suave. Quadros limpos e modernos, com ideias criativas e coreografia. Cada movimento é suavizado, ponderado e fluido a 60 fps: sem tremores, sem saltos e sem efeitos que substituam ideias.
  • Visual, não narrado. A ideia é compreendida com o som desligado; as palavras confirmam o que a imagem já disse.
  • Peso e quietude. O movimento tem massa, chega na batida e então descansa, para que os momentos rápidos tenham impacto.
  • Som que faz a imagem parecer melhor: cada impacto é causado por algo que você pode ver.
  • Restrição sobre decoração. Em caso de dúvida, remova.
  • Prova, não impressão. O processo abaixo existe porque nada disso pode ser julgado no editor ou no Studio: você só sabe depois de assistir à renderização real e medi-la.

Proibições severas

Quando você inventa o visual, nenhum destes elementos aparece, nunca. Eles são os indicadores mais rápidos de trabalho gerado, e esta skill existe para fazer filmes que não pareçam gerados. lint-film.mjs verifica os tokens e estilos em busca deles, e os críticos verificam os quadros.

  • Palavras:

    • rótulos de 'eyebrow' ou 'kicker' acima de um título;
    • taglines empilhadas e "Apresentando…";
    • frases completas despejadas de uma vez: o texto chega em fragmentos curtos, um após o outro, com imagem entre eles (§4, "Fluxo de texto");
    • paredes de texto e texto de preenchimento aleatório: legendas mono decorativas, métricas falsas, rótulos que ninguém precisa, lorem ipsum.

    Cada palavra na tela merece seu lugar.

  • Tipografia: fontes serifadas e estilos itálico ou oblíquo, incluindo uma inclinação que simule um. Use uma sans-serif limpa e moderna, mais uma mono para código ou números, se o produto precisar.

  • Cor:

    • laranja, âmbar, bege, creme, bronze ou areia, como destaque, papel ou brilho;
    • neon: destaques muito brilhantes e saturados, brilhos, bloom e halos;
    • roxo, violeta ou índigo, e gradientes de roxo para azul ou multicoloridos;
    • glassmorphism.
  • Decoração:

    • emojis e ícones de banco de imagens;
    • brilhos representando "IA", partículas, confetes, flares de lente e 'code rain';
    • overshoot elástico em qualquer coisa que não esteja pousando, e qualquer overshoot ou truque por letra no texto (apenas a palavra herói pode se mover letra por letra).

O que resta é abundante: tinta e papel (claro ou escuro, neutro ou frio), um destaque com significado de qualquer família de matiz fora das proibidas (vermelho, verde, ciano, azul, amarelo), uma sans-serif e um movimento ultra limpo e suave, suavizado, ponderado, com motion blur e livre de tremores. A criatividade vai para a ideia, o dispositivo e a coreografia, não para os efeitos.

Se o usuário fornecer uma marca que inclua um destes elementos (seu wordmark serifado, seu laranja), a marca vence, porque é a identidade deles, não um padrão. Registre em BRIEF.md para que os críticos não sinalizem, e marque as linhas que o definem com // cinetic:brand-supplied <o que> para que o lint as aceite.

1. Formatos e padrões

Escolha uma linha primeiro. Ela define a duração, a densidade e a lista de arquivos a serem entregues. A receita para cada formato está em references/formats.md. Os números são o ritmo calmo, o padrão; um briefing que pede energia (um teaser, um drop, um corte hype) opta pelo perfil nítido (§5), que é mais rápido e permite um pouco mais de texto (fragmentos de até 5 palavras, até 10 visíveis), mas ainda assim nunca uma frase despejada de uma vez.

FormatoDuraçãofpsGrade (BPM)Batidas narrativasPalavras: total · novas por fragmento · visíveis por vezSomEntregáveis
Filme de lançamento / teaser20–45 s60100 (nítido 120)6–8 a cada 30 s (nítido 8–10)15–25, máx. 30 · ≤ 4 · ≤ 8 (≤ 5 no modo substituição)trilha completa + SFXmaster 16:9, re-layouts 9:16 e 1:1, pôster, kit de marca se inventado
Vídeo de produto / funcionalidade, filme de atualização8–30 s601001 capacidade a cada 8–10 s≤ 12 · ≤ 4 · ≤ 8SFX de UI; calmo: efeitos apenas a −18 LUFS (uma base leve apenas quando o briefing pede um ritmo)master, pôster
Loop de funcionalidade4–15 s, compassos inteiros60 (GIF 25)qualquer; compassos inteiros3–5≤ 6, lê mudo · ≤ 4 · ≤ 4opcionalMP4, WebM, GIF, emenda sem costura
Vinheta de logotipo3–8 s60100–1202–4nome + ≤ 3 · ≤ 3 · nome + 3um impacto afinado + finalMP4, ProRes 4444 alphas (segurado e limpo), pôster, kit de marca se inventado
Walkthrough de UI20–90 s6090–1001 capítulo a cada 2–4 compassos≤ 5 por legenda · ≤ 4 · uma legendabase + SFX de UImaster, legendas SRT

Use 60 fps sempre que UI, texto ou a câmera se mover. Em 30 fps, movimentos lentos mostram passos visíveis e movimentos rápidos estroboscópicos, e 24 fps nunca é o certo para UI. Um GIF é a única exceção: exporte-o a 25 fps (ou 50) a partir do master de 60 fps, porque os atrasos de quadro do GIF são centésimos de segundo inteiros e 30 fps reproduz 11% mais rápido.

2. As cinco leis

  1. Uma ideia, específica para este produto. Você consegue contar o filme em uma frase, e a prova mostra o que este produto faz que a versão óbvia ou mais simples não faria. A restrição se aplica à decoração e ao texto, nunca à inteligência do produto: se a funcionalidade é inteligente, o filme mostra a parte inteligente. Por quê: o espectador leva uma coisa, e um filme que seria igualmente verdadeiro para um concorrente, ou para uma funcionalidade mais simples, não dá nada para ele levar.
  2. Um dispositivo de história. Um objeto, forma ou cor viaja por cada cena e nunca pisca ao ponto de um corte. Em um filme de lançamento, idealmente ele se resolve na marca no final; em um loop de funcionalidade ou vídeo de produto, é a unidade sobre a qual o produto age (o cartão, a linha, o arquivo). Encontre o objeto que este produto possui. Um ponto, linha ou bloco simples é o padrão preguiçoso, e também é o visual dos próprios exemplos desta skill. Por quê: torna o filme contínuo, permite que o filme seja compreendido com o som desligado, e um objeto próprio é o que torna o filme inconfundivelmente desta marca.
  3. Um destaque com um significado. O destaque é um único token que significa uma coisa, como "agora", "novo" ou "seu". Use-o com moderação (cerca de ≤ 8% dos pixels) e deixe-o inundar o quadro no máximo uma vez. Por quê: uma cor que significa algo é lida sem palavras, e uma cor usada em todos os lugares não significa nada.
  4. Um sistema de movimento próprio. Use algumas curvas e molas nomeadas, cada uma por uma razão declarada, e tire cada número de quadro de timeline.ts. Por quê: movimento consistente é movimento de marca, e facilitações ad-hoc são lidas como geradas.
  5. Verifique por medição. Um filme só está pronto quando os pixels renderizados e o áudio decodificado passam pelos scripts e uma rodada de crítica. Por quê: a reprodução no Studio esconde pops, quadros fantasmas, deslizes de sincronia e mudanças de cor que o arquivo codificado mostrará.

3. Fluxo de trabalho

Cada etapa escreve um arquivo, e cada portal é uma verificação que você realmente executa. Trabalhe inline. Subagentes são apenas para crítica (§8), porque construir quadros em paralelo custa mais tempo do que economiza.

Etapa 0: Recepção → BRIEF.md

  • Se o briefing já declarar o produto, a mensagem e a duração, infira todo o resto e escreva suas suposições.
  • Se não, faça no máximo 3 perguntas: o produto em uma linha, o formato e a duração, e onde o filme será exibido. Pegue todo o resto da §1.
  • Escolha o motor: Remotion por padrão; HyperFrames se o usuário já tiver um projeto HyperFrames, quiser HTML/GSAP ou precisar de renderizações --batch orientadas por variáveis.
  • Copie as proibições severas (acima) para BRIEF.md, mais quaisquer exceções fornecidas pela marca. Os críticos são posteriormente solicitados com este arquivo palavra por palavra, então ele funciona como o contrato de QA.
  • Escolha o ritmo: calmo (o padrão), a menos que o briefing peça energia; escreva-o na linha de especificação. Nitido é uma adesão explícita (§5).
  • Estruture o projeto: bash <skill>/scripts/new-film.sh films/<nome> --fps 60 --size 1920x1080 [--engine hyperframes]. Ele mantém o tempo próprio do iniciador (Remotion 100 BPM, HyperFrames 120) e o ritmo calmo; adicione --pace crisp para um filme nítido (120 BPM e ritmo nítido), ou --bpm N para outro tempo. Passe --link-modules <dir>/node_modules para reutilizar uma instalação existente em vez de executar npm install (uma junção no Windows).
  • Portal: BRIEF.md tem uma linha de especificação, por exemplo 1920x1080@60, 30s, 100BPM, pace: calm, audio: earshot kit (calm), no music.

Etapa 1: Conceito → TREATMENT.md

Leia references/concept-and-story.md agora.

  • Comece pelas especificidades, não pelo estilo. Anote:
    • o que o nome significa ou evoca (muitas vezes ele entrega a marca e o dispositivo);
    • o comportamento não óbvio da funcionalidade, completando a frase "ao contrário da versão óbvia, ele…";
    • os objetos próprios do produto (suas linhas, cartões, leituras e estados).
  • Escreva 3 conceitos, cada um através de uma lente diferente:
    • (a) o próprio verbo ou metáfora do produto tornado literal;
    • (b) a dor do espectador tornada visível;
    • (c) um dispositivo formal: um objeto de revezamento, um 'bookend', um movimento de câmera ininterrupto ou um contêiner que se torna o produto.
  • Descarte qualquer conceito cujos adereços possam aparecer no filme de outro produto. Não é seu.
  • Sorteie as técnicas; não as escolha. Execute python3 scripts/pick.py --format <launch|feature|loop|sting|walkthrough|vertical> --energy <calm|medium|high> --seconds <duração> --json out/qa/picks.json, com --energy calm a menos que o briefing peça energia. Ele sorteia cerca de uma técnica a cada 3,5 s de filme quando calmo e a cada 2,5 s caso contrário (9 ou 12 para um lançamento de 30 s, pelo menos 4 para uma peça curta) da biblioteca medida em assets/library/techniques.json, na ordem que o formato precisa, ponderada para movimentos comprovados e a energia do filme, e imprime cada receita com tempo padrão. Escolher manualmente converge para o mesmo fade-up, push-in e cartão final em cada filme; o sorteio é como dois filmes param de parecer iguais. Construa as escolhas que o conceito pode carregar, recontadas em seus objetos e dispositivo; a história, a verdade do produto e uma linguagem de UI consistente vêm primeiro, e um filme que enfia todos os movimentos parece um showreel. Re-sorteie uma escolha que lute contra o conceito no máximo duas vezes (--category <cat> --exclude <id>), ou descarte-a, com uma razão por escrito; nunca adicione uma técnica que o sorteio não lhe deu (sorteie uma com --category), e passe --brand-supplied <visual> quando a marca possuir um visual proibido. Leia uma entrada sorteada na íntegra com pick.py --show <id>; references/technique-library.md lista cada entrada (pesquise, não leia tudo). As normas de ritmo, facilitação e tempo de texto medidas estão em references/craft-rules.md.
  • Preencha assets/TREATMENT.md para o conceito escolhido:
    • uma logline;
    • o arco: gancho (dentro do problema, sentido até 1 s) → virada → prova (1–2 capacidades) → promessa → lockup;
    • as técnicas sorteadas com a linha de semente, cada uma colocada em uma batida (§3b do modelo);
    • o caminho do dispositivo, cena por cena;
    • uma folha de batidas com as colunas compasso | tempo | imagem | texto (fragmento, modo) | batida de imagem | som: cada pensamento de mais de 4 palavras escrito como uma cadeia de fragmentos, cada um com a batida de imagem que entrega;
    • o texto completo com sua contagem de palavras;
    • o quadro final.
  • Execute o teste de exclusão. Remova as batidas de demonstração, e o valor ainda deve ser lido. Remova as batidas de valor; se o filme ainda "funcionar", foi um tour de funcionalidades.
  • Execute o teste de especificidade. O filme seria igualmente verdadeiro para um produto mais simples, por exemplo, uma divisão uniforme em vez de uma itemizada, ou uma lista simples em vez de uma classificada? Se sim, a prova subestima o produto; mostre a parte que é difícil.
  • Execute o teste da palavra de funcionalidade. Assistindo mudo, um estranho usaria a palavra do briefing para a funcionalidade ("streak", "split")? Se um dispositivo inteligente fizer com que seja lido como outra coisa, mantenha a forma familiar da funcionalidade e deixe o dispositivo vesti-la.
  • Portal:
    • a logline tem ≤ 15 palavras;
    • o teste de especificidade passa, com sua resposta anotada;
    • a contagem de palavras está dentro do orçamento da §1;
    • cada fragmento tem 1–4 palavras; nenhuma batida mostra mais de 8 palavras de texto (5 no modo substituição); cada pensamento de mais de 4 palavras é uma cadeia com uma batida de imagem de 30–90 f entre seus fragmentos, e nenhum chega como um bloco (um filme nítido permite 5 palavras por fragmento e 10 na tela);
    • o texto é planejado em no máximo cerca de 65% da duração (80% no nítido), com um trecho de imagem sem texto de pelo menos 1,5 s a cada 10 s;
    • o dispositivo aparece em cada linha de batida, e cada técnica sorteada é colocada em uma batida ou descartada com uma razão por escrito;
    • o roteiro de som anota onde o destaque sobe, e cada SFX está vinculado a um impacto na tela.

Etapa 2: Construção → código e timeline

  • Timeline (src/timeline.ts). Um array de objetos Beat, um por batida, contendo o frame de início e duração, a técnica, o fragmento de texto com o modo de exibição, a descrição da ação de imagem e a instrução de som. Nenhuma animação tem um número de quadro codificado em outro lugar; todos vêm de timeline.ts exportando getBeats(). O array de batidas, não a montagem, é a única fonte de verdade para o tempo.
  • Marca. Execute bash scripts/brand-kit.sh para gerar src/brand.ts e o SVG de marca necessário. Isso configura as cores, fontes e logotipo. Se a marca foi inventada (o usuário não a forneceu), o script cria uma marca derivada do nome.
  • Componentes. Cada técnica sorteada é um componente React (ou arquivo HTML/JS no HyperFrames) em src/, seguindo o modelo da biblioteca de técnicas. Os componentes recebem frame e acessam a timeline para sua própria duração, texto e instruções de imagem.
  • Composição (src/Root.tsx). A composição lê a timeline e renderiza as batidas em sequência, lidando com transições entre elas. Nenhuma batida pisa no espaço de tempo de outra.
  • Portal: npm run lint && npm run test (ou os equivalentes do HyperFrames) passam sem erros. lint-film.mjs é executado e não sinaliza violações das proibições severas, a menos que sejam marcadas como fornecidas pela marca.

Etapa 3: Renderização → renders/

  • Execute bash scripts/render.sh (ou hf-finish.sh para HyperFrames). Isso produz um arquivo MP4 ou ProRes em renders/<nome>.mp4.
  • O script renderiza o MP4 e extrai o áudio para verificação de sincronia.
  • Portal: O arquivo renderizado existe e não está corrompido. Execute bash scripts/sync-check.sh para verificar o deslize de áudio; ele deve ser < 1 quadro.

Etapa 4: Medição → out/qa/

  • Execute bash scripts/measure.sh para gerar uma folha de contato no out/qa/. Isso produz quadros de amostra, uma verificação de cor (sem bandas, BT.709) e uma medição de pico de áudio.
  • Portal: A medição passa: sem bandas visíveis, perfil de cor BT.709 confirmado, pico de áudio dentro de −1 dBFS, sem pops ou cliques.

Etapa 5: Crítica → out/qa/critique.md

  • A crítica é a única etapa que usa um subagente. Execute bash scripts/critique.sh para iniciar uma conversa que lê BRIEF.md, TREATMENT.md, a folha de contato e a renderização (se a ferramenta puder ler vídeo), e produz um relatório em out/qa/critique.md.
  • O relatório avalia:
    • a ideia é específica e não genérica? (da §2 Lei 1)
    • o dispositivo viaja por toda parte? (da §2 Lei 2)
    • o destaque tem um significado e é usado com moderação? (da §2 Lei 3)
    • o filme é compreendido com o som desligado? (da §O padrão)
    • o ritmo está sincronizado com a batida? (da §2 Lei 4)
    • as proibições severas são respeitadas? (da seção de proibições severas)
    • a renderização mostra artefatos (quadros fantasmas, bandas, tremores)?
  • Portal: Nenhum ponto de crítica fica sem uma resposta. As respostas são anotadas abaixo do relatório. Se um ponto não puder ser respondido de forma convincente, volte para a Etapa 1, 2 ou 3.

4. Regras de ofício (independentes do motor)

Texto e tipografia

  • Nunca despeje frases completas. A mensagem chega em respirações curtas (1–4 palavras), cada uma com um frame de imagem que a ancora. Pense em um letreiro de filme mudo, não em um slide.
  • Espaçamento para texto. O texto ocupa no máximo 60% da largura do quadro e é centralizado ou alinhado à esquerda com recuo consistente. Deixe espaço negativo ao redor: nenhum elemento de texto se aproxima a menos de 10% da borda do quadro.
  • Hierarquia de fontes: Uma sans-serif limpa para títulos e corpo de texto. Uma mono (se o produto precisar para código ou números). Use no máximo 2 pesos: regular (400) e negrito (700). Sem itálico, sem condensado, sem larguras variáveis.
  • Cor do texto: Neutro escuro (quase preto, #161616) sobre fundo claro, ou neutro claro (quase branco, #F2F2F2) sobre fundo escuro. O destaque pode colorir palavras-chave, mas apenas uma palavra por fragmento.
  • Animação de texto: Aparecer, desvanecer ou mover-se para o lugar em uma facilitação suave. Sem letras saltando, sem efeito de digitação animado, sem contagem regressiva ou truques de caractere. A palavra herói pode se mover letra por letra; todo o resto permanece uma palavra inteira.

Imagem e composição

  • Regra dos terços, quebrada por razão. A grade é uma ferramenta, não uma corrente: o dispositivo frequentemente vive no centro ou em uma divisão horizontal (para um produto rolante).
  • Câmera: Travada, a menos que a técnica exija movimento. Pane e tilt são lentos (≥ 2 s para atravessar o quadro). Zoom é um push-in para um detalhe ou um pull-out para revelar contexto; nunca um zoom sem sentido.
  • Profundidade: Plana, a menos que o produto precise de profundidade (camadas, perspectiva). Então, parallax leve para separar o primeiro plano do fundo.
  • Iluminação: Plana, uniforme, sem sombras ou destaques dramáticos, a menos que o produto precise deles. Sem iluminação de estúdio falsa.

Som

  • Nível: Calmo: a trilha (se houver) é de −18 LUFS integrado, com efeitos sonoros em −12 dBFS pico. Nítido: a trilha em −14 LUFS, efeitos sonoros em −10 dBFS pico.
  • Kit de áudio: A ferramenta 'earshot' em scripts/ fornece kits calmos e nítidos prontos para uso (base, batida, arpejo, impacto). Execute bash scripts/earshot.sh --kit <calm|crisp> --bpm <value> --beats <count> --out renders/audio/ para gerar faixas.
  • Vinculação: Cada SFX deve ser acionado por um evento na tela (um aparecimento, um impacto, um clique). Nenhum som não vinculado.

5. Perfil nítido

Escolha o perfil nítido quando o briefing pedir energia (teaser, hype cut, anúncio de game). Ele altera os padrões:

  • BPM: 120 (de 100).
  • Comprimento do fragmento: Até 5 palavras (de 4).
  • Texto na tela: Até 10 palavras visíveis por vez (de 8).
  • Cobertura de texto: Até 80% da duração (de 65%).
  • Duração da batida: 1,5–2,5 s (de 2,5–4 s).
  • Técnicas: Maior densidade; o sorteio seleciona do pool de energia.
  • Som: Trilha em −14 LUFS, efeitos sonoros em −10 dBFS.
  • Edição: Cortes mais rápidos, mais movimento de câmera, sobreposição de texto em movimento.

Todas as outras regras (proibições severas, dispositivo, destaque) permanecem em vigor.

6. Scripts

ScriptPropósito
new-film.shEstrutura um novo projeto de filme com a estrutura de diretórios, modelos e timeline inicial.
render.shRenderiza o projeto atual como MP4 (e ProRes se solicitado) para renders/.
sync-check.shVerifica o deslize de áudio entre a faixa de áudio extraída e a trilha renderizada.
measure.shGera uma folha de contato, verificação de cor e medição de pico de áudio em out/qa/.
critique.shInicia uma conversa de subagente para criticar a renderização em relação ao briefing e ao tratamento.
earshot.shGera uma trilha sonora com um kit (calmo ou nítido) para o BPM e duração fornecidos.
lint-film.mjsVerifica tokens e estilos em busca de violações das proibições severas.
brand-kit.shGera src/brand.ts e o SVG de marca a partir da entrada do usuário ou derivação do nome.
pick.pySorteia técnicas da biblioteca de técnicas; veja §1 para uso detalhado.

7. Regras específicas do motor

Remotion

  • Use useCurrentFrame() e useVideoConfig() para tempo e tamanho.
  • Os componentes são funções React que retornam JSX.
  • Use @remotion/transitions para transições entre batidas.
  • O motion blur é obtido através de @remotion/motion-blur ou react-spring para facilitações.
  • A timeline é um array de objetos Beat tipados com TypeScript.

HyperFrames

  • Use hf-finish.sh para renderização.
  • Construa quadros como HTML + CSS com uma linha do tempo GSAP pausada.
  • O hf-preflight.cjs valida o HTML antes da renderização.
  • A timeline é um array JavaScript exportado do timeline.js.
  • Para obter versões de UI controladas por variáveis, use --batch com um arquivo de variáveis.

8. Crítica (subagentes)

A crítica é a única etapa que deve usar um subagente. Ela lê:

  • BRIEF.md (o contrato)
  • TREATMENT.md (o plano)
  • A folha de contato de out/qa/ (a evidência)
  • A renderização (se disponível)

O subagente produz um relatório em out/qa/critique.md com:

  • Uma verificação de cada portal nas Etapas 1–3
  • Uma verificação das proibições severas em quadros de amostra
  • Uma avaliação das Cinco Leis
  • Uma verificação de artefatos de renderização
  • Pontos de ação se alguma verificação falhar

O engenheiro principal (você) responde a cada ponto de crítica antes de declarar o filme pronto.

9. Glossário

  • Batida: Uma unidade de tempo de filme, geralmente 1–4 compassos, contendo uma única ideia de imagem e fragmentos de texto relacionados.
  • Dispositivo: O objeto, forma ou cor que viaja por todas as batidas, ancorando o filme.
  • Destaque: A cor de destaque única que significa um conceito ("novo", "seu", "agora").
  • Lockup: O quadro final que combina o logotipo, o nome do produto e o slogan.
  • Logline: Uma frase de ≤ 15 palavras que captura a ideia central do filme.
  • Semente: A linha de base de uma técnica sorteada, contendo seu propósito, tempo e parâmetros de facilitação.
  • Modo Substituição: Um modo de texto onde cada fragmento substitui completamente o anterior (sem fade, sem sobreposição), usado para dar ênfase.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Habilidades Relacionadas