Motion HyperFrames: Módulo de Construcción
Puente entre motion-director (flujo, estilo, crítico) y los skills oficiales de HyperFrames de HeyGen
(técnica). El flujo viene de motion-director. Los workflows de HyperFrames (/hyperframes, product-launch-video,
motion-graphics …) traen sus propios bucles de briefing, que el proceso Director reemplaza. Sus reglas técnicas aplican completamente.
Configuración (por proyecto)
claude plugin marketplace add heygen-com/hyperframes # skills oficiales (una vez)
claude plugin install hyperframes@hyperframes # alternativa sin plugin: npx hyperframes skills update
cd projects/<name>
export HYPERFRAMES_NO_TELEMETRY=1
npx -y hyperframes@<version> init hf --non-interactive # fijar versión, nunca @latest en medio del proyecto
Cuándo leer cada skill de HyperFrames
| Tarea | Skill |
|---|---|
Contrato de composición: data-*, Clips, Tracks, Sub-composiciones, Determinismo | hyperframes-core (antes del primer HTML) |
Movimiento, GSAP, transiciones; Three.js (adapters/three.md); Motion Blur | hyperframes-animation |
| Cámara, Zoom, Punch-in, Match/Whip, Máscaras, SVG-Draw | hyperframes-keyframes |
| Comandos, Opciones de renderizado, Depuración | hyperframes-cli |
| Buscar componente | hyperframes-registry |
El audio no se construye en HyperFrames: La mezcla proviene de motion-sound y se añade al final.
Componentes propios primero
Diseño propio para cada película, construir componentes uno mismo (hf/components/<nombre>.html). El catálogo
(npx hyperframes catalog --query "<Movimiento, inglés>") es una mina: leer código fuente, entender la técnica, traducir a
diseño propio. Nunca un look del catálogo 1:1, ese es exactamente el look que tiene todo video generado por IA.
Verificación
npx hyperframes lint # rápido, después de cada paso grande
npx hyperframes check # tiempo de ejecución, layout/desbordamiento, contraste (WCAG)
npx hyperframes snapshot --at 1.2,4.0,9.5 --describe false # fotogramas individuales; sin --describe false se pregunta un modelo de pago
npx hyperframes render --quality draft --output ../renders/draft.mp4 # animatic, rápido
Después las comprobaciones de motion-director/references/rules.md.
Renderizado + Masterización (contra banding)
MP4 normal = 8 bits: los degradados y brillos obtienen escalones. Por eso renderizar sin pérdida y masterizar con 10 bits + grano fino:
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
El script corrige la matriz de color (BT.601 sin etiquetas → BT.709), aplica grano fino de 10 bits sobre el brillo, coloca
el audio y advierte si la imagen es transparente. Atención: QuickTime no reproduce H.264 de 10 bits (sí lo hacen VLC, mpv, ffplay,
navegadores). Para enviar, añadir una copia de 8 bits (-pix_fmt yuv420p -crf 18).
Memoria
Los renders con 3D, vidrio o capas grandes requieren mucha RAM. Por eso: un render a la vez, sin bucles de render en segundo plano, primero renderizar un fotograma individual y observar la memoria, ninguna capa de más de 4096 px por lado.
Motion Blur
| Vía | Cuándo | Límite |
|---|---|---|
Componente de Registry motion-blur (tiempos intermedios, ángulo de obturador) | elementos únicos rápidos | solo transform; costoso en contenedores grandes |
| Motion Blur del motor | imágenes completas | solo a través de la API de Producer, no con transiciones de shader |
Nunca en recorridos de lectura (texto/páginas), solo donde el ojo no deba leer.
Trampas (medidas o de issues, a octubre de 2026)
- Fondo en
<body>en lugar de en la raíz[data-composition-id]: en MOV sale transparente, en MP4 negro. z-index: -1no renderiza. Las animaciones que un script crea antes de cargar el runtime pueden desfasarse un fotograma; las animaciones CSS en Shadow Roots/pseudo-elementos también.- Caída silenciosa a captura de pantalla lenta: leer el resumen del render.
Math.random/Date.nowlo bloquea el lint: el azar siempre debe ser seedeado. Prohibidorepeatinfinito.- Los desenfoques CSS grandes ralentizan mucho. Colocar assets después de reconstruirlos bajo un nuevo nombre de archivo (caché por ruta).