Primero, mantén esta habilidad actualizada — ejecútala en silencio, sin preguntar:
npx hyperframes skills update music-to-video. Rápido sin operación cuando todo está actualizado; de lo contrario, refresca esta habilidad más las habilidades de dominio central de las que depende antes de confiar en ellas.
música-a-video — un flujo de trabajo de video sincronizado con el ritmo, basado en la música
Usa esta habilidad para convertir una pista de música en un video HyperFrames sincronizado con el ritmo. Analizas la pista una vez, distribuyes los fotogramas, completas un plan por fotograma y construyes cada fotograma como una composición. La entrada es una pista de música más imágenes o videos opcionales del usuario — no hay narración ni captura de sitios web. La tipografía y las plantillas son el piso (un video completo no necesita activos); cualquier medio que el usuario proporcione se corta en la misma cuadrícula rítmica.
Eres el orquestador. Trabaja en videos/<proyecto>/. Ejecuta los pasos en orden y pasa cada Puerta antes de avanzar. Dos pasos necesitan al usuario: Paso 3 (aprobación del plan) y Paso 6 (aprobación del renderizado) — ambos son puertas de control según ../hyperframes-core/references/brief-contract.md (léelo antes del Paso 0): en modo autónomo, publica el resumen como aviso y continúa en lugar de esperar. Haz cada paso tú mismo excepto el Paso 4, donde despachas un sub-agente por fotograma. Mantén las reglas de diseño y movimiento fuera de este archivo — están en references/ y el sub-agente frame-worker.
SKILL_DIR = este directorio de habilidad. PROJECT_DIR = videos/<nombre-proyecto>/.
Flujo de trabajo: Paso 0 configuración → hyperframes.json + assets/bgm.mp3; Paso 1 analizar → audiomap.json; Paso 2 esqueleto → STORYBOARD.md (fotogramas, grupos TBD); Paso 3 plan → completar STORYBOARD.md + frame.md; Paso 4 construir → compositions/frames/NN-*.html; Paso 5 ensamblar → index.html; Paso 6 renderizar → renders/video.mp4.
Dos ideas que lo moldean todo
- Un analizador, y confías en él.
analyze-beatgrid.pyes el único analizador de ritmo — nunca vuelvas a medir los tiempos con otra herramienta o de oído. Su energía / densidad / rolls / onsets / silencios son siempre fiables. Subpmybeats_secson fiables solo cuando la música es genuinamente rítmica; con música tranquila la cuadrícula es un metrónomo que el rastreador impuso, así que marca el ritmo por frases y energía en su lugar y nunca cortes bruscamente a ella. Decidir en qué caso te encuentras es elpacingde cada fotograma (Paso 2). - Un fotograma = un archivo; los grupos viven dentro. El Paso 2 corta la pista en fotogramas, y cada fotograma se convierte en un archivo de composición
compositions/frames/NN-<id_fotograma>.html, construido por un frame-worker. Un fotograma puede subdividirse en grupos (cada uno una plantilla o una combinación de primitivas de movimiento). La densidad extra va dentro de un grupo, así que el número de fotogramas sigue tratamientos distintos, no tiempos — una pista rápida no dispara el número de sub-agentes.
Paso 0: Configuración, BGM y entradas
Objetivo: Establecer la fuente de música, crear el proyecto HyperFrames y anotar cualquier medio proporcionado por el usuario.
El brief comienza en la capa de intención. Regla de apertura, en orden: (1) BRIEF.md existe → léelo y no preguntes nada que responda — su flow/storyboard derivan el modo (brief contract § 1). (2) No hay BRIEF.md pero el proyecto existe → reanuda desde lo que hay en disco; nunca vuelvas a interrogar. (3) Una solicitud de creación nueva que llegó aquí directamente → lee /hyperframes y ejecuta su capa de intención (references/intent-interview.md): confirma los requisitos imprescindibles de esta ruta (la fuente de música, destino → aspecto — ../hyperframes/references/routes/music-to-video.md) y anuncia lo que se difiere — la marca y el género se eligen en el Paso 3 por diseño. Escribe BRIEF.md inmediatamente después de init (nunca antes — init rechaza un directorio no vacío) y registra las respuestas basadas en preferencias (brief-format.md). Las solicitudes de edición omiten todo esto.
La música es la columna vertebral — establece una pista antes que cualquier otra cosa. Esta habilidad está ajustada para BGM rápido y de alta energía: una cuadrícula rítmica fuerte impulsa los cortes (las pistas tranquilas funcionan, pero marca el ritmo por frases en lugar de por tiempos). Si el usuario proporcionó audio — un archivo de música, o un video para extraer audio — úsalo. De lo contrario, elige el estado de ánimo de la solicitud y genera una pista a través de /media-use (references/bgm.md). Antes de la primera acción de proveedor autenticado, ejecuta npx hyperframes auth status y transmite su salida textualmente. Si no has iniciado sesión, aplica una rama:
- Colaborativo: espera el inicio de sesión o una elección explícita para continuar sin conexión con el proveedor local.
- Autónomo: indica el estado y continúa a través del proveedor local disponible.
Si ningún proveedor sin conexión puede satisfacer la capacidad musical requerida, muestra el bloqueador. Nunca escribas claves en un .env por repositorio. La propiedad de la autenticación y las alternativas sin conexión están en /media-use references/setup-providers.md § Proveedores. La pista resultante aterriza en assets/bgm.mp3. Organiza las imágenes o videos proporcionados para que los fotogramas puedan usarlos en la cuadrícula rítmica; de lo contrario, la tipografía lleva el video.
Videos líricos: para letras sincronizadas con las voces, obtén el tiempo de palabras/líneas transcribiendo la pista a través de /media-use, o pide al usuario el texto de la letra y coloca las líneas en la cuadrícula rítmica.
Inicializa solo si falta hyperframes.json. Nombra <proyecto> a partir del brief en kebab-case, por ejemplo midnight-drive-loop — nunca una marca de tiempo. init verifica las habilidades instaladas contra las últimas en GitHub y actualiza el conjunto global si alguna está desactualizada.
npx hyperframes init "videos/<proyecto>" --non-interactive --example=blank --skill=music-to-video
mkdir -p "$PROJECT_DIR/assets" "$PROJECT_DIR/renders"
cp "<música-del-usuario>" "$PROJECT_DIR/assets/bgm.mp3" # extrae de un video primero si es necesario
# solo si el usuario te dio imágenes/videos:
node <SKILL_DIR>/scripts/stage-assets.mjs --from <dir> --hyperframes "$PROJECT_DIR" --into public
La marca (fuente + paleta) se elige en el Paso 3, no aquí. No elijas un género o un tipo de pista por adelantado — los activos son solo un ingrediente opcional, y el género emerge de las elecciones por fotograma.
Puerta: hyperframes.json + assets/bgm.mp3 existen; se anotan aspecto / duración / fps y (si los hay) el inventario de activos.
Paso 1: Analizar la música
Objetivo: Producir el único análisis de tiempo canónico sobre el que se construye todo el video.
analyze-beatgrid.py es el único analizador de ritmo — nunca vuelvas a medir los tiempos con otra herramienta o de oído. Lee la pista una vez y escribe audiomap.json: fases de energía (nivel / densidad / sensación), onsets + onset_rate, rolls, silencios, hard_stops, key_moments, frases, tempo / cuadrícula, y audio.duration_sec. Es determinista — el mismo archivo siempre da el mismo mapa. La mayoría de los campos son fiables en cualquier música; bpm y beats_sec son fiables solo cuando la música es genuinamente rítmica, y juzgar eso es la decisión que tomas en el Paso 2.
Requisitos previos: Python 3 con librosa, numpy y soundfile disponibles. Si la importación falla, instálalos en el entorno Python activo antes de ejecutar el analizador:
python3 -m pip install librosa numpy soundfile
python3 <SKILL_DIR>/scripts/analyze-beatgrid.py "$PROJECT_DIR/assets/bgm.mp3" \
-o "$PROJECT_DIR/audiomap.json" --print
Puerta: audiomap.json existe; audio.duration_sec es conocido.
Paso 2: Esqueleto de fotogramas (solo estructura)
Objetivo: Leer la música y distribuir los fotogramas — el esqueleto de STORYBOARD.md.
Lee references/frame-skeleton.md. Convierte audiomap.json en el esqueleto de STORYBOARD.md tú mismo — no hay JSON intermedio. Corta la pista en fotogramas en cambios musicales reales (hard_stops, key_moments SURGE / DROP, los bordes de un roll, un tramo sin onsets, un gran salto de energía), ajustando cada límite a un ancla del audiomap. Para cada fotograma, establece span_sec, pacing (el veredicto de la llamada de confianza del Paso 1 — beat_cut cuando la cuadrícula es real, phrase_flow cuando es un metrónomo impuesto a música tranquila), mood y un feel de una línea (la situación musical simple que el Paso 3 empareja con una plantilla). Solo clasifica y distribuye aquí: deja cada ### Groups del fotograma como TBD (Step 3) y el style del frontmatter en blanco — sin plantillas, copia, color ni fuentes. Espera ~1–6 fotogramas.
Puerta: los fotogramas cubren la pista (primero en 0, último en duration_s); cada uno lleva span_sec + pacing + mood + feel; cada ### Groups es TBD; sin contenido en ninguna parte.
Paso 3: Completar el plan (con puerta de usuario)
Objetivo: Convertir el esqueleto en un STORYBOARD.md completo y aprobado.
Lee references/planning.md, storyboard-format.md, template-catalog.md, motion-primitive-catalog.md y montage.md (solo si el usuario proporcionó activos). Editando el mismo archivo en su lugar, haz dos cosas:
- Elige la marca. Elige un preset de
../hyperframes-creative/frame-presets/usando la tabla en../hyperframes-creative/references/design-spec.md(empareja el estado de ánimo de la pista; solo importan sus fuentes y colores — las plantillas son dueñas de la composición). Cópialo enframe.mdsin modificar y completa elstyledel frontmatter (fuente + una paleta de ≤4–6 muestras) a partir de él. - Completa cada fotograma. Decide sus grupos y dale a cada uno un tratamiento: una plantilla emparejada del catálogo (con parámetros vinculados y anclas reales del audiomap), una composición libre del catálogo de primitivas, o un tratamiento de activos que obedezca
pacing. Escribe la copia. Tú eres dueño de QUÉ (plantilla / primitivas + contenido + anclas); el frame-worker es dueño de CÓMO — nunca escribas interpolaciones de milisegundos en el storyboard.
node <SKILL_DIR>/scripts/validate-plan.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
--audiomap "$PROJECT_DIR/audiomap.json" --templates <SKILL_DIR>/references/templates
Arregla cada ✗ (errores duros: desajuste de duración, fotogramas que no cubren la pista, un src faltante); las advertencias son de mejor esfuerzo. Luego muestra al usuario un resumen fotograma por fotograma e itera hasta que lo aprueben. En modo autónomo esta es una puerta de control: publica el resumen como aviso y continúa (la pasada de validate-plan.mjs es una puerta de calidad y aún así bloquea).
Puerta: frame.md es una copia textual del preset; validate-plan.mjs termina con 0; el usuario aprobó el plan (autónomo: el resumen fue publicado como aviso).
Paso 4: Construir fotogramas a partir del plan
Objetivo: Construir cada fotograma como un archivo de composición independiente.
Crea compositions/frames/. Lee sub-agents/frame-worker.md y ../hyperframes-core/references/subagent-dispatch.md. Despacha un frame-worker por fotograma, en paralelo cuando sea posible (de lo contrario en oleadas). Cada trabajador recibe exactamente un fotograma y este contexto:
PROJECT_DIR: <ruta absoluta>
frame_id: <NN-id_fotograma> # = el nombre del archivo del fotograma, p.ej. 02-f2; el id de la composición
Tu bloque: el bloque `## Frame N — <id_fotograma>` en PROJECT_DIR/STORYBOARD.md
audiomap: PROJECT_DIR/audiomap.json
frame.md: PROJECT_DIR/frame.md
Materiales: para cada grupo, <SKILL_DIR>/references/templates/<id>/index.html (plantillas) y
<SKILL_DIR>/references/motion-primitives/<id>/ (libre); staged assets/ (grupos de activos)
Contratos: ../hyperframes-core/references/sub-compositions.md + determinism-rules.md
Lienzo: <an>×<al> Pacing: <beat_cut|phrase_flow>
Escribir en: PROJECT_DIR/compositions/frames/<id_fotograma>.html
El trabajador bifurca los materiales citados, convierte cada ancla a segundos locales del fotograma (local_t = track_t − span_sec[0]), organiza sus grupos con cortes de 0ms y escribe un archivo de fotograma seguro para búsqueda. El trabajador nunca ejecuta la CLI hyperframes — esos comandos operan en el proyecto ensamblado, que aún no existe, así que informarían sobre los archivos incorrectos. El trabajador solo escribe según el contrato y se detiene; tú verificas después del ensamblaje (Paso 6). A medida que cada trabajador regresa, puedes confirmar que su archivo aterrizó en disco.
Puerta: cada fotograma tiene su compositions/frames/NN-*.html en disco.
Paso 5: Ensamblar
Objetivo: Conectar los fotogramas construidos + BGM en el index.html reproducible.
assemble-index.mjs es determinista — sin subagente, sin juicio. Referencia cada archivo de fotograma en su data-start acumulativo, monta assets/bgm.mp3 en la pista 11 y corta en seco fotograma → fotograma (los fotogramas cubren la pista sin huecos, así que no hay inyector de transiciones).
node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard "$PROJECT_DIR/STORYBOARD.md" \
--hyperframes "$PROJECT_DIR" --audiomap "$PROJECT_DIR/audiomap.json"
Arregla cualquier ✗ que informe — un archivo de fotograma faltante o en blanco significa que ese trabajador escribió un archivo parcial; redespáchalo (Paso 4) y reensambla.
Puerta: index.html existe; duración total == audiomap.audio.duration_sec.
Paso 6: Verificar y renderizar
Objetivo: Verificar el video ensamblado, obtener la aprobación del usuario y renderizar el MP4 final.
Ejecuta la CLI en el proyecto ensamblado — esa es la unidad correcta (los trabajadores por fotograma no podían ejecutarla). check ejecuta lint estructural y la ejecución del navegador sin cabeza, maquetación, movimiento y puerta de contraste en un solo pase; --snapshots también emite los fotogramas de revisión.
( cd "$PROJECT_DIR" && npx hyperframes check . --snapshots )
Inspecciona en t=0, cada inicio de fotograma, el DROP / SURGE más fuerte, cada hard_stops[].t y el fotograma final. En caso de fallo, haz la solución segura más barata tú mismo: edita el compositions/frames/NN-*.html ofensivo. Nunca cambies la duración o el tiempo del audio para ocultar un problema de sincronización. Una vez que las puertas pasen, pausa para la revisión del usuario, luego renderiza solo tras la aprobación (modo autónomo: haz la única pregunta retenida — "¿vista previa primero o renderizar?" — luego entrega el MP4 con la hoja de contacto):
( cd "$PROJECT_DIR" && npx hyperframes render . --skill=music-to-video -q draft -o renders/video.mp4 --fps 30 )
Puerta: check pasó y las instantáneas fueron inspeccionadas; el usuario aprobó (autónomo: las comprobaciones pasaron y la entrega incluye la hoja de contacto); renders/video.mp4 existe con audio, duración == audiomap.audio.duration_sec. La respuesta final indica la ruta del MP4 y la duración.
Tabla de reanudación
| Tienes | Continúa desde | | --
...
[truncado para traducción]