ui-motion-reel

UI motion reel

Um reel é uma cena HTML renderizada quadro a quadro. Cada valor animado (tamanho da forma, raio, cor, zoom da câmera, cursor, controles) é uma mola amortecida simulada uma vez no início a 8x a taxa de quadros, para que qualquer quadro possa ser renderizado de forma independente e em paralelo. A trilha sonora é sintetizada a partir da mesma linha do tempo, para que cada batida, clique e assobio se alinhe com a imagem.

As peças incluídas:

• assets/engine/reel.js: o motor (molas, medição, script do cursor, câmera, trocas de conteúdo com desfoque, hover e pressionar, loop contínuo, contadores de hodômetro, o conjunto de ícones).
• assets/engine/score.js: uma faixa original com loop (pads, arpejo dedilhado, baixo, bateria, crescendos, sinos) mais design de som de UI (cliques, assobios, digitação, detentes, deslizes), renderizado com OfflineAudioContext.
• assets/template/index.html: uma cena inicial de 24 s com todos os tipos de interação: lista com hovers em linhas, arrasto de slider, toggle, hodômetro, anel de confirmação, pílula de sucesso, cartão de resumo, loop de volta.
• scripts/setup.sh: cria a estrutura de pastas de um reel (motor + template + scripts + dependências node).
• scripts/render.mjs: stills, áudio e renderização MP4 paralela com a trilha sonora multiplexada e normalizada em loudness.
• scripts/qa.mjs: folha de contato, verificação de emenda de loop bruta, tiras de transição, loudness e espectrograma.
• references/api.md: a referência completa da configuração Reel.define. Leia antes de escrever uma cena.
• references/craft.md: as regras de motion e design, e os erros que já foram cometidos e corrigidos. Leia antes de projetar os estados.
• references/score.md: como moldar a música e o design de som, e como verificar uma mixagem que você não pode ouvir.
• references/examples/stockback.html: o reel original de 60 s e 14 estados do qual este skill foi extraído (um app fintech de recibos para ações). Leia para ideias de conteúdo e coreografia mais densa. É anterior à API do motor, então copie padrões, não código.

Fluxo de trabalho

1. Conheça o produto primeiro. Leia o site ou código do produto para sua paleta, fontes, logotipo e os 5 a 8 momentos que contam sua história (a entrada, a "mágica", a prova, a recompensa). Use textos e dados reais sempre que possível: números reais e logotipos reais tornam o reel crível. Se o usuário pediu um visual específico, isso prevalece sobre o visual do produto.

2. Roteirize os estados antes de escrever o markup. Para cada estado, decida seu tamanho (w, h, raio), preenchimento (uma das 3-4 cores da paleta), zoom da câmera (para ocupar cerca de 80% da altura ou largura do quadro), duração e o que o cursor faz. Mire em 45-60 s e 10-14 estados para um reel completo, ou 20-30 s e 5-7 estados para um teaser. A 120 BPM, uma batida tem 0,5 s e um compasso tem 2 s. Faça a duração de cada estado ser múltipla de 0,5 s e coloque os grandes momentos nos limites de compasso (múltiplos de 2 s) para que a música possa acertá-los. As durações devem somar exatamente ao total.

3. Estruture o projeto. bash ~/.claude/skills/ui-motion-reel/scripts/setup.sh <projeto>/video, então edite <projeto>/video/index.html. Mantenha os arquivos do motor inalterados, a menos que o reel precise de um recurso do motor; se for o caso, altere a cópia no projeto e mencione.

4. Construa a cena seguindo references/api.md: um bloco .content por estado (id="c-<id>", data-w/data-h iguais a w/h do estado), ids em tudo que o cursor mira ou você anima, depois Reel.define({...}) com estados, eventos do cursor, canais personalizados (sliders, toggles, toques, scrubs) e funções update por estado para animação interna.

5. Revise os stills cedo e com frequência. node render.mjs --stills 0,1.5,4,... e depois examine-os (construa uma folha de contato com node qa.mjs --every 2). Verifique cada estado em repouso e alguns quadros intermediários da morph. Renderizar stills leva segundos; uma renderização completa leva cerca de um minuto e meio para 60 s em 6 workers.

6. Faça a trilha sonora. Defina score (progressão, acertos nos estados-chave, pausas) e um hook sfx para sons específicos da cena (digitação, detentes, contadores, deslizes). node render.mjs --audio, depois node qa.mjs e leia a linha de loudness e out/qa/spectrum.png (veja references/score.md: você não pode ouvir, então julgue a mixagem por números e imagens).

7. Renderize e faça QA. node render.mjs --mp4 --with-audio --out <nome>.mp4, depois node qa.mjs --transitions --video out/<nome>.mp4. Confirme se a emenda de loop bruta é 1.000000, veja transitions.png em busca de morphs cinza ou conteúdo vazando para fora do quadro, e veja a folha de contato mais uma vez.

8. Entregue o MP4 (e uma cópia em 720p se a transferência de arquivo puder enfrentar problemas com tamanho), além de uma pequena lista do que contém: estados, interações, o que a música faz. Diga honestamente ao usuário que você verificou o áudio por análise, não por audição. Ofereça-se para reajustar o tempo ou o tema: uma re-renderização é barata.

Inegociáveis (o visual)

Estes são os pontos que fazem o reel ser lido como de um designer, não como um template. references/craft.md explica cada um.

• Uma única forma, sem cortes. Cada estado é o mesmo elemento mudando de tamanho, raio e preenchimento; o conteúdo troca internamente com um breve desfoque (o motor faz isso).
• Um cursor causa cada mudança: um clique, um arrasto ou um pressionar e segurar. Nenhum estado muda sozinho, a menos que seja uma resposta genuína do sistema (um toque completado).
• Molas em todos os lugares; no máximo um pequeno overshoot (zeta em torno de 0,86 para tamanho, 1,0 para cor e câmera). Sem easing elástico.
• A câmera se ajusta a cada estado; o último quadro é igual ao primeiro para que o reel faça loop.
• Sem tempo morto: algo significativo se move a cada momento, e o cursor nunca espera mais do que cerca de um segundo.
• Sem explosões de partículas, brilhos, lens flares, gradientes no chrome da UI ou traços de ícones incompatíveis (use o conjunto de ícones do motor: uma grade de 24, um traço de 1,75).
• Uma única tipografia de UI, opcionalmente com um acento de exibição (o template combina Geist com Instrument Serif itálico). Use as fontes do produto quando ele as tiver.

Notas de desempenho

• Um reel de 60 s em 1080p60 equivale a 3.600 quadros. Com 6 workers, renderiza em cerca de 80-90 s em um Mac com chip Apple Silicon.
• Os scripts chamam process.exit no final porque o puppeteer pode manter o Node vivo após o trabalho ser concluído. Se você escrever seus próprios scripts, faça o mesmo, ou comandos longos parecerão travados.
• Em redes onde uploads grandes expiram, exporte também uma cópia em 720p: ffmpeg -i reel.mp4 -vf scale=1280:720 -c:v libx264 -crf 25 -c:a aac -b:a 160k reel-720p.mp4 (ffmpeg está em node_modules/@ffmpeg-installer/*/ffmpeg).