heygen-com/hyperframes

Instalación del plugin: Antes de ejecutar comandos de configuración o actualización, siga las reglas de ejecución del plugin cuando este skill esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.

Primero, mantenga este skill actualizado — confirme con el usuario antes de ejecutar: npx hyperframes skills update talking-head-recut. Una operación rápida sin cambios cuando todo está actualizado; de lo contrario, actualiza este skill y los skills de dominio central de los que depende antes de que usted confíe en ellos.

Re-corte de Presentador (Talking Head Recut)

Re-corte de Presentador toma un video local que se reproduce por completo y superpone una secuencia de tarjetas gráficas temporizadas y diseñadas — títulos, tercios inferiores, llamadas de datos, citas, paneles laterales, picture-in-picture — sincronizadas con lo que se dice. El agente diseña las tarjetas (tiempo + contenido) y escribe el HTML de cada tarjeta directamente en la conversación, luego ensambla un único HTML de composición y lo renderiza a MP4 mediante hyperframes. No hay una lista fija de arquetipos ni una estructura de tarjeta prescrita: las superposiciones surgen de lo que realmente dice el transcript.

La puerta de entrada es /hyperframes. Este skill empaqueta un clip existente de presentador con tarjetas gráficas diseñadas (títulos, tercios inferiores, llamadas de datos, citas, paneles laterales, PiP) — no subtítulos simples (las palabras habladas como texto). El clip se reproduce intacto. Cualquier otro propósito — subtítulos simples, un gráfico independiente, un video desde cero — o cualquier incertidumbre → lea /hyperframes primero: la capa de intención decide cada ruta.

Skill hermano de empaquetado gráfico de embedded-captions. Los subtítulos añaden las palabras habladas como texto legible; esto añade gráficos diseñados sobre el video en reproducción. Subtítulos simples → embedded-captions. Construir un video desde cero → los flujos de creación (product-launch-video / faceless-explainer / …).

Enrutado a través de /hyperframes, la capa de intención confirma solo la entrada (qué clip) y anuncia las preguntas de estrategia de renderizado como consultas diferidas: aspecto, diseño, grupo de estilo y número de tarjetas permanecen en el Paso 7, donde el material de archivo analizado y el transcript fundamentan las recomendaciones; las preguntas de formato de ejecución de la capa no aplican. Un BRIEF.md, cuando está presente, contiene la entrada confirmada y cualquier nota del usuario — léalo primero.

Archivos intermedios inspeccionables en el directorio de trabajo:

• metadata.json — duración / ancho / alto / fps
• audio.mp3 — audio extraído
• transcript.json — un arreglo plano de palabras [{ text, start, end }, …] (Whisper; sin segments, sin envoltorio words)
• storyboard.json — esquema ligero de tarjetas (el plan del agente)
• public/cards/card-XX.html — un fragmento HTML por tarjeta
• public/index.html — composición final ensamblada
• output.mp4 — video renderizado

Resolución CLI

# hyperframes — transcripción (Whisper local) + renderizado del HTML ensamblado a MP4
npx hyperframes --help

Este skill se ejecuta completamente sobre la CLI hyperframes más ffmpeg / ffprobe del sistema. La transcripción es Whisper local mediante hyperframes transcribe — sin servicio de terceros, clave API ni proxy con límite de velocidad.

Flujo de Trabajo

1. Verificar el Entorno

npx hyperframes doctor          # ffmpeg, navegador headless, dependencias de renderizado
# confirmar activos empaquetados:
ls "<SKILL_DIR>/assets/fonts" "<SKILL_DIR>/assets/vendor/gsap.min.js"

Requerido:

• ffmpeg / ffprobe (sistema)
• <SKILL_DIR>/assets/fonts/*.woff2, <SKILL_DIR>/assets/vendor/gsap.min.js (empaquetados dentro de este skill, colocados en el directorio de trabajo en el Paso 9)

La transcripción no necesita clave — hyperframes transcribe ejecuta Whisper localmente (Paso 4).

Altamente recomendado en macOS para hyperframes render:

export PRODUCER_BROWSER_GPU_MODE=hardware

2. Crear un Directorio de Trabajo

Todos los artefactos residen bajo videos/<nombre-proyecto>/ — la misma convención que los otros flujos de video (product-launch-video / faceless-explainer / pr-to-video). Mantenga el directorio de trabajo actual en la raíz del espacio de trabajo; todo lo siguiente escribe bajo este único subdirectorio.

VIDEO_PATH="/ruta/absoluta/input.mp4"
WORK_DIR="videos/$(basename "$VIDEO_PATH" | sed 's/\.[^.]*$//')"
mkdir -p "$WORK_DIR"

3. Extraer Audio y Metadatos

# metadatos — duración / ancho / alto / fps
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,r_frame_rate \
  -show_entries format=duration -of json "$VIDEO_PATH" > "$WORK_DIR/metadata.json"
# audio
ffmpeg -y -i "$VIDEO_PATH" -vn -acodec libmp3lame -q:a 2 "$WORK_DIR/audio.mp3"

Salidas: metadata.json (leer width/height/duration; fps = la fracción r_frame_rate evaluada, p. ej. 30000/1001 → 29.97) + audio.mp3.

4. Transcribir

npx hyperframes transcribe "$WORK_DIR/audio.mp3" -d "$WORK_DIR" --json --model small.en

Whisper local — sin clave API, sin proxy, sin límite de velocidad. Escribe un transcript.json a nivel de palabras en el directorio de trabajo (con text de palabra + marcas de tiempo start / end). Léalo para las temporizaciones de palabras/oraciones que guían la temporización de las tarjetas en el Paso 6; agrupe palabras en oraciones usted mismo en signos de puntuación/pausas si necesita fragmentos a nivel de segmento.

Ajustar a la duración del medio. Whisper puede devolver el end de la última palabra un poco más allá de la duración real del clip — ajuste cada endSec de tarjeta y composition.durationSeconds a la duración de metadata.json, o el renderizado mostrará una cola negra después del video.

5. Corregir el Transcript

transcript.json es un arreglo plano de objetos de palabra — [{ "text": "...", "start": s, "end": s }, …] (sin arreglo segments, sin envoltorio words; la clave por palabra es text). Léalo y corrija errores obvios de ASR:

• Homófonos, nombres de productos, términos técnicos, puntuación
• Edite el text de una palabra en su lugar; preserve sus marcas de tiempo start / end
• No hay un arreglo preagrupado segments — agrupe palabras en oraciones usted mismo (divida en signos de puntuación terminal/pausas) cuando necesite fragmentos a nivel de segmento para la temporización de tarjetas

6. Redactar un Storyboard Ligero (en el chat)

No involucra CLI. Lea transcript.json + metadata.json y diseñe tarjetas directamente. storyboard.json es un artefacto de planificación interno del agente — ningún comando CLI lo consume; existe para que pueda pensar claramente sobre la temporización y el contenido antes de escribir el HTML de cada tarjeta. Mantenga la forma coherente con el ejemplo a continuación para que el mismo esquema pueda impulsar la composición que usted escriba en el Paso 9:

{
  "schemaVersion": 3,
  "composition": {
    "fps": 30,
    "width": 1080,
    "height": 1920,
    "durationSeconds": 121.2,
    "layout": "portrait",
    "themeId": "noir",
    "seed": 42
  },
  "videoTrack": {
    "sourcePath": "input-video.mp4",
    "startSec": 0,
    "endSec": 121.2,
    "bounds": { "x": 0, "y": 0, "width": 1080, "height": 1920 }
  },
  "subtitles": { "enabled": false },
  "cards": [
    {
      "id": "card-01",
      "intent": "Enganchar con la pregunta ansiosa del orador a medianoche",
      "startSec": 0.5,
      "endSec": 13.0,
      "accentIndex": 0,
      "zone": "fullscreen",
      "contentHints": {
        "kicker": "UNA PREGUNTA HONESTA",
        "title": "La pregunta de introspección a las 11 PM",
        "detail": "Mensaje de voz de 60 segundos del cliente: 'Si el RMB se aprecia, ¿significa eso que mi póliza en USD es una pérdida terrible?'"
      }
    }
  ]
}

Campos requeridos de la tarjeta:

campo	tipo	propósito
id	string	id estable utilizado en HTML de tarjeta y selectores de GSAP
intent	string	descripción en lenguaje natural; alimenta la síntesis de la tarjeta
startSec / endSec	number	tiempos en segundos (endSec > startSec)
accentIndex	0 | 1 | 2 | 3 | 4	cuál de los 5 colores de acento del tema usa esta tarjeta
zone	enum (ver abajo)	dónde en el lienzo vive la tarjeta
contentHints	object	bolsa de forma libre; el agente coloca aquí kicker/título/detalle/datos/cita
archetype (opcional)	string	etiqueta de forma libre que puede adjuntar para recordar el patrón de una tarjeta; ausente = forma libre, que es el valor predeterminado
transition (opcional)	enum: cut | fade | slide | wipe	transición declarativa de tarjeta a tarjeta

Cinco valores de zone:

zone	límites resueltos	cuándo usar
fullscreen	cubre todo el lienzo	momentos heroicos, números grandes, mantras
whiteboard-area	margen inset de 40px (o 45% de la altura vertical)	contenido denso / anotado
lower-third	banda inferior del 30%	anotación sobre video visible
side-panel	42% derecho (horizontal) o 40% inferior (vertical)	datos a un lado, video al otro
video-overlay	lienzo completo, espera tarjeta mayormente transparente	superposiciones de anotación sobre video a sangría completa

Cuando ensamble la composición en el Paso 9, resuelva la zone de cada tarjeta en límites de píxeles en el contenedor anfitrión de la tarjeta siguiendo la tabla anterior. Los límites del video se establecen una vez a nivel de composición (videoTrack.bounds); para hacer que el video parezca "moverse entre tarjetas", escriba interpolaciones de GSAP contra #video-wrap en el <script> de la composición (ver Paso 9).

Sin roles de tarjeta prescritos, sin arco narrativo prescrito. Las tarjetas surgen de lo que realmente dice el video — podrían ser todas citas o todos datos, podrían comenzar con un número o con una historia. Deje que el transcript marque el ritmo.

¿Cuántas tarjetas? — inferencia automática a partir de duración + densidad. Sin límite superior fijo. Elija un ritmo base a partir de la duración del video, luego ajuste según la densidad de información. Solo el mínimo es fijo: mínimo 5 tarjetas para que incluso videos cortos tengan ritmo.

Paso 1 — ritmo base por duración (el tiempo natural por tarjeta para densidad media):

duración del video	ritmo base (segundos por tarjeta)	justificación
< 60s (reel corto)	6–8s	los espectadores esperan cortes rápidos en formato corto
60s – 3 min	8–12s	ritmo social normal
3 – 10 min	12–20s	dar espacio para respirar; cada tarjeta carga más
10 – 30 min	20–35s	ritmo de conferencia / entrevista en formato largo
> 30 min	30–60s	episódico, sensación de casi capítulo

Paso 2 — multiplicador de densidad (multiplica el ritmo base):

señal en el transcript	multiplicador	efecto
Alta densidad — muchos números, afirmaciones distintas, ritmo entrecortado, enumeración tipo lista, cada 1–2 oraciones es una idea nueva	× 0.7	cortes más rápidos, más tarjetas
Densidad media — flujo mixto con datos y narrativa	× 1.0	ritmo base
Baja densidad — una historia extendida, reencuadre repetido, ritmo reflexivo lento, un solo argumento que se desarrolla	× 1.5	cortes más lentos, menos tarjetas

Paso 3 — calcular:

secPerCard = ritmoBase × multiplicadorDensidad
cardCount  = max(5, round(duraciónVideoSec / secPerCard))

Ejemplos (observe — sin límite superior; los videos largos producen naturalmente más tarjetas):

• Reel de 30s, un solo remate (baja densidad) → 7 × 1.5 = 10.5s/tarjeta → round(30/10.5)=3 → mínimo 5 tarjetas
• Monólogo reflexivo de 60s (baja densidad) → 10 × 1.5 = 15s/tarjeta → 4 → mínimo 5 tarjetas
• Presentador de 121s con datos ricos (alta densidad) → 10 × 0.7 = 7s/tarjeta → 17 tarjetas
• Entrevista de 5 min, densidad mixta → 16 × 1.0 = 16s/tarjeta → 19 tarjetas
• Inmersión profunda de 10 min, alta densidad → 16 × 0.7 = 11s/tarjeta → 55 tarjetas
• Conferencia de 30 min, densidad media → 28 × 1.0 = 28s/tarjeta → 64 tarjetas
• Podcast de 1 hora, baja densidad → 45 × 1.5 = 67.5s/tarjeta → 53 tarjetas

Cuando una tarjeta dura más de ~15s, planifique una tarjeta más rica (bloque de datos, revelación en varios pasos, varios subpuntos que se desarrollan con animaciones escalonadas) — una línea estática se vuelve aburrida después de 8s. Para piezas largas donde muchas tarjetas exceden los 30s, considere dividir la línea de tiempo en subcomposiciones (un .html por capítulo, montado con data-composition-src) para que la línea de tiempo de GSAP por archivo se mantenga manejable — consulte la advertencia de lint timeline_track_too_dense de HyperFrames.

content puede ser una cadena simple ("Título: anualizado 5.69%\nNotas: ...") o cualquier forma JSON que capture los datos. El agente decide la forma por tarjeta.

Outro opcional. Este skill no incluye un outro de marca fijo. Si el usuario desea una tarjeta de cierre, diseñe una neutral usted mismo (marca denominativa + eslogan de una línea, ~1.5-2s, aparición gradual -> breve pausa -> desvanecimiento), añádala a cards[] y extienda composition.durationSeconds según corresponda.

7. Seleccionar Aspecto y Estilo

Preguntas para el usuario (marcador de posición con valores predeterminados hasta que las decisiones estén fijadas; las variables son nombres semánticos, no literales):

1. Aspecto — relación de aspecto del lienzo: 16:9 horizontal, 9:16 vertical, 4:5 (Instagram), 1:1 (cuadrado) etc. Configure composition.width, composition.height y composition.layout en storyboard.json.
2. Diseño — ¿dónde se posiciona el video? full-bleed (video de ancho completo debajo de las tarjetas), whiteboard (video + área blanca inspirada en pizarra), side-by-side (lado a lado), pip (video en miniatura flotante). Marca registrada: mire storyboard.json -> composition.layout.
3. Grupo de estilo — familia temática visual. Este skill envía 4 temas preempaquetados; a menos que el usuario solicite un tema personalizado más cercano a su marca, cada tema proporciona su propio conjunto de paletas (5 colores), combinación de fuentes, y un conjunto consistente de animaciones de tarjeta de GSAP. Elija y escriba el seed del tema en storyboard.json.
4. Número de tarjetas — anuncie el conteo inferido y solicite confirmación. El conteo final debe coincidir con la longitud de la matriz cards en storyboard.json.

8. Escribir el HTML de cada Tarjeta

Para cada tarjeta, escriba un archivo public/cards/card-XX.html HTML autónomo en el directorio de trabajo. El HTML se renderiza a 1920×1080 (o la resolución de composición elegida); use CSS que escale. Incluya estilos y estructura con selectores de datos para GSAP.

Formato esperado:

<!-- public/cards/card-01.html -->
<div id="card-01" class="card" data-card-id="card-01" data-zone="fullscreen">
  <style>
    /* estilos específicos de la tarjeta */
  </style>
  <div class="card-content">
    <span class="kicker">UNA PREGUNTA HONESTA</span>
    <h1 class="title">La pregunta de introspección a las 11 PM</h1>
    <p class="detail">Mensaje de voz de 60 segundos del cliente: 'Si el RMB se aprecia, ¿significa eso que mi póliza en USD es una pérdida terrible?'</p>
  </div>
</div>

Escriba un archivo para cada tarjeta. Siga el esquema de storyboard.json y use los valores de contentHints para cada tarjeta. Si la zona de una tarjeta es fullscreen, el contenedor debe ocupar todo el lienzo; si es lower-third, debe posicionarse en el tercio inferior (los estilos de posicionamiento pueden ser escritos en el CSS de la tarjeta).

9. Ensamblar la Composición y Renderizar

Cree public/index.html — un documento HTML único que carga GSAP, sus estilos comunes, carga todos los archivos card-XX.html y las pistas de video, y programa la línea de tiempo de animación con las marcas de tiempo startSec / endSec de cada tarjeta.

No intente renderizar sin crear primero public/index.html. La CLI hyperframes render espera que la composición HTML completa esté en su lugar.

Una vez que public/index.html esté listo:

npx hyperframes render "$WORK_DIR/public/index.html" --output "$WORK_DIR/output.mp4"

Salida: output.mp4 en el directorio de trabajo.

10. Reproducir y Revisar con el Usuario

Reproduzca output.mp4 para el usuario. Si solicita cambios, puede editar archivos de tarjeta HTML, regenerar el HTML de composición y volver a renderizar. No es necesario volver a transcribir a menos que los cambios afecten la temporización de las tarjetas.

Ahora ejecute el flujo de trabajo — comience desde el paso 1.