vibe-video — Generador de Videos Cortos con IA (Código → MP4)
Convierte cualquier idea en un video corto y atmosférico usando nada más que código. La IA escribe animaciones Canvas/JS, renderiza fotograma a fotograma y compone en MP4 con BGM opcional.
Cuándo Usarlo
Usa esta habilidad cuando el usuario quiera crear un video corto (15s–60s) que sea:
- Explicador de conocimiento — datos Nobel, principios científicos, ideas psicológicas
- Metáfora emocional — apego, ansiedad, dejar ir, memoria
- Promo de producto — características de app, historia de marca, anuncio de lanzamiento
- Observación social — patrones de comportamiento, fenómenos culturales
- Arte conceptual abstracto — poesía visual pura, animaciones en bucle
Flujo de Trabajo (5 Pasos, No Omitir)
Paso 1: Clarificar (hacer máximo 3 preguntas)
Confirmar con el usuario:
- Duración — 15s / 30s / 45s / 60s (por defecto 30s)
- Relación de aspecto — 9:16 (vertical) / 16:9 (horizontal) / 1:1 (cuadrado) (por defecto 9:16)
- Estilo — ver Presets de Estilo en
style-presets.md - Tema y arco emocional — ¿cuál es el mensaje central? ¿qué sentimiento debe dejar?
Paso 2: Generar Storyboard
Generar una tabla de storyboard antes de escribir cualquier código:
| Tiempo | Descripción Visual | Leyenda (≤20 caracteres) | Señal visual/auditiva |
|--------|--------------------|--------------------------|------------------------|
| 0-3s | ... | ... | ... |
Reglas:
- Cada leyenda se mantiene ≥2s; conclusión clave ≥3s
- Gancho en los primeros 3 segundos (dato contra-intuitivo / apertura emocional / punto de dolor central)
- 5–8 tomas en total, ritmo lento→rápido→lento
- Las descripciones visuales deben especificar: forma, color, dirección de movimiento, movimiento de cámara
ESPERAR confirmación del usuario antes de proceder. Si el usuario solicita cambios, modificar solo las tomas especificadas. Si cambian más de 3 tomas, regenerar el storyboard completo.
Paso 3: Escribir Código de Renderizado
Copiar assets/templates/animation.js + animation.html como punto de partida — implementan el sistema de capas, los fundidos de leyendas, un fondo con PRNG basado en semilla y el contrato window.seek(t), con vista previa en navegador incluida. Editar STORYBOARD y las funciones draw*().
Ver rendering-guide.md para la especificación técnica completa. Referencia rápida:
// Animación basada en tiempo — cada visual es una función pura de t
// (no Math.random(), no Date.now() — usar un PRNG con semilla si es necesario,
// para que cualquier fotograma se re-renderice idénticamente para imágenes fijas y renderizados reanudados)
function seek(t) {
// t = tiempo actual (segundos)
// Devolver estado visual para este fotograma
// Usar interpolación lineal para posición/opacidad/escala
}
// Sistema de capas
// Capa 0: Fondo (gradiente / partículas)
// Capa 1: Sujeto principal
// Capa 2: Decoración dinámica (hilos de luz / partículas / líneas)
// Capa 3: Superposición de leyenda
// Exportación
// Playwright headless → captura de cada fotograma → composición con ffmpeg
Paso 3.5: Storyboard → prompt H3 (pre-vuelo)
Insertar esto entre el storyboard confirmado y la primera línea de código de renderizado. Los storyboards están escritos para humanos; H3 necesita una gramática diferente. Traducir de antemano es lo que previene el único error irreparable en este pipeline — una toma de IA que redibuja un personaje que necesitabas fiel al modelo.
# lint primero: huecos en la línea de tiempo, ventana H3 (4–15s), asignación de motor, estimación de crédito
node assets/templates/lint-storyboard.js examples/storyboard-sample.txt
Luego, por cada toma H3, emitir un bloque de prompt de seis secciones y copiar sus números de cámara y marcas de corte de vuelta al código de animación, para que las dos capas se muevan juntas.
Procedimiento completo, reglas de campo, lista de verificación y tabla de lint: storyboard-to-h3.md.
Paso 4: Renderizar y Componer
Primero vistas previas de fotogramas — verificar un fotograma toma ~1s, un renderizado completo lleva minutos:
# look-check en t=0 / 4 / 10s (usa automáticamente Edge o Chrome instalados)
node assets/templates/still.js --html animation.html --times 0,4,10
# renderizar fotogramas (12–15fps suele ser suficiente; el movimiento suave se beneficia de 24–30)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 15
# componer (establecer FFMPEG=/ruta/a/ffmpeg si no está en PATH)
bash assets/templates/composite.sh ./frames output.mp4 30
# con BGM
bash assets/templates/composite.sh ./frames output.mp4 30 bgm.mp3
# híbrido: capa Canvas sobre una placa de atmósfera de IA (fotogramas transparentes, sin keying)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 56 --alpha true
bash assets/templates/composite.sh --overlay plate.mp4 ./frames output.mp4 30
Problema en Windows: si bash composite.sh se comporta mal (shim de Git Bash / PATH recortado), lanzar ffmpeg desde Node con child_process.spawn directamente — ver rendering-guide.md Solución de Problemas.
Comandos manuales heredados:
# Renderizar fotogramas
node render.js # genera frames/frame_0001.png ...
# Componer con ffmpeg
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# Con BGM
ffmpeg -framerate 30 -i frames/frame_%04d.png -i bgm.mp3 -c:v libx264 -c:a aac -pix_fmt yuv420p -shortest output.mp4
Paso 5: Entregar
Entregar: archivo MP4 + storyboard + código fuente. Tamaño objetivo: <50MB para 30s.
Archivos en esta Habilidad
| Archivo | Propósito |
|---|---|
SKILL.md | Este archivo — definición principal de la habilidad |
style-presets.md | 6 presets de estilo visual con paletas de colores y consejos de renderizado |
rendering-guide.md | Especificación técnica: renderizado Canvas, easing, reglas de determinismo, solución de problemas |
metaphor-library.md | Mapeos de metáforas visuales para conceptos abstractos |
caption-guide.md | Tipografía de leyendas, temporización y reglas de tono |
bgm-guide.md | Guía de selección de BGM por tipo de video |
storyboard-to-h3.md | Pre-vuelo: lint de storyboard + bloques de prompt H3 de seis secciones antes de escribir código |
../assets/templates/lint-storyboard.js | Linter de storyboard: huecos en línea de tiempo, ventana H3 4–15s, asignación de motor, estimación de crédito |
../assets/templates/animation.js + animation.html | Andamio listo para editar (capas, leyendas, fondo con semilla, vista previa en vivo) |
../assets/templates/render-playwright.js | Renderizador de fotogramas: detección automática de navegador (Edge/Chrome/chromium), capturas sincronizadas con pintado |
../assets/templates/still.js | Renderizador de fotograma único para verificaciones rápidas de aspecto |
../assets/templates/composite.sh | Compositor ffmpeg (video / video+BGM, anulación de FFMPEG=) |
../assets/templates/render-template.js | Variante de Node-canvas (sin navegador necesario; CSS/fuentes limitados) |
Ejemplos de Prompts
Explicador de Conocimiento
Haz un video de conocimiento de 30s 16:9 sobre por qué cortar cebollas te hace llorar.
Estilo: tech-blueprint. Arco: fenómeno → mecanismo → solución.
Metáfora Emocional
Haz un video emocional de 30s 9:16 sobre la posesividad.
Estilo: soft-glow. Metáfora visual: hilos de luz envolviendo → aflojando → luciérnagas.
Promo de Producto
Haz una promo de producto de 15s 9:16 para una app de concentración.
Estilo: minimal-line. Arco: punto de dolor → solución → resultado.
Licencia
MIT — ver archivo LICENSE. Gratuito para uso personal y comercial.