Instalación de complementos: Antes de los comandos de configuración o actualización, siga las reglas de instalación de complementos cuando esta habilidad esté dentro de un complemento de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.
Primero, mantenga esta habilidad actualizada; confirme con el usuario antes de ejecutar:
npx hyperframes skills update music-to-video. Una operación rápida sin cambios cuando todo está actualizado; de lo contrario, actualiza esta habilidad junto con las habilidades centrales de las que depende antes de confiar en ellas.
music-to-video: un flujo de trabajo de video con ritmo sincronizado y basado en música
Use esta habilidad para convertir una pista de música en un video HyperFrames con ritmo sincronizado. Analiza la pista una vez, define los fotogramas, completa un plan por fotograma y construye 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 la base (un video completo no necesita ningún recurso); cualquier medio que el usuario proporcione se corta en la misma cuadrícula de ritmo.
Usted es el orquestador. Trabaje en videos/<proyecto>/. Ejecute los pasos en orden y pase cada Puerta antes de continuar. Dos pasos necesitan al usuario: Paso 3 (aprobación del plan) y Paso 6 (aprobación del render), ambos son puertas de control según ../hyperframes/references/brief-contract.md (léalo antes del Paso 0): en modo autónomo, publique el resumen como aviso y continúe sin esperar. Haga cada paso usted mismo excepto el Paso 4, donde asigna un subagente por fotograma. Mantenga las reglas de diseño y movimiento fuera de este archivo; viven en references/ y el subagente frame-worker.
SKILL_DIR = directorio de esta habilidad. PROJECT_DIR = videos/<nombre-del-proyecto>/.
Flujo de trabajo: Paso 0 configuración → hyperframes.json + assets/bgm.mp3; Paso 1 análisis → audiomap.json; Paso 2 esqueleto → STORYBOARD.md (fotogramas, grupos TBD); Paso 3 plan → completar STORYBOARD.md + frame.md; Paso 4 construcción → compositions/frames/NN-*.html; Paso 5 ensamblaje → index.html; Paso 6 render → renders/video.mp4.
Dos ideas que lo definen todo
- Un analizador, y confíe en él.
analyze-beatgrid.pyes el único analizador de ritmo: nunca vuelva a medir los golpes con otra herramienta o de oído. Su energía / densidad / rolls / ataques / silencios son siempre confiables. Subpmybeats_secson confiables solo cuando la música es genuinamente rítmica; en música tranquila, la cuadrícula es un metrónomo impuesto por el rastreador, así que marque el ritmo por frases y energía en su lugar y nunca corte bruscamente según ella. Decidir en qué caso se encuentra es lapacingde 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-<frame_id>.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 adicional va dentro de un grupo, por lo que el número de fotogramas sigue los tratamientos distintos, no los golpes; una pista rápida no aumenta la cantidad de subagentes.
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éalo y no pregunte nada que responda; su flow/storyboard derivan el modo (contrato breve § 1). (2) No hay BRIEF.md pero el proyecto existe → reanude desde lo que hay en el disco; nunca vuelva a interrogar. (3) Una solicitud de creación nueva que llegó directamente aquí → lea /hyperframes y ejecute su capa de intención (references/intent-interview.md): confirma los requisitos obligatorios de esta ruta (la fuente de música, destino → aspecto — ../hyperframes/references/routes/music-to-video.md) y anuncia lo que queda diferido: la marca y el género se eligen en el Paso 3 por diseño. Escriba BRIEF.md inmediatamente después de la inicialización (nunca antes; init rechaza un directorio no vacío) y registre las respuestas basadas en preferencias (brief-format.md). Las solicitudes de edición omiten todo esto.
La música es la columna vertebral: establezca una pista antes que cualquier otra cosa. Esta habilidad está ajustada para BGM rápido y de alta energía: una cuadrícula de ritmo fuerte impulsa los cortes (las pistas tranquilas funcionan, pero marcan el ritmo por frase en lugar de por golpe). Si el usuario proporcionó audio (un archivo de música o un video del que extraer audio), úselo. De lo contrario, elija el estado de ánimo de la solicitud y genere una pista a través de /media-use (references/bgm.md). Antes de la primera acción autenticada del proveedor, ejecute npx hyperframes auth status y transmita su salida textualmente. Si no ha iniciado sesión, aplique una rama:
- Colaborativo: espere a que el usuario inicie sesión o elija explícitamente continuar sin conexión con el proveedor local.
- Autónomo: indique el estado y continúe a través del proveedor local disponible.
Si ningún proveedor sin conexión puede satisfacer la capacidad musical requerida, muestre el bloqueador. Nunca escriba claves en un .env por repositorio. La propiedad de la autenticación y las alternativas sin conexión viven en /media-use references/setup-providers.md § Proveedores. La pista resultante se coloca en assets/bgm.mp3. Escenifique las imágenes o videos proporcionados para que los fotogramas puedan usarlos en la cuadrícula de ritmo; de lo contrario, la tipografía lleva el video.
Videos líricos: para letras sincronizadas con las voces, obtenga la temporización de palabras/líneas transcribiendo la pista a través de /media-use, o pídale al usuario el texto de la letra y coloque las líneas en la cuadrícula de ritmo.
Inicialice solo si falta hyperframes.json. Nombre <proyecto> del brief en kebab-case, como midnight-drive-loop, nunca una marca de tiempo. init verifica las habilidades instaladas con 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 "<musica-del-usuario>" "$PROJECT_DIR/assets/bgm.mp3" # extraer de un video primero si es necesario
# solo si el usuario le dio imágenes/videos:
node <SKILL_DIR>/scripts/stage-assets.mjs --from <directorio> --hyperframes "$PROJECT_DIR" --into public
La marca (fuente + paleta) se elige en el Paso 3, no aquí. No elija un género o un tipo de pista por adelantado: los recursos son solo un ingrediente opcional y el género surge de las elecciones por fotograma.
Puerta: existen hyperframes.json + assets/bgm.mp3; se anotan el aspecto / duración / fps y (si los hay) el inventario de recursos.
Paso 1: Analizar la música
Objetivo: Producir el único análisis de temporización canónico sobre el que se construye todo el video.
analyze-beatgrid.py es el único analizador de ritmo: nunca vuelva a medir los golpes con otra herramienta o de oído. Lee la pista una vez y escribe audiomap.json: fases de energía (nivel / densidad / sensación), ataques + 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 confiables en cualquier música; bpm y beats_sec son confiables solo cuando la música es genuinamente rítmica, y juzgar eso es la decisión que toma en el Paso 2.
Requisitos previos: Python 3 con librosa, numpy y soundfile disponibles. Si la importación falla, instálelos en el entorno de 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: existe audiomap.json; se conoce audio.duration_sec.
Paso 2: Esqueleto de fotogramas (solo estructura)
Objetivo: Leer la música y diseñar los fotogramas: el esqueleto de STORYBOARD.md.
Lea references/frame-skeleton.md. Convierta audiomap.json en el esqueleto de STORYBOARD.md usted mismo; no hay JSON intermedio. Corte la pista en fotogramas en cambios musicales reales (hard_stops, SURGE / DROP key_moments, los bordes de un roll, un tramo sin ataques, un gran salto de energía), ajustando cada límite a un ancla del audiomap. Para cada fotograma, establezca 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 en música tranquila), mood y una línea de feel (la situación musical simple que el Paso 3 empareja con una plantilla). Solo clasifique y diseñe aquí: deje los ### Groups de cada fotograma como TBD (Paso 3) y el style de la portada en blanco; sin plantillas, texto, color o fuentes. Espere ~1–6 fotogramas.
Puerta: los fotogramas cubren la pista (el primero en 0, el ú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 (controlado por el usuario)
Objetivo: Convertir el esqueleto en un STORYBOARD.md completo y aprobado.
Lea references/planning.md, storyboard-format.md, template-catalog.md, motion-primitive-catalog.md y montage.md (solo si el usuario proporcionó recursos). Editando el mismo archivo en el lugar, haga dos cosas:
- Elija la marca. Seleccione un preset de
../hyperframes-creative/frame-presets/usando la tabla en../hyperframes-creative/references/design-spec.md(empareje el estado de ánimo de la pista; solo importan sus fuentes y colores: las plantillas poseen la composición). Cópielo enframe.mdsin modificar y complete elstylede la portada (fuente + una paleta de ≤4–6 muestras) a partir de él. - Complete cada fotograma. Decida sus grupos y asigne 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 recursos que obedezca
pacing. Antes de componer libremente una apariencia con nombre, busque en el catálogo en vivo: para cada apariencia, efecto, tratamiento o transición que el usuario solicitó — "líneas de barrido CRT", "glitch", "grano de película", "barrido brillante" — ejecutenpx hyperframes catalog --query "<la apariencia, en inglés simple>" --jsony lea los mejores resultados.template-catalog.mdymotion-primitive-catalog.mdsolo enumeran los materiales locales de esta habilidad; la búsqueda clasifica todo el registro alojado (~400 bloques y componentes) y no necesita nada instalado: ningún proyecto, ningúnaddprevio, ninguna cuenta. Componga libremente una apariencia solo después de que una búsqueda no haya encontrado nada que encaje. Escriba el texto. Usted posee QUÉ (plantilla / primitivas + contenido + anclas); el frame-worker posee CÓMO — nunca escriba interpolaciones en 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
Corrija cada ✗ (errores graves: desajuste de duración, fotogramas que no cubren la pista, falta de src); las advertencias son de mejor esfuerzo. Luego presente el resumen fotograma por fotograma en el chat como una propuesta (../hyperframes/references/review-loop.md § 1) e itere sobre las respuestas del usuario hasta que aprueben; para storyboard: yes, también escríbalo como storyboard.html (../hyperframes-creative/references/storyboard-recipe.md § 3) para que lo abran. En modo autónomo, esta es una puerta de control: publique el resumen como aviso y continúe (la pasada de validate-plan.mjs es una puerta de calidad y aún bloquea).
Puerta: frame.md es una copia exacta del preset; validate-plan.mjs sale con 0; el usuario aprobó el plan (autónomo: el resumen se publicó como aviso).
Paso 4: Construir fotogramas a partir del plan
Objetivo: Construir cada fotograma como un archivo de composición independiente.
Cree compositions/frames/. Lea sub-agents/frame-worker.md y ../hyperframes/references/subagent-dispatch.md. Asigne 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 abs>
frame_id: <NN-frame_id> # = el nombre del archivo del fotograma, ej. 02-f2; el id de la composición
Su bloque: el bloque `## Frame N — <frame_id>` 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); recursos escenificados/ (grupos de recursos)
Contratos: ../hyperframes-core/references/sub-compositions.md + determinism-rules.md
Lienzo: <a>×<h> Ritmo: <beat_cut|phrase_flow>
Escribir en: PROJECT_DIR/compositions/frames/<frame_id>.html
El trabajador bifurca los materiales citados, convierte cada ancla a segundos locales del fotograma (local_t = track_t − span_sec[0]), controla sus grupos con cortes de 0 ms y escribe un archivo de fotograma seguro para buscar. El trabajador nunca ejecuta el CLI hyperframes — esos comandos operan en el proyecto ensamblado, que aún no existe, por lo que informarían sobre los archivos equivocados. El trabajador solo escribe en el contrato y se detiene; usted verifica después del ensamblaje (Paso 6). A medida que cada trabajador regresa, puede confirmar que su archivo se ha guardado en el disco.
Puerta: cada fotograma tiene su compositions/frames/NN-*.html en el 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 bruscamente fotograma → fotograma (los fotogramas cubren la pista sin espacios, por lo 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"
Corrija cualquier ✗ que informe: un archivo de fotograma faltante o en blanco significa que ese trabajador escribió un archivo parcial; reasígnelo (Paso 4) y vuelva a ensamblar.
Puerta: existe index.html; 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.
Ejecute el CLI en el proyecto ensamblado: esa es la unidad correcta (los trabajadores por fotograma no pudieron ejecutarlo). check ejecuta lint estructural y el tiempo de ejecución del navegador sin cabeza, diseño, mo...
... [truncado para traducción]