Resumen
Esta habilidad ensambla un video de lanzamiento de producto —toma principal, destacados de funcionalidades, sincronización— como una composición de HyperFrames. Úsala cuando un nuevo lanzamiento necesite un clip de anuncio ajustable y personalizable. Renderiza el MP4 final a partir de los activos del producto que proporciones.
¿Qué hace HyperFrames — Vídeo de Lanzamiento de Producto?
Crea videos de lanzamiento de producto escribiendo composiciones HTML que HyperFrames renderiza a MP4 determinista. El pipeline de video nativo para agentes: los LLMs escriben HTML (su primer lenguaje), HyperFrames renderiza video cuadro a cuadro mediante Chrome sin interfaz gráfica + FFmpeg.
Cuándo Usarlo
- El usuario quiere un video de lanzamiento de producto a partir de una URL, un briefing o un guion
- El usuario quiere un recorrido de sitio / demostración que muestre los propios elementos visuales del producto
- El usuario quiere un clip para redes sociales (TikTok/Reels/Shorts) con subtítulos cinéticos y marca
- El usuario quiere un video de marketing/promocional con superposiciones animadas y música
- El usuario dice "hazme un video" y proporciona una URL o descripción del producto
Cuándo NO Usarlo
- El usuario quiere contenido con personas reales / UGC / de estudio (necesita cámara, no HTML)
- El usuario quiere transmisión en vivo / comercio en vivo (necesita ingesta RTMP)
- El usuario quiere una entrevista con una persona hablando (usa
hyperframes-embedded-captionsohyperframes-talking-head-recut) - El usuario quiere un video explicativo puro sin producto/URL (usa
hyperframes-faceless-explainer) - El usuario quiere una presentación/diapositivas (usa
hyperframes-slideshow)
Flujo de Trabajo
0 · Inicializar el proyecto
npx hyperframes init my-launch-video
cd my-launch-video
Esto crea la estructura del proyecto con index.html, package.json y la CLI de HyperFrames configurada.
1 · Planificar el video
- Entrada: URL del producto, briefing o guion
- Salida: Storyboard de 3-6 escenas con tiempos (ideal 30-90s en total)
- Presupuesto: título ≤2s, outro ≤3s, escenas intermedias ≈8-12s cada una
- Elegir un lenguaje de diseño: explora
hyperframes.heygen.com/designpara plantillas frame.md
2 · Escribir el HTML de la composición
El contrato de composición:
<!doctype html>
<html lang="es">
<body>
<div
id="main"
data-composition-id="intro"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div
class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
>
<!-- Contenido de la escena -->
</div>
</div>
</body>
</html>
Atributos clave:
data-composition-id: ID único para la composicióndata-start/data-duration: tiempos en segundosdata-width/data-height: dimensiones del viewport (1080×1920 para 9:16)data-fps: velocidad de fotogramas (30 estándar)class="clip": marca elementos temporizadosdata-track-index: orden de capas (más alto = encima)
3 · Implementar animaciones seekable
Usa GSAP (recomendado), keyframes de CSS o WAAPI. Todas las animaciones deben ser seekable (deterministas — el mismo fotograma en el mismo tiempo, cada render).
Patrón GSAP (recomendado):
const tl = gsap.timeline({ paused: true });
tl.to("#title", { opacity: 1, y: 0, duration: 0.8, ease: "power4.out" }, 0.5);
tl.to("#image", { scale: 1, opacity: 1, duration: 1.2, ease: "power3.out" }, 1.0);
window.__timelines = { main: tl };
Patrón keyframes de CSS:
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
4 · Agregar medios
- Imágenes: descargar al directorio
public/, referenciar constaticFile()o ruta relativa - Videos de fondo: colocar en
assets/, repetir condata-loop - Audio/BGM: agregar mediante
<audio data-start="0" data-duration="15" src="./bgm.mp3"> - Narración: generar mediante TTS, alinear subtítulos con marcas de tiempo de palabras
5 · Validar y verificar
npx hyperframes check # validar el contrato de composición
npx hyperframes lint # verificar errores comunes
Corrige todos los errores antes de continuar. Las advertencias son aceptables pero deben revisarse.
6 · Previsualizar
npx hyperframes preview # abre Hyperframes Studio con HMR
Revisa 3-4 momentos clave mediante __player.seek(time) en la página de composición sin procesar. Verifica:
- Las animaciones se activan en el momento correcto
- Sin destellos blancos en los cortes (fondo de escena opaco)
- Subtítulos visibles y legibles
- Niveles de audio equilibrados
7 · Renderizar
npx hyperframes render --output launch-video.mp4
Verifica la salida:
ffmpeg -ss 3 -i launch-video.mp4 -frames:v 1 frame-3s.png # revisar subtítulos
ffmpeg -ss 15 -i launch-video.mp4 -frames:v 1 frame-15s.png # revisar escena
Tabla Anti-Racionalización
| Racionalización | Realidad |
|---|---|
| "Solo usaré un editor de video" | Los editores GUI no son nativos para agentes; HTML es lo que los LLMs escriben mejor |
| "Me saltaré el paso de validación" | La validación detecta errores del contrato de composición que rompen los renders |
| "Usaré Remotion en su lugar" | Remotion requiere razonamiento con React; HTML es más simple para agentes |
| "Agregaré animaciones de relleno para ocupar tiempo" | El movimiento vacío está prohibido — cada fase debe tener propósito (ver hyperframes-cut-the-curve) |
| "Centraré el contenido al 42% para dejar espacio para subtítulos" | Los subtítulos son una superposición — centra en el centro real (y = H/2) |
| "Usaré un fundido cruzado entre escenas" | Los fundidos cruzados no tienen portador — usa cut-the-curve para los límites predeterminados |
| "Escribiré un solo archivo HTML grande sin escenas" | Las escenas son la unidad de composición — cada una tiene su propio contenedor clip |
| "Me saltaré la previsualización y solo renderizaré" | La previsualización detecta errores de tiempo que desperdician tiempo de renderizado |
Ejemplo de Código
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
#main {
position: relative;
width: 1080px;
height: 1920px;
overflow: hidden;
}
.scene {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.scene.active { opacity: 1; }
.hook-bg {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 80px;
text-align: center;
color: white;
font-family: system-ui, sans-serif;
}
.hook-text {
font-size: 72px;
font-weight: 800;
line-height: 1.1;
transform: translateY(40px);
opacity: 0;
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<div
id="main"
data-composition-id="product-ad"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div class="scene hook-bg" data-start="0" data-duration="5" data-track-index="0">
<h1 class="hook-text animate-in" data-start="0.5" data-duration="4">
Nombre del Producto
</h1>
</div>
</div>
<script>
// Activación de escenas mediante IntersectionObserver o temporización manual
const scenes = document.querySelectorAll('.scene');
scenes.forEach(scene => {
const start = parseFloat(scene.dataset.start);
const duration = parseFloat(scene.dataset.duration);
setTimeout(() => scene.classList.add('active'), start * 1000);
setTimeout(() => scene.classList.remove('active'), (start + duration) * 1000);
});
</script>
</body>
</html>
Verificación
- La composición pasa
npx hyperframes checkcon 0 errores - Todas las escenas tienen
data-start,data-duration,data-track-index - Las animaciones son seekable (deterministas, no dependientes del reloj del sistema)
- La previsualización muestra tiempos correctos en 3+ momentos clave revisados
- El MP4 renderizado no tiene destellos blancos, fotogramas congelados ni subtítulos faltantes
- Los niveles de audio están equilibrados (se aplicó reducción de narración si era necesario)
- La resolución de salida coincide con el objetivo (1080×1920 para 9:16, 1920×1080 para 16:9)