Communitygithub.com

code-film

Filme de movimento renderizado a partir de código, com verificação de quadros.

O que é code-film?

Este skill, `code-film`, é uma ferramenta especializada para criar filmes de curta duração renderizados inteiramente a partir de código. Cada quadro do filme é uma função pura de seu timestamp, garantindo que a renderização seja determinística e reproduzível. O skill é ideal para demonstrações de produtos, tipografia cinética, gráficos animados, e outras animações de marca que precisam ser entregues como arquivos MP4. Ele suporta plataformas que permitem a execução de scripts de renderização de UI, como ambientes de desenvolvimento baseados em CLI, e utiliza o ffmpeg para a codificação final. O processo envolve a definição de um 'contrato de página' com funções como `window.__seek(t)`, a renderização de um 'contact sheet' para verificação de layout e temporização, e a execução de verificações rigorosas de determinismo, piscamento (flicker), e formato. O skill não deve ser usado para animações de UI ou para gerar vídeos com provedores de IA generativa, sendo direcionado a casos onde o controle por código e a precisão determinística são essenciais.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/event4u-app/agent-config/tree/HEAD/src/skills/code-film

Perguntar na sua IA favorita

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

Documentação

O que code-film faz?

Um filme de movimento onde cada quadro é uma função pura de seu timestamp: uma página expõe window.__seek(t), ui:render --profile film percorre cada quadro, captura, prova que a sequência é determinística, verifica-a contra o piso de fotossensibilidade e seu formato declarado, e a codifica com ffmpeg. Sem provedor de vídeo pago, sem reprodução ao vivo. Os valores para movimento de filme estão em references/film-motion.md; o contrato da página em film-page.

Quando usar

  • O usuário solicita um pequeno filme de movimento construído a partir de seu próprio material — um clipe de lançamento de produto, um showreel, tipografia cinética, um gráfico animado, um explicador de processo, uma animação de marca em loop.
  • O filme precisa ser renderizado duas vezes da mesma forma, seguir uma batida ou um tempo declarado, ou ser entregue como MP4 em um tamanho especificado.

Quando NÃO usar

  • Um prompt para um provedor de vídeo generativo (Veo, Kling, Sora) → motion-choreographer.
  • Uma animação dentro de uma interface de usuário — hover, revelação de scroll, transição de página → fe-design § Movimento.
  • Cortar ou legendar filmagens existentes → o cluster /video.
  • Um único ativo SVG estático ou em loop → svg-authoring.

Procedimento

  1. Entradas. Pergunte apenas o que a receita lista como variável: propósito, formato e tamanho em pixels, paleta em hex, uma tipografia, áudio (nenhum, um arquivo fornecido ou um tempo declarado), cartão final. Em "apenas faça", informe os padrões que você usou.

  2. Direção. Escolha uma receita do corpus e declare o conceito único ao qual cada cena serve:

    node <skills-root>/corpus-grounding/scripts/ground.mjs search \
      --manifest <skills-root>/code-film/data/manifest.json "<a brief>"
    
  3. Proibições. Obtenha os indicadores para o brief (--domain tell) e escreva cada proibição com sua alternativa no plano.

  4. Grade. Tempo e compassos a partir da faixa fornecida (allin1.sh quando instalado; caso contrário, um tempo declarado, relatado como declarado), então uma lista ordenada de cenas com tempos. Mantenha cada texto por seu tempo de leitura (3 palavras por segundo).

  5. Apenas explicadores — alegações. Liste cada figura, nome e data na tela com sua fonte, ou marque como sendo do usuário. Não invente nenhum.

  6. Construção. Escreva a página no contrato de busca: window.__seek(t), window.__videoMeta, sem relógio de parede, aleatoriedade com semente, fontes locais. Escolha o renderizador de --domain renderer; HTML puro é o padrão e um renderizador licenciado é sugerido apenas após sua questão de licença ser respondida.

  7. Folha de contato. Renderize uma vez, leia contact.png, corrija bagunça, sobreposição e temporização fora do ritmo. No máximo três passagens.

  8. Renderização.

    agent-config ui:render film/index.html --profile film --out film/out.mp4 [--audio track.wav]
    

    Saída 0 é limpa, 2 carrega descobertas (determinismo, flash, tempo morto, formato, rede), 1 significa não avaliado, 3 significa nenhum driver de navegador.

  9. Relatório. Cite o manifesto: a forma de busca, cada verificação como ran ou skipped: <reason>, as descobertas, e verification. Diga verified apenas quando o manifesto diz isso e o digest do arquivo é o arquivo que você entrega.

Status — o que cada palavra pode significar

  • verified — toda verificação aplicável foi executada nesta máquina e o digest do arquivo codificado é aquele registrado. Não diz nada sobre se o filme é bom.
  • static-only — quadros foram capturados e hashados, mas uma verificação que precisa de ffmpeg (piso de flash, codificação, formato) não foi executada. Nomeie a ferramenta ausente.
  • unassessed — nada foi visto: nenhum driver de navegador, nenhum formulário de busca, ou nenhum comprimento declarado. Nomeie a instalação ou a declaração ausente.

Formato de saída

  1. O caminho do filme e seu SHA-256 do manifesto.
  2. A tabela de verificações (ran / skipped: …) e cada descoberta.
  3. O caminho da folha de contato.
  4. Para um explicador, a lista de alegações com fontes.

Pegadinhas

  • Uma página que usa Math.random ou Date.now renderiza de forma diferente na passagem reversa; o manifesto nomeia o primeiro quadro divergente. Use semente a partir de t.
  • O piso de flash é um piso de segurança: um estroboscópio falha e nenhuma bandeira o abaixa.
  • O perfil de filme executa os scripts da página com a rede desligada. Uma fonte ou imagem buscada de um CDN não carrega — envie-a junto com a página.
  • O determinismo é comprovado por máquina; fontes e GPUs diferem entre máquinas.
  • Uma página construída em um framework de linha do tempo é vista através de window.__timelines (entradas pausadas e buscáveis); filmagens incorporadas são mantidas em t − data-start. Codifique filmagens all-intra (-g 1), ou uma busca cai entre keyframes.

NÃO faça

  • NÃO cole texto de prompt de uma galeria externa em um plano ou receita — escreva-o fresco a partir do corpus.
  • NÃO agrupe ou instale um renderizador sem perguntar; detecte e direcione.
  • NÃO considere um filme pronto apenas a partir do código — os quadros decidem.
  • NÃO afirme que um filme é bom, está na marca ou "menos IA"; relate o que foi medido.

Veja também

Individual skills in this repo

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

Habilidades Relacionadas