HyperFrames Vibe Video Show (16:9 Horizontal)

Skill de terceros diseñada para el modo "ordenador local" de Doubao: crea vídeos cortos educativos en formato horizontal 16:9 para el "Vibe Video Show" usando el framework HyperFrames, leyendo y escribiendo archivos locales del proyecto y ejecutando la CLI de HyperFrames en el terminal local. No depende de los comandos de barra /hyperframes de Claude Code o Cursor.

Requisitos previos (responsabilidad del usuario, el agente no los instala)

Tener Node.js ≥22 y FFmpeg instalados localmente.
La CLI de hyperframes debe estar disponible y el proyecto debe estar inicializado con npx hyperframes init <nombre>.
La carpeta del proyecto debe estar autorizada para la tarea actual del ordenador local de Doubao.

Flujo de ejecución al recibir una tarea

Leer el index.html en el directorio del proyecto (si existe) para entender la línea de tiempo, storyboard, diseño y estilos existentes.
Generar el guion gráfico: Según el tema, duración y tipo de contenido proporcionados por el usuario, seleccionar automáticamente un sistema de escritura (ver "Árbol de decisión del sistema de escritura") y generar un guion gráfico completo (con marcas de tiempo + imágenes + subtítulos + anotaciones estructurales). Entregarlo al usuario para su confirmación primero.
Una vez confirmado el guion gráfico, escribir el código de composición completo y autónomo de HyperFrames en index.html.
Ejecutar npx hyperframes lint para validar. Si hay errores, leer la información del error, corregir el código y reescribir el archivo hasta que pase la validación.
Ejecutar npx hyperframes preview para iniciar una vista previa local.
Informar: guion gráfico confirmado, archivos actualizados, resultados de lint, estado de la vista previa y el siguiente comando disponible.
Tras la confirmación del usuario, ejecutar npx hyperframes render para exportar un MP4 (se puede especificar el nombre del archivo con --output <nombre>.mp4).

Reglas de estructura de escritura (Modo Maestro de Escritura + Emparejamiento Automático de Estructura Educativa)

Eres un maestro de la escritura profesional, experto en explicar conceptos abstractos a la gente común: Rechaza acumular jerga técnica. Depende de imágenes concretas y pequeñas historias para explicar. El objetivo es que el espectador lo entienda y se sienta conmovido.

Árbol de decisión del sistema de escritura (primero elige el sistema, luego escribe el texto)

Al recibir la tarea, primero usa el siguiente árbol de decisión para determinar qué sistema de escritura usar. No apliques una plantilla directamente:

¿El usuario ha solicitado explícitamente "ritmo fuerte / énfasis en el compás / explosión en el clímax / estilo documental"?
├── Sí → Usa la "Plantilla de clímax clásico impulsada por palabras ancla" (diseño de ritmo fuerte con precisión de fotogramas)
└── No → ¿Cuál es la duración total del vídeo?
    ├── ≤30 segundos → Usa el "Sistema de emparejamiento estructural" (formato muy corto, impacto cognitivo rápido)
    ├── 30 segundos ~ 3 minutos → Usa el "Sistema de emparejamiento estructural" (formato mediano-largo, cadena lógica completa)
    └── >3 minutos → Usa el "Sistema de emparejamiento estructural" (formato de divulgación larga, un mini clímax cada 30 segundos)

Regla de combinación: Se puede tomar prestado localmente el diseño de la plantilla de palabras ancla sobre la base del "Sistema de emparejamiento estructural" (por ejemplo, configurar un punto de explosión de ritmo fuerte en medio del vídeo), pero no se debe copiar ciegamente la línea de tiempo fija de la plantilla de palabras ancla.

Reglas de adaptación de duración (plantilla de palabras ancla):

La sección del anzuelo (0-16.4s) + el clímax de ritmo fuerte (17s) es la estructura dorada, fija e inmutable. No se puede mover debido a un cambio en la duración total.
El diseño original dura unos 60 segundos (anzuelo 16.4s + clímax 3.6s + sección educativa ~32s + final 8s).
Si el usuario da una duración más larga (ej. 60s / 90s), solo se alarga la sección de explicación educativa; las posiciones de tiempo del anzuelo y el clímax permanecen iguales.
El giro final se fija en los últimos 5-8 segundos, y su posición tampoco cambia.

Puntos de tiempo fijos para cada sección:

Sección	Punto de tiempo fijo	Descripción
Inicio del anzuelo	0s	Primera frase: "Tú ya… ¿por qué todavía…?"
Oscurecimiento para respirar	16.4-16.9s	Casi en silencio, la imagen se oscurece
Explosión de ritmo fuerte	17.0s	La palabra ancla golpea, efecto de sonido impactante, posición siempre fija
Aparición del término	17.6s	Texto pequeño debajo de la palabra ancla
Inicio de la sección educativa	~20s	Transición desde mantener la sensación de respiración a la sección de explicación
Giro final	Últimos 5-8s	Redefinición de la palabra ancla

Conceptos centrales

Apertura: Primero escribe sobre la situación real actual del espectador, luego introduce el conocimiento; el conocimiento sirve para explicar "a ti mismo", no es simplemente una divulgación de cosas externas.
Prohibido: Al principio, no hables de historia ni presentes jerga técnica; la historia, los personajes y el material de experimentos se colocan todos después del clímax del contenido.
Párrafos visuales: Diseña múltiples grupos de imágenes que cambian rápidamente, cada escena individual dura unos 3 segundos, cada grupo se combina con un subtítulo; el mismo fenómeno central puede replicarse a diferentes escalas (personal → natural → social), permitiendo que el espectador descubra que el fenómeno está en todas partes.
Conexión coloquial: Usa expresiones coloquiales como "en pocas palabras", "piensa", "por ejemplo" para reemplazar la jerga técnica.

Sistema de emparejamiento estructural (Núcleo)

Al recibir la entrada del usuario, sigue estos seis pasos para emparejar automáticamente la combinación estructural más adecuada. No apliques ciegamente una plantilla fija, sino que combínala de manera flexible según el tema, la duración y el tipo de contenido.

Paso 1: Analizar los elementos de entrada del usuario

El usuario puede proporcionar los siguientes elementos (todos opcionales; si no se proporcionan, el agente los determina automáticamente):

Tema / Núcleo de conocimiento: De qué se trata (obligatorio)
Duración total: Cuántos segundos / minutos
Tipo de contenido: Dato curioso / Experimento científico / Salud y vida / Historia y cultura / Otro
Preferencia de estilo: Cyberpunk / Sanador / Estilo chino / Minimalista, etc.
Paleta de colores: Tono especificado

El agente completa automáticamente los elementos faltantes y, al inicio del guion gráfico, indica qué anzuelo, qué lógica principal, qué tipo de final y la duración adaptada, para facilitar el ajuste del usuario.

Paso 2: Emparejamiento automático del anzuelo de apertura (elegir 1 de 4, periodo dorado de retención 0-3 segundos)

Objetivo principal: Romper la inercia de pasar el dedo, hacer que el usuario se detenga. Se selecciona automáticamente según el tema:

Tipo de anzuelo	Escenario de aplicación	Plantilla de frase	Ejemplo
Conclusión contraintuitiva	El tema en sí tiene un contraste cognitivo	Presentar directamente una conclusión subversiva, creando un conflicto cognitivo	"Apagar un fuego con agua caliente es en realidad más rápido que con agua fría, el 90% de la gente se equivoca"
Pregunta existencial	Puntos débiles de la vida / Curiosidad	Atacar la duda directamente, guiando a esperar la respuesta	"¿Por qué está prohibido usar el móvil en las gasolineras? La verdad no es ni de lejos lo que piensas"
Suspenso del fenómeno	Hay maravillas visuales / imágenes anómalas	Mostrar primero la imagen sorprendente, sin decir la razón	(Una pelota de ping-pong flotando en la corriente de un secador) "¿Sabes por qué la pelota no se cae?"
Impacto numérico	Fuerte contraste de datos / Dato curioso	Usar números extremos para reforzar el contraste	"Tu teléfono móvil alberga más de 1.000 tipos de bacterias"

Principio de selección: Cuanto más contraintuitivo sea el tema, más se usa el tipo de conclusión contraintuitiva; cuanto más cercano a la duda cotidiana, más se usa el tipo de pregunta existencial; cuanto más maravilla visual, más se usa el tipo de suspenso del fenómeno; cuanto más asombroso sea el número, más se usa el tipo de impacto numérico. Se pueden combinar (ej. impacto numérico + contraintuitivo), pero el núcleo no supera 1.

Paso 3: Emparejamiento automático de la divulgación principal (elegir 1 de 4, zona de información central)

Objetivo principal: Explicar el conocimiento complejo de forma popular y clara, con una lógica clara y sin demoras. Se selecciona automáticamente según el tipo de conocimiento:

Lógica organizativa	Escenario de aplicación	Cadena lógica	Características
Desglose en puntos	Divulgación de principios, sentido común	Plantear la pregunta → Explicar en 2-3 puntos → Cada punto con imagen / subtítulo	Salida estructurada, reduce la barrera de comprensión
Razonamiento progresivo	Explicación de fenómenos	Fenómeno cotidiano → Causa superficial → Principio subyacente → Aplicación práctica	Capas de profundidad, acorde con las leyes cognitivas
Verificación experimental	Divulgación práctica / Hardcore	Plantear hipótesis → Mostrar materiales → Proceso experimental → Mostrar fenómeno → Interpretar el principio	Usar lo visual en lugar de la prédica, alto impacto
Corrección de mitos	Divulgación de conceptos erróneos	Error popular → Señalar el error → Conclusión correcta → Base científica	Primero destruir, luego construir, punto de memoria fuerte

Principio de selección: Sentido común / Principios → Desglose en puntos; Fenómeno / Por qué → Razonamiento progresivo; Práctica / Experimentos → Verificación experimental; Errores / Rumores → Corrección de mitos.

Paso 4: Emparejamiento automático del cierre (elegir 1 de 4, últimos 5-10 segundos)

Objetivo principal: Mejorar la tasa de finalización, interacción y crecimiento de seguidores. Se selecciona automáticamente según el objetivo del vídeo:

Tipo de cierre	Escenario de aplicación	Plantilla de frase	Ejemplo
Refuerzo del resumen	Contenido práctico / Alta densidad de conocimiento	Resumir la conclusión central en 1 frase	"En resumen, apagar el fuego con agua caliente es más rápido, el núcleo es el efecto de asfixia del vapor de agua"
Llamada a la interacción	General / Para pedir comentarios	Pregunta abierta para guiar comentarios	"¿Conoces otros datos científicos contraintuitivos? Cuéntanoslo en los comentarios"
Gancho de seguimiento	Contenido en serie / Periodo de crecimiento	Avanzar el contenido de la próxima entrega, guiar a seguir	"La próxima vez hablaremos de por qué al tocar metal en invierno se te pega la lengua, sígueme para no perdértelo"
Extensión del valor	Tipo de utilidad práctica	Añadir escenarios de aplicación en la vida	"Este principio se puede usar en casa para… muy práctico"

Principio de selección: Vídeos cortos priorizan refuerzo del resumen (cierre rápido); duración media-larga prioriza combinación de llamada a la interacción + refuerzo del resumen; cuentas en serie priorizan gancho de seguimiento; contenido de vida prioriza extensión del valor.

Paso 5: Fórmula de adaptación según la duración

Ajustar automáticamente la densidad estructural y el ritmo según la duración total:

Duración	Fórmula estructural	Características
15-30 segundos ultra corto	Anzuelo (0-3s) + Conclusión central + Explicación mínima (3-25s) + Cierre interactivo (25-30s)	Sin argumentación compleja, conclusión en una frase + explicación en una frase, ritmo muy rápido, centrado en el impacto cognitivo
1-3 minutos mediano-largo	Anzuelo fuerte de apertura → 2-3 puntos de conocimiento clave / pasos experimentales → Cada punto con imagen visualizada → Resumen + Llamada a la acción	Densidad de información moderada, cadena lógica completa, es la duración más común para cuentas de divulgación
3-5 minutos largo	Introducción de fuerte suspenso → Contexto → Unos 3 argumentos principales → Análisis profundo → Resumen edificante	Adecuado para campos verticales profesionales (astronomía / mecánica / medicina), retener por profundidad de contenido, establecer un mini clímax cada 30 segundos para evitar que el espectador se vaya

Paso 6: Variante estructural por tipo de contenido

Ajustar el énfasis estructural según el tipo de contenido:

Tipo de contenido	Variante estructural	Núcleo
Datos curiosos	Pregunta contraintuitiva → Dar la respuesta directamente → 1-2 detalles de apoyo → Pregunta interactiva	Rápido, curioso, divertido, sin argumentación profunda, centrado en la sorpresa del "no me lo esperaba"
Experimentación científica	Plantear una pregunta → Mostrar materiales → Operación experimental → Cámara lenta del fenómeno → Explicación del principio → Aplicación en la vida	Impacto visual primero, principio coloquial, usar imágenes en lugar de largas explicaciones orales
Salud / Vida	Introducir escenario de dolor → Error común → Solución correcta → Explicación científica → Sugerencia de acción	Cercano a la vida, primero tocar el punto de dolor y luego dar la solución, reforzar la utilidad y la persuasión
Historia / Cultura	Apertura con pregunta curiosa → Narración con historia → Insertar puntos de conocimiento → Resumen edificante	Usar historias para llevar el conocimiento, evitar la sensación de sermón, aumentar el interés del contenido

Principios de bonificación estructural (para todo el vídeo)

Refuerzo de subtítulos: Las conclusiones centrales y los números de puntos deben destacarse con subtítulos llamativos para reducir el coste de comprensión; agrandar o cambiar de color los números / palabras clave.
Control del ritmo: Cambiar de punto de información o imagen cada 10-15 segundos para evitar la monotonía de los planos largos; en vídeos cortos, cambiar de imagen cada 3-5 segundos.
Priorizar lo visual: Lo que se pueda mostrar con animaciones, experimentos o diagramas, no se debe hacer solo con locución; lo que se pueda expresar con imágenes, no se debe acumular con texto.
Narrativa en segunda persona: Usa "tú" a lo largo de todo el vídeo, para que el espectador sienta que el conocimiento le explica a él, no que es un espectador de la historia de otra persona.

Plantilla de clímax clásico impulsada por palabras ancla (precisión de fotogramas, activar para ritmo fuerte / énfasis en el compás)

Cuando el usuario solicite ritmo fuerte, énfasis en el compás, explosión en el clímax o narrativa documental, activa esta plantilla. El núcleo es: todo el vídeo se desarrolla en torno a una "palabra ancla", estableciendo un punto de explosión de ritmo fuerte en el segundo 17, para que el espectador recuerde el concepto central en el punto álgido de la emoción.

Paso 1: Encontrar la palabra ancla primero (debe hacerse antes de escribir cualquier texto)

La palabra ancla es el clavo de todo el vídeo: de 2 a 6 caracteres, es la situación, la confusión o el momento contraintuitivo en el que este principio cae en la vida del espectador — no es el término en sí mismo.

Tres criterios para una buena palabra ancla:

Identificación: El espectador la ve y piensa "esto va por mí".
Abarcadora: Una misma palabra puede resumir todo el principio.
Reversible: Puede ser redefinida al final — al principio es una dificultad, al final se convierte en comprensión, alivio o fortaleza.

Ejemplos de palabras ancla:

Principio	Palabra ancla	Inicio (dificultad)	Final (giro)
Efecto post-rotatorio (movimiento aparente)	Estancado	Correr con todas tus fuerzas, pero sin avanzar	Comprender la naturaleza de la ilusión del movimiento
Coste hundido	No querer soltar	No querer rendirse, hundirse cada vez más	Entender el poder de saber parar a tiempo
Sesgo de supervivencia	Los invisibles	Ver solo a los supervivientes, ignorar a la mayoría silenciosa	Aprender a ver la verdad ignorada

Paso 2: Sección del anzuelo (0～16.4 segundos)

Principio central: Primero escribe sobre la situación del espectador, luego habla del conocimiento. El conocimiento sirve para explicar "a ti".

Al principio, no hables de historia ni uses jerga técnica; la historia, los personajes y los experimentos se colocan todos después del clímax.
Formato obligatorio de la primera frase: Escribe en segunda persona la paradoja o confusión que está experimentando el espectador. Frase fija: «Tú ya…, ¿por qué todavía…?»
La sección del anzuelo avanza con párrafos visuales: de 3 a 4 grupos de imágenes que cambian rápidamente, cada uno de unos 3 segundos, replicando el mismo fenómeno central a diferentes escalas (personal → natural → social).

Paso 3: Clímax de ritmo fuerte (segundo 17, precisión de fotogramas)

En el segundo 16.5～16.9 hay un "respiro" (casi en silencio), y en el 17.0 el ritmo fuerte golpea. El emparejamiento visual se ejecuta estrictamente:

Punto de tiempo	Acción visual	Audio correspondiente
16.4～16.9	La imagen se oscurece por completo, todos los elementos se desvanecen	Respiro (casi en silencio)
16.9～17.0	Quietud durante unos 3 fotogramas	Silencio total
17.0	La página se ilumina de repente o la mancha de tinta explota (de forma coherente con el estilo visual de todo el vídeo); la palabra ancla enorme aparece al mismo tiempo (ocupa aproximadamente 1/3 del ancho de la imagen); un círculo de mancha de tinta o halo se expande desde el centro hacia afuera	El ritmo fuerte golpea
17.6	Aparece una línea de texto pequeño debajo de la palabra ancla: Nombre del término (chino-inglés)	Eco
17.6～aprox. 20	Mantener la imagen, solo con una ligera sensación de respiración (la palabra ancla se escala ligeramente / el halo pulsa)	Pausa en la narración, mantener el silencio

Paso 4: Sección de explicación educativa (desde ~20 segundos hasta antes del final)

Objetivo principal: Explicar claramente el principio detrás de la palabra ancla, para que el espectador pase de la "confusión" a la "comprensión". Los materiales históricos, personajes y experimentos se desarrollan aquí, pero todos sirven para explicar "por qué has experimentado esa dificultad".

Forma de organizar la explicación educativa (selecciona automáticamente según el tipo de principio):

Forma de organización	Escenario de aplicación	Cadena lógica
Explicación por puntos	Principios, sentido común	Plantear la causa central → Explicar el mecanismo en 2-3 puntos → Cada punto con una imagen y un subtítulo
Explicación progresiva	Explicación de fenómenos	Fenómeno superficial → Causa intermedia → Principio subyacente → Por qué te afecta
Verificación experimental	Divulgación práctica / Hardcore	Plantear hipótesis → Proceso experimental → Mostrar fenómeno → Interpretar el principio (volviendo a la palabra ancla)

Requisitos estrictos del texto:

Narrativa en segunda persona durante todo el proceso: Usa "tú" para narrar, cada explicación debe hacer que el espectador sienta "ah, entonces mi dificultad anterior se debía a esto".
Volver a la palabra ancla: Cada 2-3 frases hay que volver a la palabra ancla, no puedes desviarte a otro tema; la palabra ancla es el hilo conductor de todo el vídeo, la sección educativa es tensar el hilo.
Priorizar lo coloquial: El término ya se ha mostrado en el clímax, aquí se explica todo con palabras sencillas — "en pocas palabras", "piensa", "por ejemplo", está prohibido acumular vocabulario profesional.
Ritmo consistente: Cambiar de imagen cada 3-5 segundos, manteniendo el mismo ritmo que la sección del anzuelo, sin ralentizarse de repente.
Refuerzo de subtítulos: Las conclusiones centrales, los números clave y los números de puntos deben destacarse con subtítulos llamativos para reducir el coste de comprensión.

Ejemplo de texto de la sección educativa (con el ejemplo de "Efecto post-rotatorio / Estancado"):

20-23s [Explicación 1] Miras el círculo giratorio durante 30 segundos, luego al detenerte miras la pared inmóvil, y la pared se mueve → Subtítulo: El ojo primero se "cansa" 23-26s [Explicación 2] Esto se debe a que las células de tu retina han estado descargando en una dirección, y al parar, vuelven elásticamente hacia atrás por inercia → Subtítulo: La inercia del nervio óptico 26-29s [Explicación 3] Así que, aunque estás quieto en el mismo sitio, sientes que el mundo corre en dirección contraria → Subtítulo: No te mueves, es el ojo el que "miente" 29-32s [Explicación 4] Este fenómeno se llama post-efecto de movimiento. Todos los sistemas sensoriales tienen un "residuo de fatiga" similar — el oído también tiene alucinaciones auditivas después de escuchar ruido durante mucho tiempo, la mano también siente que el agua se calienta después de tocar agua fría mucho tiempo → Subtítulo: No solo el ojo, todo el cuerpo tiene "inercia"

Paso 5: Giro final de la palabra ancla (últimos 5-8 segundos)

Objetivo principal: Transformar la palabra ancla de "dificultad" a "comprensión / alivio / fortaleza", formando un cierre emocional.

Formato obligatorio:

La última frase debe redefinir la palabra ancla — al principio era la dificultad del espectador, al final se convierte en fortaleza o comprensión.
Estructura de frase de referencia: «Resulta que… no es tu culpa, sino…» / «Al entender esto, ya no…» / «El llamado…, en realidad es…»
La imagen vuelve a una escena que haga eco de la sección del anzuelo (ej. si la sección del anzuelo era un escritorio, el final también vuelve al escritorio, pero con un estado de ánimo diferente).

Ejemplo de giro final (con el ejemplo de "Estancado"):

32-36s [Giro final] Resulta que "estancado" no es que no te esfuerces lo suficiente, sino que tu sistema sensorial te está gastando una pequeña broma. Al entender esto, ya no te angustiarás por sentir que no avanzas a pesar de estar en movimiento — solo necesitas parar y dejar que tus ojos descansen un momento. Imagen: Desde el vórtice giratorio que se desvanece lentamente, volver al escritorio tranquilo del principio, con la luz del sol brillando sobre la mesa.

Formato de entrada

El usuario proporciona: duración total, tema / núcleo de conocimiento, y opcionalmente el tipo de contenido / paleta de colores / preferencia de estilo. El agente empareja automáticamente el tipo de anzuelo, la lógica principal y el tipo de cierre, generando un guion gráfico completo (con marcas de tiempo + imágenes + subtítulos + anotaciones estructurales).

Formato de salida del guion gráfico: Cada viñeta debe estar anotada con [Tipo de anzuelo] [Lógica principal - Punto N] [Tipo de cierre], para que el usuario vea de un vistazo la elección estructural.

Ejemplo 1 (40 segundos, tipo de contenido: Dato curioso, tema: Entropía):

Elección estructural: Anzuelo de pregunta existencial + Cuerpo de razonamiento progresivo + Cierre de refuerzo del resumen (versión comprimida para el formato de 1-3 minutos) 0-4s [Anzuelo · Pregunta existencial] Ya has limpiado tu habitación hasta dejarla impecable, ¿por qué una semana después está desordenada otra vez? 4-7s [Cuerpo · Progresivo 1 · Escala personal] El escritorio recién ordenado, los libros se deslizan silenciosamente hacia el borde → Subtítulo: Las cosas siempre se deslizan hacia el caos por sí mismas 7-10s [Cuerpo · Progresivo 2 · Escala natural] Una gota de tinta cae en agua clara, se extiende lentamente y nunca vuelve a juntarse → Subtítulo: Las moléculas nunca dejan de propagarse 10-13s [Cuerpo · Progresivo 3 · Escala social] Una calle vieja que nadie barre, las hojas caídas se apilan una capa sobre otra → Subtítulo: El orden, una vez que nadie lo mantiene, se derrumba 13-16s [Cuerpo · Cierre del principio subyacente] Así que, el caos es el estado por defecto del mundo, y el orden es la excepción que requiere dinero y energía para mantenerla. 16-34s [Cuerpo · Material histórico posterior] Clausius propuso la entropía en 1865, la fórmula en la lápida de Boltzmann, un vaso de agua fría nunca se calentará solo… 34-40s [Cierre · Refuerzo del resumen] Luchar contra la entropía es una práctica de por vida para cada persona.

Ejemplo 2 (25 segundos, tipo de contenido: Salud y vida, tema: Beber agua fría vs agua tibia):

Elección estructural: Anzuelo de conclusión contraintuitiva + Cuerpo de corrección de mitos + Cierre de llamada a la interacción (adaptado al formato ultra corto de 15-30 segundos) 0-3s [Anzuelo · Conclusión contraintuitiva] ¿Que beber agua fría daña el estómago? Esta afirmación te ha engañado durante décadas. 3-8s [Cuerpo · Romper el mito] Mucha gente cree que el agua fría irrita el tracto digestivo → Subtítulo: ¿Agua fría = daño estomacal? 8-15s [Cuerpo · Establecer la conclusión] La verdad es que la temperatura del estómago siempre se mantiene a 37°C, el agua fría se calienta al instante al entrar y no puede dañar el estómago → Subtítulo: El estómago tiene su propio sistema de termorregulación 15-20s [Cuerpo · Revelación de la verdad] Lo que realmente daña el estómago es: beber mucho frío con el estómago vacío + una dieta irregular a largo plazo → Subtítulo: Los malos hábitos son los verdaderos culpables 20-25s [Cierre · Llamada a la interacción] ¿Tú sueles beber agua fría o tibia? Dímelo en los comentarios.

Ejemplos de proyectos completos (directorio examples/)

La skill incluye dos ejemplos completos listos para probar. Cópialos en tu proyecto y podrás ejecutar el flujo completo de lint / preview / render:

Ejemplo	Ruta	Sistema de escritura	Duración	Estilo
Divulgación de entropía	`examples/entropy-16-9/`	Desglose en puntos (plantilla básica)	40s	Fichas de conocimiento en oscuro
Cuanto más duermes, más cansado	`examples/sleep-tired-16-9/`	Plantilla de clímax con palabras ancla (explosión en 17s)	40s	Estilo tecnológico médico

Ambos ejemplos pasan la validación de lint (0 errores, 0 advertencias), salida HD de 1920×1080, y pueden servir como muestras de referencia para diferentes sistemas de escritura.

Reglas estrictas para escribir composiciones

Seguir estrictamente el contrato de composición de HyperFrames: el nodo raíz debe llevar data-composition-id, data-width, data-height, data-duration; los fragmentos usan class="clip" + data-start + data-duration; registrar una línea de tiempo de GSAP en pausa en window.__timelines["<id>"] (la clave debe coincidir con data-composition-id del nodo raíz).
Formato horizontal 16:9: <meta name="viewport" content="width=1920, height=1080">, el nodo raíz debe tener las mismas dimensiones; salida HD por defecto de 1920×1080.
Antes de escribir código, leer completamente references/hyperframes-contract.md para evitar todos los errores comunes de lint y las trampas de GSAP.
No usar <template> para envolver nodos raíz independientes; no generar fragmentos de código, debe ser un HTML completo e independiente.
Cuando haya ≥2 viñetas, usar una arquitectura de subcomposición modular: cada escena en un archivo compositions/scene-*.html (con <template> que contenga el style/script/nodo raíz de esa escena), el index.html principal monta cada escena con data-composition-src; el data-composition-id del anfitrión, el data-composition-id del nodo raíz dentro del archivo de subcomposición y la clave de window.__timelines deben ser idénticos. Ver la sección 8 de references/hyperframes-contract.md.

Ejemplo de código mínimo ejecutable (2 clips, se puede ejecutar directamente)

El siguiente es un ejemplo mínimo completo de index.html, que contiene 2 viñetas, elementos que atraviesan la transición y el registro de la línea de tiempo de GSAP. Úsalo como base para nuevas escenas:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, height=1080">
<title>Entropía · Ejemplo</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a0f; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }

  /* Contenedor raíz: 1920×1080, 16:9 */
  .composition {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #0a0a0f;
  }

  /* Fragmento clip: posicionamiento absoluto para cubrir todo, la visibilidad es controlada por el framework */
  .clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Viñeta 1: Escritorio desordenado */
  #scene-desk { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
  #scene-desk .book {
    position: absolute;
    width: 80px;
    height: 120px;
    background: #e94560;
    border-radius: 4px;
    left: 300px;
    top: 300px;
    transform-origin: center;
  }
  #scene-desk .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }

  /* Viñeta 2: Gota de tinta en agua clara */
  #scene-ink { background: linear-gradient(180deg, #0f3460 0%, #16213e 100%); }
  #scene-ink .drop {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #e94560 0%, transparent 70%);
    border-radius: 50%;
    left: 580px;
    top: 300px;
    transform: scale(0);
  }
  #scene-ink .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }
</style>
</head>
<body>

<!-- Nodo raíz: data-composition-id debe coincidir con la clave de window.__timelines -->
<div class="composition"
     data-composition-id="entropy-demo"
     data-width="1920"
     data-height="1080"
     data-duration="10">

  <!-- clip 1: 0-5 segundos, escena del escritorio -->
  <div class="clip" id="scene-desk" data-start="0" data-duration="5">
    <div class="book" id="book"></div>
    <div class="subtitle" id="desk-subtitle">Las cosas siempre se deslizan hacia el caos por sí mismas</div>
  </div>

  <!-- clip 2: 5-10 segundos, escena de la tinta expandiéndose (elemento que atraviesa: rojo del libro → rojo de la tinta) -->
  <div class="clip" id="scene-ink" data-start="5" data-duration="5">
    <div class="drop" id="ink-drop"></div>
    <div class="subtitle" id="ink-subtitle">Las moléculas nunca dejan de propagarse</div>
  </div>

</div>

<script>
  // Registrar una línea de tiempo de GSAP en pausa en window.__timelines
  window.__timelines = window.__timelines || {};

  const tl = gsap.timeline({ paused: true });

  // === Escena 1: Escritorio (0-5s) ===
  tl.from("#book", {
    x: 0, y: 0, rotation: 0,
    duration: 2, ease: "power2.out"
  }, 0.5);
  // El libro se desliza silenciosamente hacia el borde (representando el "caos")
  tl.to("#book", {
    x: 200, y: 100, rotation: 15,
    duration: 3, ease: "power1.inOut"
  }, 1);
  // Fundido de entrada del subtítulo
  tl.from("#desk-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 2);

  // === Transición: Elemento rojo del libro → Tinta roja (elemento que atraviesa en 5s) ===
  // Los elementos del clip anterior desaparecen naturalmente al final del clip, mientras los elementos del siguiente clip entran simultáneamente
  // Aquí se logra la ilusión de "un mismo elemento que atraviesa el antes y el después" mediante la correspondencia de colores

  // === Escena 2: Tinta expandiéndose (5-10s) ===
  tl.from("#ink-drop", {
    scale: 0, opacity: 0,
    duration: 0.5, ease: "power2.out"
  }, 5.2);
  tl.to("#ink-drop", {
    scale: 4, opacity: 0.6,
    duration: 4, ease: "power1.out"
  }, 5.5);
  tl.from("#ink-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 6);

  // Registrar en el ámbito global
  window.__timelines["entropy-demo"] = tl;
</script>

</body>
</html>

Notas clave:

data-composition-id="entropy-demo" debe coincidir exactamente con la clave de window.__timelines["entropy-demo"].
La unidad de data-duration son segundos, no milisegundos.
El parámetro de posición (segundo parámetro) de la línea de tiempo de GSAP también es en segundos.
No se debe hacer tween sobre los propios elementos clip (el framework controla su visibilidad), solo hacer tween sobre sus elementos hijos.
Transición de elementos que atraviesan: los elementos del clip anterior se transforman/mueven a un estado, y al comenzar el siguiente clip, entran desde una posición/forma similar, creando la ilusión de que "la misma cosa se mueve de forma continua".

Guía de selección de gráficos / animaciones para el storyboard (emparejamiento automático)

Al crear, selecciona automáticamente los gráficos y efectos del lado derecho según la imagen central del texto de cada viñeta, sin usar fijamente la cuadrícula/puntos dispersos/barras del ejemplo.

Flujo de selección

Analizar el texto de cada viñeta, extraer la imagen central (ej. "crecimiento/caos/posibilidad/orden/red/ciclo/atmósfera") y la intensidad emocional (austero / explosivo / onírico / épico / cyberpunk / sanador, etc.).
Según la tabla, seleccionar 1 gráfico principal para la imagen central, y se pueden superponer hasta 5 adornos auxiliares (partículas, efectos de luz, líneas decorativas, texturas de fondo, símbolos en las esquinas, resplandor, halo, fragmentos geométricos, etc.), y emparejar los efectos según la tabla; la cantidad y el tipo de adornos sirven a la emoción del texto, no es necesario llenar cada viñeta al máximo.
Comprobar la determinación: priorizar soluciones realizables con CSS/HTML; los gráficos complejos como fractales/autómatas celulares/3D/Shader/texturas/partículas deben implementarse de forma determinista (semilla fija, array precalculado, prohibido Math.random, reloj en tiempo real, solicitudes de red); los gráficos de datos usan datos ilustrativos.
Los gráficos deben estar dentro del marco de seguridad 16:9 (≥64px en los bordes), sin desbordar el lienzo; la densidad visual, la intensidad de los efectos especiales y la saturación del color se determinan por la emoción del texto, sin limitaciones uniformes de "moderación".

Mapa de semántica → gráficos → efectos (uso común)

Imagen de la viñeta	Gráfico recomendado	Efecto recomendado
Crecimiento / Establecer orden	Barras, escalones, crecimiento arbóreo, espiral áurea	Crecer desde abajo, elevarse gradualmente
Caos / Aumento de entropía / Desorden	Cuadrícula, puntos dispersos, fragmentos de Voronoi, grietas fractales	Deriva, difusión, fragmentación
Posibilidad / Ramificación	Diagrama de árbol, puntos dispersos, cuerdas, mapa mental	Divergir hacia afuera, crecimiento de ramas
Ciclo / Repetición	Gráfico circular, anillo, forma de onda, cicloide	Rotación, pulso, vaivén
Relación / Red	Topología de red, mapa de conocimiento, diagrama de fuerza dirigida	Conexión de nodos, iluminación progresiva
Tiempo / Proceso	Gráfico de líneas, gráfico de áreas, línea de tiempo	Crecimiento de trazos, extensión de trayectoria
Comparación / Distribución	Gráfico circular, gráfico de anillos, gráfico de radar, diagrama de caja	Despliegue de sectores, presentación elemento por elemento
Espacio / Estructura	Cuadrícula isométrica, nube de puntos, wireframe 3D	Construcción capa por capa, entrada con rotación
Atmósfera / Abstracto	Textura de ruido, interferencia de ondas, ondas estacionarias, flujo de partículas	Flujo, ondulación, disipación

El catálogo completo de candidatos (9 categorías: geometría básica, gráficos de datos, arte generativo de fractales, simulación y autómatas celulares, mapas de bits y texturas procedimentales, gráficos 3D, diagramas estructurales/de relaciones, gráficos de texto, gráficos en movimiento) y las restricciones de implementación determinista se encuentran en la sección 7 de references/hyperframes-contract.md "Catálogo de selección de gráficos".

Estilo del Vibe Video Show (16:9 Horizontal)

Principio central: El estilo visual lo determina el propio texto, buscando ser llamativo y moderno.

Principios de diseño

Paleta de colores: Determinar por el tema. Temperatura del color: temas fríos (azul/púrpura/negro = ciencia/tecnología/futuro), temas cálidos (naranja/rojo/amarillo = vida/salud/calidez emocional), temas neutros (blanco/gris/negro = minimalismo/moderno). Saturación: Los momentos clave deben tener alto contraste y saturación, el fondo puede ser relativamente bajo.
Composición tipográfica: Los títulos y los subtítulos usan una fuente sans-serif moderna con peso variable; la alineación usa principalmente la regla de los tercios, combinando centro e izquierda para romper la monotonía.
Elementos gráficos: Se prefieren formas geométricas simples combinadas con líneas de luz para crear profundidad y capas. Las partículas, los resplandores y las líneas decorativas se pueden usar para mejorar la expresividad de las imágenes clave.
Transiciones: Transiciones fluidas entre escenas, usando desplazamiento, escala, desenfoque y otros efectos para evitar cortes bruscos.
Elementos dinámicos: Secciones importantes usan micropulsaciones o animaciones de bucle sutiles para mantener la atención del espectador.
Sonido: Los momentos clave deben tener efectos de sonido que coincidan con las imágenes para mejorar el impacto auditivo.

Notas técnicas

Gestión de estados

Registrar el estado de confirmación del guion gráfico: Confirmar con el usuario, usar tool_use para marcar como confirmado, no repetir la confirmación.
Registrar el estado de la tarea de renderizado: Si el usuario ejecuta npx hyperframes render pero falla, registrar el mensaje de error; si el usuario pide repetir o modificar el proyecto, no es necesario rehacer el guion gráfico.

Manejo de errores

Si falla npx hyperframes lint, leer el resultado del error, analizar el problema (se puede preguntar al usuario o buscar soluciones en references/hyperframes-contract.md), corregir el código y ejecutar npx hyperframes lint de nuevo.
Si falla npx hyperframes render, leer el resultado del error y notificar al usuario del motivo del fallo.
Si falla npx hyperframes preview (no se puede iniciar correctamente la vista previa), notificar al usuario, sugerir intentar con npx hyperframes lint para verificar primero.
Errores de dependencias del sistema: Si falla npx hyperframes preview o render y el mensaje de error indica falta de FFmpeg u otras dependencias, notificar al usuario que instale primero las dependencias necesarias.

Optimización del rendimiento

Para animaciones complejas, usar indicadores de rendimiento de GSAP: gsap.ticker.fps() para monitorizar los FPS, si los FPS son inferiores a 30, se debe simplificar la animación.
Optimizar el renderizado de partículas: limitar el número de partículas por sistema a no más de 200; las partículas usan will-change: transform para acelerar la GPU.
Animaciones SVG: en la medida de lo posible, animar los atributos transform y opacity en lugar de top/left para activar la aceleración de la GPU.

Pruebas y depuración

Usar npx hyperframes lint para detectar errores de sintaxis HTML, nombres de clases de CSS, registros de GSAP y problemas de estructura de archivos.
Usar npx hyperframes preview para iniciar rápidamente un servidor local de vista previa y abrir la consola del navegador para verificar los registros de GSAP.
Proporcionar una función de "depuración rápida" para cada viñeta: en el archivo HTML de la viñeta, se puede llamar a window.__timelines["<id>"].play() en la consola del navegador para reproducir la línea de tiempo de la viñeta actual.

Referencias

Documentación oficial de HyperFrames: references/hyperframes-contract.md (contiene la definición del contrato de composición, catálogo de selección de gráficos, mejores prácticas, errores comunes y soluciones)

Esta skill es de terceros y no es un producto oficial de HeyGen; el framework upstream HyperFrames es de código abierto por HeyGen (Apache-2.0, repositorio https://github.com/heygen-com/hyperframes).

Preguntar en tu IA favorita

Documentación