HyperFrames Core
HyperFrames renderiza video a partir de HTML. Una composición es un archivo HTML cuyo DOM declara la temporización con atributos data-*, cuyo runtime de animación es buscable, y cuya reproducción multimedia es gestionada por el framework.
Este skill es el contrato técnico: cómo construir un proyecto hyperframes. El cuerpo que sigue es la guía de construcción; los detalles por tema están en references/ (índice a continuación), consúltalos según sea necesario. Otras cuestiones residen en los skills de dominio hermanos: hyperframes-animation, hyperframes-creative, media-use, hyperframes-cli, hyperframes-registry. El mapa de capacidades en /hyperframes indica qué cubre cada uno.
Referencias
| Archivo | Léelo para… |
|---|---|
references/minimal-composition.md | empezar desde el esqueleto de composición renderizable más pequeño |
references/composition-patterns.md | elegir entre monolítico vs modular; estructurar un index.html modular; escoger un arquetipo de subcomposición |
references/data-attributes.md | consultar cualquier data-* (raíz / clip / host de subcomp / alias heredados); usar class="clip" |
references/tracks-and-clips.md | elegir data-track-index, manejar solapamiento / z-index en la misma pista, temporizar un clip relativo a otro |
references/sub-compositions.md | cablear una subcomposición (atributos del host, <template>, variables por instancia) y animar dentro de ella |
references/variables-and-media.md | declarar variables; colocar <video>/<audio>, ajustar volumen, recortar |
references/determinism-rules.md | construir una línea de tiempo buscable; prohibiciones de determinismo; lista blanca de propiedades animables; ajuste de diseño / texto |
references/full-screen-motion.md | crear movimiento a pantalla completa con fondos compartidos |
references/storyboard-format.md | redactar un plan STORYBOARD.md (+ el manifiesto analizado) |
references/review-loop.md | ejecutar los pases de revisión plan → boceto → construcción en un tablero activo — compartido por todo flujo de planificación con storyboard |
references/production-loop.md | llevar un plan aprobado a un video entregado — las dependencias de etapa (audio, fotogramas, ensamblaje, transiciones, subtítulos, verificar, entregar) que una compilación libre sigue directamente |
references/brief-contract.md | las reglas básicas del brief: derivación de modo (colaborativo / autónomo), registro de campos compartidos, invariantes de preguntas (la propia pregunta reside en /hyperframes → la capa de intención) |
references/brief-format.md | redactar BRIEF.md — el documento de intención confirmado que la Configuración de un flujo de trabajo escribe y que cada paso posterior lee |
references/script-format.md | redactar el SCRIPT.md opcional de narración fijada |
references/subagent-dispatch.md | mapear los verbos de envío de subagentes (fan-out paralelo / fondo / espera) a tu arnés |
references/frame-worker-core.md | el contrato compartido del rol de frame-worker: cada constructor de paquetes narrativos lo antepone al delta sub-agents/frame-worker.md de ese flujo de trabajo |
references/tailwind.md | trabajar en un proyecto Tailwind v4 (init --tailwind; el contrato de ejecución difiere del v3 de Studio) |
Para detalles específicos del runtime de animación (API GSAP, Lottie, Three.js, etc.) ve a hyperframes-animation → adapters/<runtime>.md.
Construir una composición
Dos formas raíz (no intercambiables)
- Independiente (
index.htmlde nivel superior) — el<div data-composition-id="…">raíz se coloca directamente en<body>, sin envoltorio<template>(envolverlo oculta todo el contenido y rompe el renderizado). - Subcomposición (cargada mediante
data-composition-src) — la raíz debe estar envuelta en<template>.
⚠ Regla de transporte: el runtime solo clona el contenido de
<template>; todo lo que está fuera (incl. estilos/scripts de<head>) se descarta — coloca<style>/<script>dentro del template. ⚠ Regla de ID de host: eldata-composition-iddel slot del host debe coincidir exactamente con eldata-composition-iddel template interno y con la clavewindow.__timelines["<id>"]— sin sufijos-mount/-slot/-host.
Forma del archivo, cableado del host y lista de verificación previa al renderizado → references/sub-compositions.md.
La raíz debe tener tamaño (error de diseño silencioso)
La raíz independiente necesita un contenedor con tamaño explícito (width/height en px), y cada ancestro hasta un elemento con height:100% debe tener una altura resuelta — de lo contrario, un hijo flex/100% se colapsa a ~0 y el contenido se apila en la esquina superior izquierda. No confíes solo en las compuertas automáticas para detectar esto; inspecciona una captura. Esqueleto → references/minimal-composition.md.
Una línea de tiempo pausada
Cada composición registra exactamente una gsap.timeline({ paused: true }) en window.__timelines["<id>"] (clave = data-composition-id de la raíz), construida sincrónicamente al cargar la página. La duración del renderizado = data-duration de la raíz, no la longitud de la línea de tiempo. No anides manualmente sublíneas de tiempo en el host. Contrato completo (incl. runtimes no GSAP) → references/determinism-rules.md + hyperframes-animation/adapters/.
Errores comunes detectados en el primer lint (fallo garantizado en la primera compilación)
Dos reglas que lint sí detecta, pero solo después del hecho — escríbelas correctamente la primera vez:
- El elemento raíz de la composición debe llevar
data-start="0"(junto condata-composition-id/data-width/data-height); omitirlo hace quelintfalle conroot_composition_missing_data_start. - Nunca combines un
transformCSS inicial con un tween de GSAP sobre la misma propiedad — el valor CSS y el inicio del tween entran en conflicto ylintlo rechaza congsap_css_transform_conflict. Establece el estado inicial dentro del tween usandogsap.fromTo(el, { x: -40 }, { x: 0 })en lugar de un CSStransform: translateX(-40px).
Reglas no negociables (errores silenciosos que las compuertas automáticas pueden pasar por alto)
Se muestran aquí; la justificación completa en la referencia enlazada. No las violes:
- Sin relojes en tiempo de render /
Math.randomno seedeado / red / estado de entrada; sinrepeat: -1(usa un recuento finito). →determinism-rules.md - Anima solo la lista blanca de propiedades visuales; nunca apliques tweens a
displayovisibilitysin procesar.autoAlphade GSAP y los límites de línea de tiempo de duración cero son las únicas excepciones de visibilidad, y solo en elementos que no son clip o envoltorios dentro de un clip. El framework controla por sí solo la visibilidad de.clip. No usesgsap.seten clips de escenas posteriores al cargar la página. →determinism-rules.md - Sin
<br>en el texto del cuerpo; los elementos transformados deben ser de nivel bloque y tener tamaño; los decorativos absolutos pulsantes necesitan espacio libre máximo. →determinism-rules.md <video>/<audio>funcionan a cualquier profundidad de anidamiento (incluso dentro de un<template>o envoltorio de subcomp); el framework gestiona la reproducción y busca/decodifica medios dondequiera que estén. La única salvedad son las líneas de tiempo, no la colocación: una línea de tiempo de subcomp no puede animar elementos raíz del host. →variables-and-media.md- Cada
iddebe ser único en la página ensamblada; dentro de una subcomp, prefija los ids con el id de composición (#<id>-hero). Los ids duplicados de<video>/<img>se renderizan en blanco — el productor inyecta fotogramas mediantegetElementById, y los duplicados entre archivos pasan desapercibidos paralint. →composition-patterns.md - Un relleno de escena a pantalla completa va en un hijo de sangría completa (
position:absolute; inset:0), nunca en la raíz de la composición misma — la composición de fotogramas del productor puede eliminar elbackgroundpropio del elemento raíz (el fotograma se renderiza negro) aunque la vista previa/snapshotlo muestren correctamente. →composition-patterns.md
Editar composiciones existentes
- Lee primero los archivos. Conserva la temporización, pistas, IDs, variables, rutas de medios no relacionadas.
- Coincide con los IDs de composición y claves de línea de tiempo existentes.
- Añadir un clip: elige un
data-track-indexque no se solape o ajusta intencionalmente la temporización circundante. data-hiddenen cualquier elemento de la composición lo oculta TANTO en vista previa como en renderizado, anulando su ventana de tiempo; es no destructivo/reversible y se alterna mediante el icono de ojo de la línea de tiempo de Studio.- Añadir una subcomposición: verifica su
data-composition-idinterno antes de cablear el host.
Validación
Usa hyperframes-cli para detalles de comandos
-
npx hyperframes checkpasa (0 hallazgos en lint, runtime, diseño, movimiento y contraste) - Proyectos con subcomposiciones:
npx hyperframes snapshot --at <midpoints>y revisa visualmente cada fotograma -
npx hyperframes previewpara revisión (el usuario puede editar cualquier cosa en la línea de tiempo de Studio) -
npx hyperframes rendersolo después de la aprobación del usuario