reel-motion-graphics

Reel motion graphics

Esta skill cria reels no estilo proprietário desenvolvido originalmente para "Upcycling em 30 Segundos". template/ é aquele reel como um projeto HyperFrames funcional, portanto uma cópia nova renderiza corretamente antes de você alterar qualquer coisa. Seu trabalho é substituir seu conteúdo pelo novo roteiro, mantendo todas as regras abaixo.

Carregue /hyperframes-core para o contrato de composição antes de escrever o HTML da composição. Carregue /hyperframes-animation apenas se precisar de um padrão de movimento que não esteja em references/primitives.md.

1. Leia o roteiro e planeje os beats

Obtenha ou deduza os itens a seguir, e pergunte apenas pelo que muda o filme:

• O roteiro ou conceito. Obrigatório.
• Imagem do apresentador (MP4) ou uma foto. Sem uma, mantenha a imagem placeholder do template.
• Crédito da fonte para a sobrancelha do título, ex. ICLR 2023 · Author et al..
• Duração alvo. Padrão 30s; 20–60s funciona.

Divida o roteiro em: um cartão de título (cerca de 4s), 2–5 etapas (4,5–6s cada), e um opcional resultado/fechamento (cerca de 5,5s). Para cada etapa escreva:

• um título em palavras simples mais um acento itálico de 1–2 palavras ("Copie o MLP oito vezes"), com no máximo cerca de 22 caracteres para caber em 656px a 60px;
• uma legenda: linha 1 é uma frase de no máximo cerca de 34 caracteres (Bodoni itálico 40px), e linha 2 é uma frase de suporte com no máximo cerca de 40 caracteres;
• o movimento do diagrama a partir do vocabulário de primitivas (references/primitives.md → "Writing a new diagram").

Marque cerca de 2,5 palavras faladas por segundo se as legendas espelharem a narração. Escreva o plano em STORYBOARD.md no projeto (beat, intervalo de tempo, título, legenda, movimento visual), mostre ao usuário e construa após aprovação. Um roteiro curto já aprovado pelo usuário pode ir direto para a construção.

2. Scaffold

Esta skill vive no projeto Reel Creator (.claude/skills/reel-motion-graphics/). Execute comandos a partir da raiz do projeto e coloque cada novo reel em reels/<slug>/. Caminhos de script abaixo como scripts/solve-fold.py são relativos à pasta desta skill.

.claude/skills/reel-motion-graphics/scripts/new-reel.sh reels/<slug> [presenter.jpg|.mp4]

Para vídeo do apresentador, substitua o <img id="presenter"> em index.html por: <video id="presenter" class="clip" src="assets/presenter.mp4" data-start="0" data-duration="<D>" data-has-audio="true" playsinline></video> O CSS #presenter (cover, âncora 20%, abaixo de --fold) se aplica inalterado.

3. Construa: edite os dados primeiro, depois escreva o diagrama

Arquivo	O que alterar
index.html	Raiz e hosts data-start/data-duration para corresponder ao plano. Hosts: bg (todo), title (0–4), headings e diagram (4–fim), result (sua janela), captions (todo), presenter (todo).
compositions/title.html	Crédito da sobrancelha, as duas linhas de exibição, as duas linhas de tese e o mini diagrama se a ideia não for "1 → muitos".
compositions/headings.html	Apenas o array STEPS (segundos relativos ao host). As barras e "Etapa n de N" são derivadas dele.
compositions/captions.html	Apenas o array CAPS (segundos globais). Entre cerca de 0,35s após o início de sua etapa e saia no final da etapa.
compositions/diagram.html	Reescreva o mundo para o novo assunto, usando as primitivas. Mantenha a estrutura lens/world/drift, o padrão token-clock e a recessão de fundo.
compositions/result.html	Rótulos de estatísticas, valores, contadores e linhas de metadados, ou exclua o host se o roteiro não tiver números.
compositions/bg.html	Geralmente inalterado. Dimensione suas repetições yoyo para que terminem na duração da raiz.

Quando a biblioteca não tiver um gráfico adequado: peça um link HyperFrames

A biblioteca é references/primitives.md. Quando um beat precisar de um visual que nenhuma primitiva cubra (um tipo de gráfico, mapa, linha do tempo, comparação ou qualquer outra coisa não listada), não improvise um do zero. Pause e peça ao usuário um link:

"O beat 3 ('a receita triplicou desde 2021') precisa de um gráfico de crescimento e a biblioteca não tem um. Você pode enviar um link do catálogo HyperFrames para um gráfico que você goste? Vou restilizá-lo para a nossa marca."

Para ajudar na escolha, você pode listar 2–4 candidatos de npx --yes [email protected] catalog "<palavra-chave>", mas deixe o usuário escolher. Continue construindo os outros beats enquanto espera e deixe um placeholder identificado no intervalo.

Quando o link chegar:

1. Instale-o. O nome do item do registro é o último segmento do caminho do link do catálogo. Execute npx --yes [email protected] add <nome> --no-clipboard --json a partir do projeto. Para um link que não seja do registro, leia a página ou fonte e reconstrua-o.
2. Restilize-o para as regras da casa:
   • troque as cores pelos tokens da marca e os painéis por .glass;
   • use Bodoni e Instrument Sans com os arquivos opsz-18;
   • coloque cada valor de espaçamento na grade de 4px;
   • ajuste à coluna de conteúdo e zonas;
   • adicione os acentos sheen, gloss e drift;
   • remova qualquer coisa fora da marca, como preenchimentos planos brilhantes, outras fontes ou estilos de sombra projetada.
3. Conecte-o como um host de sub-composição na faixa de gráficos, ou incorpore seu movimento em diagram.html quando tiver que compartilhar o mundo contínuo. Em seguida, verifique, tire snapshot e corrija como de costume.
4. Adicione-o à biblioteca. Acrescente uma entrada em references/primitives.md sob "Restyled from HyperFrames": o nome, o link de origem, o que mostra e seus parâmetros principais. Copie o arquivo restilizado para template/compositions/library/ para que o próximo reel possa reutilizá-lo sem perguntar novamente.

4. Regras da casa (todo reel, sem exceções)

1. Dobra equidistante. A dobra fica no meio do caminho entre o conteúdo de animação mais baixo (parte inferior da legenda, cerca de y 900) e o topo da cabeça do apresentador. Resolva com scripts/solve-fold.py <imagem do apresentador ou um quadro> 900 e defina --fold em brand.css (um múltiplo de 4). Verifique com scripts/measure-fold.py <snapshot> <fold>. Com vídeo, verifique um quadro onde a cabeça está mais alta.
2. Grade de 4px. Todo padding, gap, deslocamento, tamanho e line-height é um múltiplo de 4. Contêineres preenchem uniformemente e dimensionam para seu conteúdo; nunca dê a um card uma altura fixa. Execute scripts/audit-grid.sh <projeto>; os únicos resíduos permitidos são bordas finas, raios de brilho e deslocamentos de movimento de tween.
3. Serifa robusta. Use apenas os arquivos Bodoni *-opsz18.woff2 em fonts/. O tamanho óptico automático da fonte variável escolhe cortes finos de exibição que desaparecem após H.264 e redução de escala do telefone. Nunca volte ao arquivo variável ou à faixa 6..96 do Google.
4. Zonas. App bar 0–175 (manter livre), animação 192–780, faixa de legenda 812–904, apresentador abaixo de --fold, coluna de conteúdo x 172–828 (livre do trilho direito). Legendas vivem em apenas uma faixa.
5. Um mundo de diagrama contínuo. Elementos que persistem entre etapas vivem em diagram.html e se movem. Eles nunca reentram em um novo arquivo de cena.
6. Determinismo. Use apenas timelines GSAP pausadas registradas em window.__timelines["<id>"]. Use rng() ou hh() com semente em vez de Math.random, e sem requestAnimationFrame, clocks ou rede. Contadores animados e partículas são funções puras do valor de um tween proxy.
7. Autor seguro para lint.
   • Mire na própria raiz de uma sub-composição com document.querySelector('[data-composition-id="<id>"]:not([data-composition-src])'), nunca #root (várias raízes compartilham esse id uma vez montadas).
   • Prefixe ids de elementos com a composição (dg-, hd-, rs-, ti-).
   • Use um fromTo por par elemento-propriedade, depois to.
   • Nunca faça tween de letterSpacing, width, height, top ou left; use transformações e opacidade.
   • Espace rótulos únicos para que não se sobreponham em repouso.
8. Aparência. Fundo preto próximo quente com luz flutuante e granulação; .glass para cada painel; brilho dourado em acentos; pequena deriva de câmera em cada pausa; segure cada estado finalizado por pelo menos 1s.

5. Verifique, depois entregue

Execute estes comandos a partir do diretório do projeto:

npx --yes [email protected] check
npx --yes [email protected] snapshot --at <o ponto médio de cada beat>

• check deve passar com 0 erros. Revise quaisquer avisos.
• Olhe a folha de contato. Recorte e amplie qualquer quadro denso: procure por sobreposições, texto cortado, tokens pousando fora do alvo e padding irregular.
• Execute measure-fold.py e audit-grid.sh, e corrija qualquer coisa que sinalizarem.
• Renderize com npx --yes [email protected] render; o resultado vai para renders/. Faça uma cópia para compartilhamento com menos de 30 MB para visualização em telefone: ffmpeg -i renders/<arquivo>.mp4 -c:v libx264 -crf 23 -preset slow -pix_fmt yuv420p -movflags +faststart renders/<slug>-share.mp4
• Player ao vivo: a partir da raiz do projeto execute node viewer/build.mjs. Ele reconstrói o player ao vivo de cada reel (reel/ mais cada reels/<slug>/) e escreve o carrossel viewer/index.html, com uma cópia por reel em viewer/reels/. Publique viewer/index.html no artefato da biblioteca de reels https://claude.ai/artifact/Joet84qdr6Kb47vYZzc8YR, passando cada viewer/reels/*.html em files. O usuário prefere o player HTML ao vivo a um vídeo incorporado. Para um único reel sozinho, execute node build-preview.mjs em sua pasta para escrever dist/preview.html.
• Informe o tempo de execução, o que foi verificado (quadros, gaps da dobra, auditoria) e qualquer coisa ainda não verificada.

Referência

• references/primitives.md: cada bloco de construção visual, com o arquivo que o implementa.
• template/: o reel completo do Upcycling. É o padrão de qualidade; compare o novo trabalho contra ele.