mkt-full-video-with-11-hyperframe-heygen-16-9

¿Qué hace mkt-full-video-with-11-hyperframe-heygen-16-9?

Orquestador de extremo a extremo: guion → MP4 final 16:9 (1920×1080) estilo podcast-keynote.

El resultado es un archivo MP4 1920×1080 de tipo "avatar parlante + diapositivas" — avatar de HeyGen en un marco flotante redondeado a la derecha (borde de color naranja Claude), diapositivas de contenido editorial moderno AI / Claude a la izquierda, con momentos de zoom-out PIP cuando la diapositiva necesita énfasis a pantalla completa. Las composiciones integran automáticamente los siguientes patrones — sin necesidad de edición manual.

Patrones integrados automáticamente (salida de Fase 3)

Todo video generado por el orquestador incluye automáticamente:

1. HTML de composición por escena — creado por agentes LLM paralelos (1 sub-agente por escena, lanzados en 1 mensaje), NO por plantillas Python:

   • Salida: compositions/scene-1.html … compositions/scene-N.html (1 archivo por escena, nombre único para cualquier N)
   • Cada sub-agente lee su bloque de escena de visual-plan.json + documentos de referencia (references/composition-patterns.md, slide-design-tokens.md, infographic-prompt-template.md) y crea HTML/CSS/GSAP desde cero — selecciona el patrón correcto para la metáfora específica de esa escena, no se limita a 5 arquetipos fijos
   • ¿Por qué LLM y no Python? HyperFrames tiene innumerables patrones de pensamiento visual (antes-después, hub-and-spokes, comparación de dos relojes, comparación de tres niveles, cinta de desplazamiento, trío héroe-orb-especificaciones, mock de terminal, caja de regalo…). Un generador Python solo conoce 5 arquetipos fijos → aburrido, no se adapta a metáforas específicas de escena como "cinta de desplazamiento desperdiciada" o "vehículos de herramienta correcta". La creación por LLM por escena es lo suficientemente creativa para cumplir con la intención de diseño.
   • Los logotipos de marca se adjuntan automáticamente: el orquestador pasa el contexto de marca (claude / chatgpt / gemini / claude-code) al sub-agente, que referencia los logotipos en assets/logos/ y los integra en la composición cuando el patrón lo requiere (brillo orb, insignia de herramienta pill, icono de fila fallida)

2. Estrategia de zoom visual "Hybrid Hook" en .avatar-breathing (Fase 3e mediante generate_root_index.py):

   • Escena HOOK: rampa lenta 1.0 → 1.10 durante la duración de la escena (creación de drama)
   • HOOK→BODY: reinicio brusco 1.10 → 1.0 (liberación de tensión)
   • Escenas BODY: pulsos de 1.06 en eventos PIP-IN (ritmo)
   • Escena CTA: empuje suave 1.0 → 1.04 (cierre)
   • Reemplaza el "yoyó respiratorio" plano — cada arquetipo de escena tiene su propio movimiento de zoom

3. Capa de intercambio PIP de ilustración editorial en papel crema (arquitectura de división de trabajo — IMPORTANTE):

   • La composición HTML (montaje de diapositiva) lleva DATOS / LETRAS DE NIVEL / ELEMENTOS / INSIGNIAS / TÍTULO / logotipos de marca — siempre activa
   • La ilustración editorial en papel crema <img class="broll-image"> lleva METÁFORA / EMOCIÓN — escenario completo 1920×1080, aparece durante las ventanas PIP de su escena, desaparece en caso contrario
   • Cada capa dice 1 mitad diferente del mensaje (HTML = "QUÉ", imagen = "POR QUÉ/SENTIMIENTOS")
   • CRÍTICO: la imagen vive SOLO en la capa raíz (<img id="broll-N"> en index.html). El HTML de la composición NO debe incrustar <div class="image-slot"> — eso comprime la imagen 16:9 en un recuadro pequeño → feo. Las composiciones son capa SOLO de DATOS.
   • Fuente de la imagen: la habilidad planificadora escribe prompts.md → el usuario genera 1.png-N.png mediante AI33/Nano Banana Pro o mkt-broll-image
   • Escenario completo 1920×1080, object-fit: contain, el color crema #F0EEE6 de letterbox se fusiona invisiblemente

4. Borde del marco del avatar con color de marca (Fase 3e mediante generate_root_index.py):

   • Estado SPLIT predeterminado: naranja Claude #d97757 3px sólido + 6px halo + 80px resplandor exterior (marco de marca cálido, NO usar borde blanco)
   • Estado PIP: violeta #a78bfa 3px sólido + 6px halo + 60px resplandor (señal de énfasis cuando el avatar se reduce)
   • Anulación por marca: si el usuario selecciona el énfasis de marca chatgpt/gemini/claude-code, el generador usa el acento correspondiente

5. Superposición de subtítulos (activado por defecto cuando compositions/captions.html existe):

   • Píldora centrada inferior en bottom: 100px, Inter 600 38px blanco sobre píldora con borde violeta oscuro
   • Aparición/desaparición frase por frase (0.18s), eliminación brusca con tl.set al final de cada fragmento
   • Generado por generate_captions.py a partir de plantilla Jinja constante + captions.json por video (o fallback a segmentos de Whisper)
   • Montado automáticamente por generate_root_index.py en z-index 28; deshabilitar con --no-captions
   • Ver Fase 3e Paso 2 a continuación

6. Pie de suscripción de YouTube en los últimos 3s (activado por defecto):

   • La composición yt-lower-third.html se monta en data-start = total_duration - 3.0s
   • Animación de entrada + botón Suscribirse + intercambio a estado Suscrito
   • z-index 60 (por encima de todas las capas), pointer-events: none
   • Nombre del canal + recuento de suscriptores integrados en compositions/yt-lower-third.html (editar si el usuario quiere renombrar)
   • Deshabilitar: generate_root_index.py --no-yt-lower-third. Duración personalizada: --yt-lower-third-duration 4.5

Los 6 patrones se integran automáticamente — el orquestador no necesita pasos adicionales. El usuario solo necesita renderizar 1.png-N.png (Fase 3.5) para que la división de trabajo sea completamente visible. Si se omite la generación de imágenes, el video sigue reproduciéndose correctamente con composiciones HTML puras (la capa de imagen tiene opacidad 0).

Diferencias con la habilidad hermana 9:16

	mkt-full-video-with-11-hyperframe-heygen (9:16)	-16-9 (esta habilidad)
Relación de aspecto	1080×1920 vertical	1920×1080 apaisado
Diseño	Avatar a pantalla completa + banda de subtítulos + cortes de b-roll	Panel de diapositivas izquierda (1200) + marco flotante de avatar derecha (540×880)
Montaje de subtítulos	Sí (palabra por palabra estilo TikTok)	Sin subtítulos por defecto (la diapositiva transmite el mensaje visualmente)
Mecanismo PIP	Ninguno	Transiciones SPLIT ↔ PIP — la diapositiva se expande a 1920, el avatar se reduce a 320×420 en una esquina
Movimiento del avatar	Vertical estático a pantalla completa	Yoyó respiratorio + entrada con pulso al inicio de la escena
Estilo de diapositiva	Maquetas basadas en variantes (pila de publicaciones, ventana de IA, tarjeta de aplicación…)	Composiciones por escena creadas por LLM + paleta moderna de IA + ilustración editorial en papel crema en capa raíz
Autor de la composición	Plantillas Python	N agentes LLM paralelos (1 por escena)
Renderizado	TikTok/Reels/Shorts	Podcast keynote / YouTube conocimiento / LinkedIn
Renderizado de HeyGen	720×1280 vertical	720×1280 vertical IGUAL (recortado mediante object-position: center 25% en el marco del avatar apaisado — ¡no 1280×720!)

Elige esta habilidad para todo video de conocimiento apaisado. Elige la hermana para todo video vertical de formato corto.

Cuándo usar

• El usuario tiene un guion en vietnamita (60–150s) y quiere un video de conocimiento en formato podcast keynote apaisado
• El usuario quiere un resultado con "sensación" Claude AI / editorial de Anthropic: fondo de diapositiva oscuro, letra de nivel con resplandor neón, tarjeta de vidrio, infografía en papel crema en capa raíz
• Tema de compartición de conocimiento / estudio de caso / antes-después / comparación de herramientas / listicle de 5+ consejos — adecuado para diapositivas, soporta N escenas arbitrarias (3, 5, 7, 10…)
• Canales de publicación: YouTube apaisado, video de LinkedIn, clip de podcast, incrustación en sitio web
• El usuario ya tiene MP3 + source.mp4 y quiere replanificar la Fase 3 → el orquestador salta Fase 1+2, entra directamente a Fase 3

No usar esta habilidad si:

• El usuario necesita TikTok/Reels/Shorts vertical → usar la hermana 9:16
• El guion tiene más de 5000 caracteres → dividir semánticamente antes
• El tema es puramente visual (montaje, video musical) — esta habilidad está optimizada para avatar parlante + diapositiva

Resumen del pipeline

Guion (vietnamita, ≤ 5000 caracteres)
    │
    ▼
[Fase 0.5 Detección de reanudación — si voiceover.mp3 + source.mp4 ya existen → saltar Fase 1+2]
    │
    ▼
Fase 1 ── mkt-elevenlabs-tts-to-mp3 ────► voiceover.mp3
    │                                          │
    │                              PUNTO DE CONTROL #1 — el usuario escucha y revisa el MP3
    │                                          │
    │                                          ▼ (OK)
Fase 2 ── heygen-mp3-to-mp4 ────────────► source.mp4 (720×1280 vertical, sincronización labial)
    │                                          (NO renderizar 1280×720)
    │
    ▼
Fase 3a ── transcribir (Whisper) → voiceover.srt + transcript.json
Fase 3b ── plan_visuals.py → visual-plan.json + prompts.md
              (habilidad planificadora: mkt-plan-short-video-edit-16-9)
              PUNTO DE CONTROL #2 — el usuario revisa el plan
    │
    ▼ (El LLM personaliza visual-plan.json por escena: metáfora/letra de nivel/elementos)
    │
Fase 3c ── apply_plan_to_scenes.py → scenes.json (compatible con editor)
Fase 3d ── 🔥 DESPLIEGUE DE N agentes LLM paralelos (1 por escena) 🔥
              → compositions/scene-1.html … scene-N.html
              (cada sub-agente: lee el bloque de escena de visual-plan + referencias → crea HTML/CSS/GSAP)
Fase 3e ── scaffold_project.py (sfx/ + logos/ + avatar.jpg + yt-lower-third.html)
            generate_root_index.py → index.html (1920×1080, monta scene-N.html, capa broll, PIP, SFX, marca de marca, borde de avatar naranja Claude)
Fase 3f ── lint + vista previa (Studio @ http://localhost:3002)
            (Fase 3.5 opcional: generar 1.png-N.png en papel crema mediante AI33/Nano)
    │
    ▼
El usuario revisa la vista previa en Studio → "render" → npx hyperframes render → out.mp4 1920×1080

Puntos de control:

• #1 Voz en off MP3 — puerta del orquestador (saltar si modo de reanudación).
• #2 Plan visual — puerta de Fase 3b (se puede saltar si auto_scenes=true).
• Puerta de renderizado — el usuario confirma en Studio y luego se renderiza.

Entradas

Entrada	Obligatorio	Formato / ejemplo
Tema	Sí	Título breve ("Beneficios de Claude AI", "5 consejos para ahorrar tokens en Claude")
Énfasis de marca	Sí	claude / chatgpt / gemini / claude-code / generic — determina la paleta de acentos + logotipo + color del borde del avatar
Texto del guion	Sí (excepto modo de reanudación)	Archivo .txt/.md o en línea. Vietnamita. ≤ 5000 caracteres
Slug de salida	No	Se deriva automáticamente del tema. Minúsculas, ASCII, guiones.
Número de escenas	No	Predeterminado 5 (Gancho / Problema / Solución / Recapitulación / CTA). Puede ser 3–10 según la duración. Listicle de 5+ consejos OK — despliegue de 1 sub-agente por consejo + 1 gancho + 1 CTA.
Apariencia del avatar	No	1 ID tomado de la variable de entorno HEYGEN_AVATAR_LOOKS. Aleatorio si no se selecciona.
Modo infografía	No	now (generar imagen inmediatamente mediante mkt-broll-image) / scaffold (solo escribir prompts.md, el usuario genera manualmente después) / none. Predeterminado scaffold.
auto_scenes	No	Predeterminado false. true para saltar el punto de control del esquema de escenas.
start_at	No	phase_1 (predeterminado) / phase_2 / phase_3. Punto de entrada de reanudación.
skip_phase_1 / skip_phase_2	No	Atajo booleano para modo de reanudación (alternativa a start_at=phase_3).

Diseño del espacio de trabajo

workspace/content/YYYY-MM-DD/<slug>/
├── script.txt                  # Fase 0 — texto limpio proporcionado por el usuario
├── script-tagged.txt           # Fase 1a — guion + etiquetas de audio de ElevenLabs v3 ([excited], [sigh]…)
├── voiceover.mp3               # Fase 1b
├── voiceover.srt               # Fase 3a (Whisper)
├── voiceover_segments.json     # Fase 3a (segmentos a nivel de palabra)
├── source.mp4                  # Fase 2 (720×1280 vertical — NO renderizar apaisado)
├── transcript.json             # Fase 3a (palabras de Whisper)
├── transcript-cleaned.json     # Fase 3a (corrección manual de errores tipográficos)
├── scenes-outline.json         # Fase 3b — esquema previo al punto de control
├── visual-plan.json            # Fase 3b — plan completo legible por máquina (salida del planificador)
├── scenes.json                 # Fase 3c — estructura plana de visual-plan compatible con editor
├── prompts.md                  # Fase 3b — indicaciones editoriales en papel crema (1 por escena)
├── 1.png  2.png  ... N.png     # Fase 3.5 — imágenes infográficas en papel crema (1 por escena), capa broll raíz
├── captions.json               # Fase 3e (opcional) — [{text,start,end},...] seleccionado por el orquestador; retrocede a voiceover_segments.json si falta
├── compositions/
│   ├── scene-1.html            # Fase 3d — creado por LLM, 1200×1080 apaisado nativo
│   ├── scene-2.html            # 1 archivo por escena, independientemente de N
│   ├── ...
│   ├── scene-N.html
│   ├── captions.html           # Fase 3e — generado a partir de captions.html.j2 + captions.json (o segmentos de Whisper)
│   └── yt-lower-third.html     # Fase 3e — copiado automáticamente desde los recursos de la habilidad
├── assets/
│   └── logos/                  # Fase 3e — copiado automáticamente (claude.png, chatgpt.png, gemini.jpg, claude-code.png)
├── sfx/                        # Fase 3e — 6 SFX predeterminados
└── index.html                  # Fase 3e — Composición raíz 1920×1080

YYYY-MM-DD = hoy (UTC+7).

Flujo de trabajo

Paso 0 — Configuración + detección de reanudación

1. Validar len(script_text) <= 5000 (saltar si modo de reanudación + no hay entrada de guion). Superado → detener.
2. Derivar slug del tema si falta.
3. Crear workspace/content/YYYY-MM-DD/<slug>/. Guardar script.txt (saltar si reanudación + guion ya existe).
4. Seleccionar paleta de acentos de marca (ver references/slide-design-tokens.md).
5. Detección de reanudación — k

…

[truncado para traducción]