Sitio Web a HyperFrames
Captura un sitio web y luego produce un video profesional a partir de él.
Los usuarios dicen cosas como:
- "Captura https://... y hazme un video de lanzamiento de producto de 25 segundos"
- "Convierte este sitio web en un anuncio social de 15 segundos para Instagram"
- "Crea un tour de producto de 30 segundos desde https://..."
El flujo de trabajo tiene 7 pasos. Cada uno produce un artefacto que habilita el siguiente.
Paso 1: Capturar y Comprender
Leer: references/step-1-capture.md
Ejecuta la captura, lee los datos extraídos y construye un resumen funcional usando el método de escribir-y-olvidar.
Puerta: Imprime tu resumen del sitio (nombre, colores principales, fuentes, activos clave, sensación en una frase).
Paso 2: Escribir DESIGN.md
Leer: references/step-2-design.md
Escribe una referencia de marca simple para el sitio web capturado. 6 secciones, ~90 líneas. Esto es una hoja de referencia, no el plan creativo — eso llega en el Paso 4.
Puerta: DESIGN.md existe en el directorio del proyecto.
Paso 3: Escribir SCRIPT
Leer: references/step-3-script.md
Escribe el guion de narración. La columna vertebral de la historia. Las duraciones de las escenas provienen de la narración, no de suposiciones.
Puerta: SCRIPT.md existe en el directorio del proyecto.
Paso 4: Escribir STORYBOARD
Leer: references/step-4-storyboard.md
Escribe la dirección creativa por latido: estado de ánimo, cámara, animaciones, transiciones, activos, capas de profundidad, efectos de sonido. Este es el norte creativo — el documento que el ingeniero sigue para construir cada composición.
Puerta: STORYBOARD.md existe con dirección latido por latido y una tabla de auditoría de activos.
Paso 5: Generar VO + Mapear Tiempos
Leer: references/step-5-vo.md
Genera audio TTS, transcribe para obtener marcas de tiempo a nivel de palabra y mapea las marcas de tiempo a los latidos. Actualiza STORYBOARD.md con duraciones reales.
Puerta: narration.wav (o .mp3) + transcript.json existen. Los tiempos de latido en STORYBOARD.md están actualizados.
Paso 6: Construir Composiciones
Leer: La habilidad /hyperframes (invócala — cada regla importa)
Leer: references/step-6-build.md
Construye cada composición siguiendo el storyboard. Después de cada una: auto-revisa la disposición, la colocación de activos y la calidad de la animación.
Puerta: Cada composición ha sido auto-revisada. Sin elementos superpuestos, sin activos mal colocados, sin imágenes estáticas sin movimiento.
Paso 7: Validar y Entregar
Leer: references/step-7-validate.md
Lintea, valida, previsualiza. Crea un HANDOFF.md para la continuidad entre sesiones.
Puerta: npx hyperframes lint y npx hyperframes validate pasan con cero errores.
Referencia Rápida
Tipos de Video
| Tipo | Duración | Latidos | Narración |
|---|---|---|---|
| Anuncio social (IG/TikTok) | 10-15s | 3-4 | Frase gancho opcional |
| Demo de producto | 30-60s | 5-8 | Narración completa |
| Anuncio de funcionalidad | 15-30s | 3-5 | Narración completa |
| Reel de marca | 20-45s | 4-6 | Opcional, enfoque en música |
| Teaser de lanzamiento | 10-20s | 2-4 | Mínimo, alta energía |
Formato
- Apaisado: 1920x1080 (por defecto)
- Vertical: 1080x1920 (Instagram Stories, TikTok)
- Cuadrado: 1080x1080 (feed de Instagram)
Archivos de Referencia
| Archivo | Cuándo leer |
|---|---|
| step-1-capture.md | Paso 1 — leer datos capturados |
| step-2-design.md | Paso 2 — escribir DESIGN.md |
| step-3-script.md | Paso 3 — escribir el guion de narración |
| step-4-storyboard.md | Paso 4 — dirección creativa por latido |
| step-5-vo.md | Paso 5 — TTS, transcripción, tiempos |
| step-6-build.md | Paso 6 — construir composiciones con auto-revisión |
| step-7-validate.md | Paso 7 — lint, validar, previsualizar, traspaso |
| techniques.md | Pasos 4 y 6 — 10 técnicas visuales con patrones de código (dibujo SVG, Canvas 2D, 3D, tipografía, Lottie, video, escritura, fuentes variables, MotionPath, transiciones) |