O que Motion HyperFrames: Bau-Modul faz?
Ponte entre motion-director (fluxo, estilo, crítica) e os skills oficiais HyperFrames da HeyGen
(técnica). O fluxo vem do motion-director. Os workflows HyperFrames (/hyperframes, product-launch-video,
motion-graphics …) trazem seus próprios loops de briefing, que são substituídos pelo processo Director. Suas regras técnicas permanecen em vigor.
Configuração (por projeto)
claude plugin marketplace add heygen-com/hyperframes # skills oficiais (uma vez)
claude plugin install hyperframes@hyperframes # alternativo sem plugin: npx hyperframes skills update
cd projects/<name>
export HYPERFRAMES_NO_TELEMETRY=1
npx -y hyperframes@<version> init hf --non-interactive # travar versão, nunca @latest no meio do projeto
Qual skill HyperFrames ler quando
| Tarefa | Skill |
|---|---|
Contrato de composição: data-*, Clips, Tracks, Subcomposições, Determinismo | hyperframes-core (antes do primeiro HTML) |
Movimento, GSAP, transições; Three.js (adapters/three.md); Motion Blur | hyperframes-animation |
| Câmera, zoom, punch-in, match/whip, máscaras, SVG-draw | hyperframes-keyframes |
| Comandos, opções de renderização, depuração | hyperframes-cli |
| Procurar bloco de construção | hyperframes-registry |
Áudio não é criado no HyperFrames: a mixagem vem do motion-sound e é adicionada no final.
Componentes próprios primeiro
Design próprio para cada filme, construa os blocos você mesmo (hf/components/<name>.html). O catálogo
(npx hyperframes catalog --query "<movimento, inglês>") é uma mina de ouro: leia o código-fonte, entenda a técnica, traduza
para seu próprio design. Nunca copie um look do catálogo 1:1, esse é exatamente o look que todo vídeo de IA tem.
Verificação
npx hyperframes lint # rápido, após cada passo importante
npx hyperframes check # runtime, layout/overflow, contraste (WCAG)
npx hyperframes snapshot --at 1.2,4.0,9.5 --describe false # quadros individuais; sem --describe false um modelo de imagem pago será solicitado
npx hyperframes render --quality draft --output ../renders/draft.mp4 # animatic, rápido
Em seguida, as verificações de motion-director/references/rules.md.
Renderização + Masterização (contra banding)
MP4 normal = 8 bits: gradientes e glows ficam com degraus. Por isso, renderize sem perdas e faça a masterização com 10 bits + granulação fina:
npx hyperframes render --format mov --quality delivery --output ../renders/master.mov
bash scripts/master_10bit.sh ../renders/master.mov ../renders/film.mp4 0.35 ../renders/mix.wav
O script corrige a matriz de cores (BT.601 sem tags → BT.709), aplica granulação fina de 10 bits sobre o brilho, adiciona
o áudio e avisa se a imagem for transparente. Atenção: H.264 de 10 bits não é reproduzido pelo QuickTime (VLC, mpv, ffplay,
navegadores funcionam). Para envio, faça também uma cópia de 8 bits (-pix_fmt yuv420p -crf 18).
Memória
Renderizações com 3D, vidro ou grandes planos exigem muita RAM. Portanto: um render por vez, sem loops de renderização em segundo plano, primeiro renderize um quadro individual e observe a memória, nenhum plano acima de 4096 px por lado.
Motion Blur
| Caminho | Quando | Limite |
|---|---|---|
Bloco do registry motion-blur (tempos intermediários, ângulo do obturador) | elementos únicos rápidos | apenas transform; caro em grandes contêineres |
| Engine motion blur | imagens inteiras | apenas via Producer API, não com transições de shader |
Nunca aplicar em leitura (texto/páginas), apenas onde o olho não precisa ler.
Armadilhas (medidas ou de issues, outubro de 2026)
- Fundo no
<body>em vez de na raiz[data-composition-id]: no MOV fica transparente, no MP4 preto. z-index: -1não renderiza. Animações que um script cria antes do carregamento do runtime podem ficar um quadro desalinhadas; animações CSS em Shadow Roots/pseudo-elementos também.- Queda silenciosa para captura de tela lenta: leia o resumo da renderização.
Math.random/Date.nowsão bloqueados pelo lint: aleatoriedade sempre com semente.repeatinfinito proibido.- Blurs grandes em CSS tornam tudo muito lento. Após reconstrução, salve assets com novo nome (cache por caminho).