EvoFlow — Flujo de trabajo general de video

media-use: Antes de obtener audio/imágenes, llama a /media-use para resolver BGM/SFX/imágenes del catálogo de HeyGen. Ejecuta --adopt primero para registrar los activos existentes. Consulta la skill /media-use.

general-video — flujo de trabajo general de video

Confirma la ruta antes de construir. Este es el predeterminado para la creación de composiciones personalizadas. Si la entrada se ajusta claramente a un flujo de trabajo especializado, prefierelo: producto comercializado → /product-launch-video; sitio web general → /general-video; explicador de tema → /faceless-explainer; PR de GitHub → /pr-to-video; material existente → /embedded-captions · /talking-head-recut; motion graphic breve sin narración → /motion-graphics; puerto de Remotion → /remotion-to-hyperframes. Fuera de alcance: datos en vivo/en tiempo de renderizado, edición estilo NLE de un video terminado, o producir material que HyperFrames no pueda capturar. ¿No estás seguro? Lee /hyperframes primero.

Construye exactamente lo que se pidió. Una tarjeta de título es una tarjeta de título — no una tarjeta de título + tres escenas de apoyo + música ambiental + subtítulos. Si las escenas o elementos adicionales realmente mejoran la pieza, proponlos; no los agregues en silencio. Para ediciones pequeñas (corregir un color, ajustar una duración, agregar un elemento), omite los pasos de planificación y ve directamente a la construcción.

Enfoque

Descubrimiento — solo para solicitudes abiertas

Para solicitudes vagas y exploratorias ("haz algo para nuestra marca", "una intro genial") — entiende la intención antes de elegir colores:

• Audiencia — ¿quién mira? desarrolladores / ejecutivos / consumidores generales?
• Plataforma — ¿dónde se reproduce? redes sociales (15s) / hero del sitio web / demo de producto / interno?
• Prioridad — ¿qué importa más? calidad de movimiento / precisión del contenido / fidelidad de marca / velocidad?
• Variaciones — una mejor toma, o 2-3 opciones significativamente diferentes (diferente ritmo, energía o estructura — no solo cambios de color)?

Para solicitudes específicas ("agrega una tarjeta de título", "corrige el tiempo de la escena 3"), omite el descubrimiento.

Paso 1 — Sistema de diseño → hyperframes-creative

Establece primero la identidad visual. Si el proyecto tiene una especificación de diseño, léela (precedencia frame.md → design.md → DESIGN.md; trátala como verdad de marca — colores exactos, fuentes, restricciones).

Si no existe especificación, DEBES leer AMBOS hyperframes-creative/references/house-style.md Y hyperframes-creative/references/video-composition.md antes de elegir cualquier color o fuente. house-style.md proporciona el aperturador de "interpreta el prompt / genera contenido real", la lista perezosa predeterminada y la receta de capas; video-composition.md proporciona la densidad/escala de medio de video / detallado de primer plano (barras de datos, marcas de registro, metadatos monoespaciados, "8-10 elementos, dos que el usuario no pidió") que separa lo "producido" de lo "generado". Leer solo uno es la omisión más común — video-composition.md es el que los agentes se saltan, y es exactamente el que evita una salida plana, centrada y parecida a una página web. No te inventes una paleta y te saltes estos; pasar a hyperframes-creative es obligatorio aquí, no una rama opcional. Desde allí, también toma un estilo/estado de ánimo nombrado → references/visual-styles.md, o el selector interactivo → references/design-picker.md, según sea necesario. La especificación/estilo define la marca, no las reglas de composición.

Encuentra el ángulo (brief vago, sin especificación): antes de elegir colores, escribe UNA oración — ¿qué evoca este nombre/palabra/tema, y qué mundo visual (metáfora, escenario, instrumento, motivo) lo expresa? Ej. una herramienta de ciberseguridad → puertas de bóveda / líneas de escaneo perimetral / pestillos de cerradura; una app de meditación → marea, respiración, lento florecimiento de luz. Lee el significado del tema, no solo sus letras; elige un ángulo concreto sobre un cambio de estilo literal. Este es el sustituto económico de la expansión de prompt (Paso 2) en piezas de una sola escena, donde la expansión se omite correctamente — y es la diferencia entre un concepto diseñado y un logo genérico sobre un degradado.

Paso 2 — Expansión de prompt → hyperframes-creative

Ejecuta para cada composición de varias escenas (omite para piezas de una sola escena y ediciones triviales). Fundamenta la solicitud contra la especificación de diseño + estilo de la casa en un intermedio consistente que el trabajo posterior lea de la misma manera. Consulta hyperframes-creative/references/prompt-expansion.md.

Paso 3 — Planificar

Antes de escribir HTML, piensa a alto nivel:

1. Qué — la experiencia del espectador: arco narrativo, momentos clave, latidos emocionales.
2. Estructura — cuántas composiciones, sub-comp vs en línea, qué pistas llevan video / audio / superposiciones / subtítulos. Para la decisión de archivo único monolítico vs modular con sub-comp, consulta hyperframes-core/references/composition-patterns.md § Dos Arquitecturas (regla general: ≥3 cortes de escena duros, o cualquier escena reutilizada → modulariza; una pieza corta de una sola escena permanece en un archivo).
3. Ritmo — nombra el patrón antes de implementarlo (ej. rápido-rápido-LENTO-SHADER-mantener); consulta hyperframes-creative/references/beat-direction.md.
4. Tiempo — qué clips impulsan la duración, dónde caen las transiciones, el ritmo.
5. Diseño — construye el estado final primero (ver más abajo).
6. Animar — luego agrega movimiento a través de hyperframes-animation.

Diseño Antes de la Animación

Coloca cada elemento donde se encuentra en su momento más visible — completamente entrado, correctamente colocado, sin salir aún. Escríbelo como HTML + CSS estático primero. Sin GSAP todavía.

Por qué: si posicionas los elementos en su estado inicial animado (fuera de pantalla, escalados a 0, opacidad 0) y los interpolas hacia donde crees que aterrizan, estás adivinando el diseño final: las superposiciones permanecen invisibles hasta el renderizado. Construye el estado final primero y ves y corriges los problemas de diseño antes de agregar movimiento.

1. Identifica el fotograma héroe de cada escena — el momento en que la mayoría de los elementos son visibles simultáneamente. Ese es el diseño que construyes.
2. Escribe CSS estático para ese fotograma. El contenedor de contenido debe llenar la escena con relleno, no con desplazamientos absolutos:

.scene-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 120px 160px; /* el relleno posiciona el contenido; llena cualquier tamaño de escena */
  gap: 24px;
  box-sizing: border-box;
}

Nunca uses position: absolute; top: Npx en un contenedor de contenido — se desborda cuando el contenido es más alto que el espacio. Reserva el posicionamiento absoluto para elementos decorativos.

⚠ El width/height: 100% anterior solo funciona si cada ancestro tiene una altura resuelta. La raíz <div data-composition-id> y cualquier envoltorio entre ella y .scene-content debe tener tamaño (position: relative; width: 1920px; height: 1080px en la raíz — consulta hyperframes-core → "La raíz debe tener tamaño"). Si omites esto, el contenedor flex se colapsa a ~0, el contenido se amontona en la esquina superior izquierda, y el primer glifo se recorta en x=0 — mientras lint/inspect aún informan 0 problemas. Y mantén siempre el padding (≥80px) en .scene-content: es el margen de seguridad del título. Nunca lo reemplaces con solo gap.

3. Agrega entradas — anima DESDE fuera de pantalla/invisible HASTA la posición CSS con gsap.from() (en sub-composiciones prefiere gsap.fromTo() para que el estado inicial sea explícito; consulta hyperframes-core/references/sub-compositions.md). La posición CSS es la verdad fundamental; la interpolación es el viaje hacia ella.
4. Las salidas son manejadas por transiciones — según las reglas de transición de escena en hyperframes-animation/transitions/, solo la escena final anima los elementos hacia afuera; entre escenas, la transición ES la salida.

Espacio compartido a través del tiempo: si el elemento A sale antes de que el elemento B entre en la misma área, ambos aún necesitan posiciones CSS correctas para sus respectivos fotogramas héroe — el orden de la línea de tiempo evita que coexistan, y el paso de diseño detecta la superposición accidental. Los brillos/sombras en capas y la profundidad de pila-z son superposición intencional; el paso se trata de detectar colisiones no intencionales (dos titulares uno encima del otro, contenido que se sale del fotograma).

Construir — delegar a las skills de dominio

Esto mapea la superficie completa de la skill (consulta la descripción) a sus referencias — no exhaustiva; cuando una intención no esté listada, enruta a través de hyperframes-creative (apariencia/concepto), hyperframes-animation (movimiento), hyperframes-core (contrato), hyperframes-media (audio/subtítulos). La primera fila es ADITIVA — léela Y tu fila de intención, no una o la otra.

Construyendo…	Lee primero (en orden)
SIEMPRE — cada pieza no trivial, además de tu fila de intención a continuación	hyperframes-creative/references/house-style.md + references/video-composition.md (también controlado en Paso 1 / HARD-GATE; el detallado de primer plano "producido, no generado")
Tipografía cinética / centrada en texto	hyperframes-animation/techniques.md (tipo cinético) + adapters/gsap-easing-and-stagger.md + rules/kinetic-beat-slam.md
Tarjeta de título / tercio inferior / superposición / PiP / texto detrás del sujeto	hyperframes-creative/references/composition-patterns.md + (para el fotograma centrado/dimensionado) hyperframes-core → "La raíz debe tener tamaño"
Revelación de logo / marca	hyperframes-animation/rules/svg-path-draw.md (dibujar) + rules/3d-text-depth-layers.md + rules/scale-swap-transition.md
Datos / estadísticas / números	hyperframes-animation/rules/counting-dynamic-scale.md + rules/stat-bars-and-fills.md + hyperframes-creative/references/data-in-motion.md
Demo de producto / app / UI	hyperframes-animation/rules/3d-page-scroll.md + rules/cursor-click-ripple.md + rules/press-release-spring.md
Reactivo a audio / impulsado por música	hyperframes-creative/references/audio-reactive.md (pre-extraer bandas; mapear a movimiento)
Narrado / locución / música / SFX / subtítulos	hyperframes-media → el motor de audio compartido scripts/audio.mjs (una llamada = TTS + BGM + SFX → audio_meta.json); autoría de subtítulos + colocación de activos a través de hyperframes-core. Consulta Audio a continuación.
Varias escenas / transiciones	hyperframes-animation/transitions/overview.md luego transitions/catalog.md (no terminas después de la descripción general — la receta GSAP está en el catálogo)
Modular / sub-composiciones	hyperframes-core/references/composition-patterns.md + references/sub-compositions.md

Audio: un motor (TTS · BGM · SFX)

Solo cuando la pieza lo requiera (según "construye exactamente lo que se pidió" — sin música ambiental en una tarjeta de título). No crees TTS manualmente ni consigas una copia de otro proveedor: escribe un audio_request.json neutral y llama al motor compartido en hyperframes-media. Se degrada automáticamente según un interruptor: credencial de HeyGen presente → TTS de HeyGen + recuperación de música/SFX; ausente → TTS de ElevenLabs/Kokoro, generación de BGM de Lyria/MusicGen y la biblioteca SFX empaquetada. Lista completa de banderas + esquema de solicitud/meta: el comentario de encabezado de hyperframes-media/scripts/audio.mjs.

// audio_request.json — una línea por segmento narrado; `id` es tuyo (une audio_meta de vuelta)
{
  "lines": [
    { "id": "s1", "text": "Tu línea de apertura.", "sfx": ["whoosh"] },
    { "id": "s2", "text": "El siguiente ritmo." },
  ],
  "bgm": { "query": "fondo cinematográfico tranquilo" }, // omite "mode" → auto (recupera si HeyGen, sino genera); "none" para deshabilitar
}

# <MEDIA_DIR> = el directorio de la skill hyperframes-media instalada (hermano de esta skill)
node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json

Luego lee audio_meta.json: monta cada voices[].path + (bgm.path, sfx[]) como pistas <audio> y usa voices[].words para subtítulos, todo según hyperframes-core (pistas de audio + autoría de subtítulos). Si BGM tomó la ruta de generación (bgm_pending: true), ejecuta hyperframes-media/scripts/wait-bgm.mjs antes del renderizado final.

Lista de verificación de salida → hyperframes-cli

• La identidad visual se basa en la especificación o en house-style.md.
• Se estableció un ángulo de concepto antes de elegir colores (para piezas que no son ediciones triviales).
• Se eligió un par de fuentes de la lista de incrustación.
• Se aplicaron las reglas de primer plano/densidad de video-composition.md.
• Se colocaron los elementos en su estado final antes de agregar animaciones GSAP.
• El contenedor raíz tiene tamaño (position: relative; width: 1920px; height: 1080px).
• .scene-content usa flexbox con padding ≥80px (no position: absolute).
• Las entradas/salidas se manejan según las reglas de transición.
• Se verificó la superposición intencional vs. accidental de elementos.
• El audio (si es necesario) se generó a través de hyperframes-media y se montó en las pistas.
• (Si BGM se generó) Se ejecutó wait-bgm.mjs antes del renderizado.
• Se ejecutó linter y no hay errores.