topcheer/ggcode

Núcleo de HyperFrames

HyperFrames renderiza video a partir de HTML. Una composición es un archivo HTML cuyo DOM declara la temporización con atributos data-*, cuyo tiempo de ejecución de animación es buscable y cuya reproducción de medios es gestionada por el marco.

Este skill es el contrato técnico: cómo construir un proyecto de hyperframes. El cuerpo a continuación es la guía de construcción; los detalles por tema se encuentran en references/ (índice a continuación), léelos bajo demanda. Otras inquietudes residen en los skills de dominio hermanos: hyperframes-animation, hyperframes-creative, media-use, hyperframes-cli, hyperframes-registry. El mapa de capacidades en /hyperframes indica lo que cubre cada uno.

Referencias

Archivo	Léelo para…
references/minimal-composition.md	comenzar desde el esqueleto de composición renderizable más pequeño
references/composition-patterns.md	elegir monolítico vs modular; estructurar un index.html modular; seleccionar un arquetipo de subcomp
references/data-attributes.md	buscar cualquier data-* (raíz / clip / host de subcomp / alias heredados); usar class="clip"
references/tracks-and-clips.md	elegir data-track-index, manejar superposición / z-index en la misma pista, temporizar un clip en relación con 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>, establecer volumen, recortar
references/determinism-rules.md	construir una línea de tiempo buscable; prohibiciones de determinismo; la 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 planificar → bosquejar → construir en un tablero activo, compartido por todo flujo de trabajo de planificación de guion gráfico
references/production-loop.md	llevar un plan aprobado a un video entregado: las dependencias de etapa (audio, fotogramas, ensamblaje, transiciones, subtítulos, verificar, entregar). Una construcción libre sigue directamente
references/brief-contract.md	las reglas básicas del resumen: derivación de modo (colaborativo / autónomo), registro de campos compartidos, invariantes de preguntas (la pregunta en sí 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 la SCRIPT.md opcional con narración bloqueada
references/subagent-dispatch.md	mapear los verbos de despacho de subagentes (fan-out paralelo / fondo / espera) a tu arnés
references/frame-worker-core.md	el contrato del rol de frame-worker compartido: el constructor de paquetes de cada flujo de trabajo narrativo lo antepone al delta de ese flujo de trabajo en sub-agents/frame-worker.md
references/tailwind.md	trabajar en un proyecto Tailwind v4 (init --tailwind; el contrato en tiempo de ejecución difiere del v3 de Studio)

Para detalles específicos del tiempo de ejecución de animación (API de GSAP, Lottie, Three.js, etc.) ve a hyperframes-animation → adapters/<runtime>.md.

Construyendo una composición

Dos formas raíz (no intercambiables)

• Independiente (index.html de 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 tiempo de ejecución solo clona el contenido de <template>; todo lo exterior (incluyendo estilos/scripts de <head>) se descarta: coloca <style>/<script> dentro de la plantilla. ⚠ Regla de ID del host: el data-composition-id de la ranura del host debe ser exactamente igual al data-composition-id de la plantilla interna y a la clave window.__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 una caja 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 automatizadas para detectar esto; inspecciona una instantánea. Esqueleto → references/minimal-composition.md.

Una línea de tiempo en pausa

Cada composición registra exactamente una gsap.timeline({ paused: true }) en window.__timelines["<id>"] (clave = data-composition-id raíz), construida sincrónicamente al cargar la página. La duración del renderizado = data-duration raíz, no la longitud de la línea de tiempo. No anides manualmente sublíneas de tiempo en el host. Contrato completo (incluyendo tiempos de ejecución que no son GSAP) → references/determinism-rules.md + hyperframes-animation/adapters/.

Reglas no negociables (errores silenciosos que las compuertas automatizadas pueden pasar por alto)

Se muestran aquí; la justificación completa en la referencia vinculada. No las violes:

• Sin relojes en tiempo de renderizado / Math.random no seedeado / red / estado de entrada; sin repeat: -1 (usa un recuento finito). → determinism-rules.md
• Anima solo la lista blanca de propiedades visuales; nunca hagas tween de display o visibility sin procesar. autoAlpha de 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 clips o envoltorios dentro de un clip. El marco solo controla la visibilidad de .clip. No uses gsap.set para 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 de bloque y tener tamaño; los decorativos absolutos pulsantes necesitan espacio máximo. → determinism-rules.md
• <video>/<audio> funcionan a cualquier profundidad de anidamiento (incluso dentro de un <template> de subcomp o envoltorio); el marco es dueño de la reproducción y busca/decodifica los medios dondequiera que estén. La única advertencia son las líneas de tiempo, no la ubicación: una línea de tiempo de subcomp no puede animar elementos raíz del host. → variables-and-media.md
• Cada id debe 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 mediante getElementById, y los duplicados entre archivos pasan desapercibidos para lint. → composition-patterns.md
• El relleno de una 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 — la composición de fotogramas del productor puede eliminar el background del elemento raíz (el fotograma se renderiza negro) incluso si la vista previa/snapshot lo muestra correctamente. → composition-patterns.md

Editando composiciones existentes

• Lee los archivos primero. Conserva la temporización, pistas, IDs, variables y rutas de medios no relacionadas.
• Empareja los IDs de composición existentes y las claves de línea de tiempo.
• Al agregar un clip: elige un data-track-index que no se superponga o ajusta la temporización circundante intencionalmente.
• data-hidden en cualquier elemento de composición lo oculta TANTO en la vista previa como en el renderizado, anulando su ventana de tiempo; no es destructivo/reversible y es alternado por el icono de ojo de línea de tiempo de Studio.
• Al agregar una subcomposición: verifica su data-composition-id interno antes de cablear el host.

Validación

Usa hyperframes-cli para detalles de comandos

• npx hyperframes check pasa (0 hallazgos en lint, tiempo de ejecución, diseño, movimiento y contraste)
• Proyectos con subcomposiciones: npx hyperframes snapshot --at <midpoints> y examina cada fotograma
• npx hyperframes preview para revisión (el usuario puede editar cualquier cosa en la línea de tiempo de Studio)
• npx hyperframes render solo después de la aprobación del usuario