kinetic-reel

Kinetic reel

Um método para criar reels de motion design editoriais e de alta energia inteiramente em código, destilado do "Work Reel ’26" (um reel de portfólio de 84 s: Microsoft → UW–Madison Surgery → Enterprise RAG → finale trace). Ele é fornecido como um template/ executável (uma demo de 17 s que usa todas as técnicas) e um exemplo completo em examples/work-reel-26/.

Como funciona. Cada frame é uma função pura de t. reel/index.html carrega reel/cues.js (a linha do tempo) e reel/reel.js (um módulo ES com camadas three.js, um canvas 2D para tipografia e um pós-processamento WebGL). render.mjs utiliza o Chrome headless para renderizar folhas de contato, tiras e stills para revisão, ou cada frame em paralelo, e o ffmpeg codifica o MP4. music/score.mjs sintetiza a trilha sonora em Node a partir do mesmo cues.js, garantindo que cada batida caia no frame exato.

Fluxo de trabalho

0. Scaffold

bash <skill-dir>/scripts/new_project.sh <project-dir>   # <skill-dir> = pasta que contém este SKILL.md

Depois leia references/style-guide.md (o visual, o vocabulário de movimento, o catálogo de transições, regras de layout) e references/sound.md por completo antes de projetar. Veja examples/work-reel-26/reel.js para entender como um reel longo é organizado.

1. Decida o destaque, depois storyboard

• Pergunte (ou defina) o que lidera e quanto tempo cada parte recebe. Os espectadores notam proporções: a v2 do Work Reel tinha a Microsoft com ~60% e precisou ser reequilibrada. A solução foi adicionar tempo para os outros capítulos em vez de cortar a parte que as pessoas amavam. Mire no destaque ≈ 35–40%.
• Escreva STORYBOARD.md a partir do template: orçamento de tempo, a fonte da verdade para os fatos, um dispositivo unificador e uma linha por cena (manchete, mecanismo visual, transição de entrada, som).
• Fatos são sagrados. Somente números da fonte fornecida, cada um com seu escopo ("~180 casos construídos internamente", "320 prompts bilíngues"). Qualquer coisa ilustrativa (IDs de ferramentas, IDs de documentos, respostas de exemplo, uma AST) é rotulada como SCHEMATIC no HUD. Nunca desenhe dados por dimensão que você não possui. Visualize o processo. Trabalho médico/clínico: não faça alegações de eficácia, diga "em desenvolvimento / ainda não validado" quando for verdade.

2. Construa

• reel/cues.js: S (início da cena), hits (cada batida importante), CH (capítulos → a barra de progresso segmentada), dur. 120 BPM: cortes nas batidas, mudanças de capítulo nos compassos.
• reel/reel.js: uma função por cena, sName(t). Cada uma pinta o frame inteiro: bg() → camada GL via glShot(...) → tipografia e formas → hud(t, {...}). Registre a cena em SCENES com uma chave; adicione uma transição de entrada em TR (ou deixe de fora para um corte seco na batida).
• Mantenha a constante CJK listando cada caractere chinês que você desenha (as fontes carregam como um subconjunto).

3. Olhe para cada cena, várias vezes

node render.mjs --sheet=1,4,7,10,13,15.5 --cols=3 --w=640 --out=out/check/sheet.jpg   # key frames
node render.mjs --stills=10.4 --out=out/stills                                          # detalhe em resolução total
ffmpeg -ss 16.0 -t .6 -i out/reel.mp4 -vf "fps=10,scale=320:-1,tile=6x1" out/check/tr.jpg   # uma transição, a partir do encode

Abra cada imagem com Leitura. Verifique colisões (rótulos sobre linhas, estatísticas sobre estatísticas, texto sobre faixas de HUD), frames vazios em um corte, legibilidade a 1600 px de largura e se cada transição começa em algo e termina limpa. Orçamento: uma folha por capítulo, um still em resolução total por cena densa, uma tira por tipo de transição.

4. Trilha, render, encode

node music/score.mjs && ffmpeg -y -i music/score.wav -af "highpass=f=30,equalizer=f=250:t=q:w=1:g=-2,loudnorm=I=-14:TP=-1.2:LRA=8" -c:a aac -b:a 192k assets/score.m4a
node render.mjs --frames --workers=4                                    # ~8–40 ms/frame em uma GPU Mac: segundos, não minutos
node render.mjs --encode --audio=assets/score.m4a --out=out/reel.mp4 --fps=30
# cópia web: ffmpeg -i out/reel.mp4 -vf scale=1600:900:flags=lanczos -c:v libx264 -preset slow -crf 23 -c:a aac -b:a 128k -movflags +faststart out/reel-web.mp4

Você não pode ouvir a trilha: verifique-a com showspectrumpic e RMS por seção, e informe isso ao relatar. Mudanças apenas no áudio não exigem uma nova renderização: remux (-map 0:v -map 1:a -c:v copy).

As regras que mais importam

1. A tipografia é a heroína. Display condensado (Anton) para manchetes, uma grotesca larga (Archivo Black) para impactos, serifa itálica (Instrument Serif) para a única linha de "voz", mono (JetBrains Mono) para todos os rótulos. Manchetes grandes em inglês, anotações pequenas em chinês quando o público é bilíngue.
2. Cada cena tem um mecanismo, não apenas palavras: roteamento em grade, varredura de matriz, token saltando em uma máquina de estados, fusão de listas, pacotes passando por portões. A manchete nomeia o mecanismo; o mecanismo o prova.
3. Sincronizado com as batidas. Letras, chips, contadores e cortes ficam nos hits. Entrada rápida (expo-out), segurar, próximo.
4. Continuidade. Prefira transições por continuidade de forma (zoom através do elemento onde o olho está, íris a partir da coisa que acabou de acender) a cortes secos dentro de um capítulo. Cortes secos com impacto são para transições de capítulo.
5. Sem whooshes de ruído. Swells na tonalidade principal para entrar nos capítulos, dicas tonais suaves dentro deles, silêncio em cerca de metade dos cortes.
6. Dados honestos (veja o passo 1) e um rótulo SCHEMATIC em qualquer coisa ilustrativa.
7. Proteja a matemática. Raios vindos de backOut() podem cair abaixo de 0 (o canvas lança um erro): circle/starburst/jelly já protegem. No sintetizador, limite o tempo local a ≥ 0 antes de pow() e limite o f/q do SVF (ambos já estão no template).

Entregando um reel como introdução de site

O Work Reel é entregue como a página inicial do seu site: index.html reproduz o reel em tela cheia e faz a transição para o portfólio. O padrão está empacotado em examples/site-intro/ (index.html, css/intro-reel.css, js/intro-reel.js, mais um Cloudflare Worker que adiciona suporte a HTTP Range):

• Tente reproduzir automaticamente com som. Se recusado, reproduza sem som com um pulsante "toque para som". Se isso também for recusado, ou prefers-reduced-motion estiver ativo, mostre a tela final no modo "iniciar" (reproduzir é o botão principal).
• Durante a reprodução: pequenas pílulas de vidro no centro superior, já que o HUD do reel ocupa os cantos. "Pular introdução" carrega um anel que preenche com o reel. Um botão de som com barras de equalizador pulsando no BPM do reel. Esc pula, M silencia.
• Tela final: a gramática do reel em HTML. Colchetes de canto, o nome como letras que caem (Anton), micro-tipografia mono, uma barra de rastreamento segmentada, uma versão 2D com campo de pontos do terreno de partículas, um CTA principal na cor lima (texto rola ao passar o mouse, brilho, magnético, um pulso a cada compasso) e um fantasma "assistir novamente".
• Saia através de uma íris na cor lima a partir do controle pressionado, abaixe o áudio e navegue.
• Duas codificações (1600×900 a ~1.3 Mbps, 960×540 a ~0.6 Mbps para telefones / save-data), preload="auto", um poster. Sirva-as com HTTP Range (206), caso contrário, a busca e o Safari quebram.