Communitygithub.com

hyperframes-audio

Sistema de mezcla mediante relaciones (efectos, automatización y carving de voz) para HyperFrames.

¿Qué es hyperframes-audio?

HyperFrames Audio modela la mezcla como un conjunto de relaciones, no como una pila de procesadores. Los efectos se aplican mediante el atributo `data-fx-chain` en el elemento, y la previsualización y el renderizado ejecutan el mismo grafo de Web Audio, garantizando que lo que se escucha al editar es exactamente lo que se escribe. El skill gestiona fundidos, crossfades, ganancia de pista, automatización de volumen y efectos, ducking/voiceover carve y la cadena de efectos completa. Se integra con `/hyperframes-core` para el timing de clips y con `/media-use` para sourcing y preprocesamiento. Incluye familias de efectos como EQ, compresor, limitador, puerta de ruido, saturación, delay, reverberación, chorus, phaser y bitcrush, todos configurables a través de atributos específicos. El voiceover carve es una característica central: reduce bandas espectrales en la pista de música basándose en la voz, en lugar de atenuar toda la pista, preservando la presencia musical mientras se mantiene la inteligibilidad de la voz. Todo el procesamiento es determinista y predecible, sin ajustes duplicados.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/hyperframes-audio

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

HyperFrames Audio

Una mezcla es un conjunto de relaciones, no una pila de procesadores. Dos pistas que suenan bien por separado pueden ser insoportables juntas, y la solución casi nunca es «bajar una» —sino encontrar por qué están peleando y dárselo a la que lo necesita. Cada herramienta aquí existe para expresar una de esas relaciones.

Los efectos residen en el elemento como data-fx-chain, y la previsualización y renderización usan el mismo grafo de Web Audio —el estudio en un contexto en vivo, el motor en uno offline dentro del navegador que ya maneja. Hay una sola implementación de cada efecto, por lo que lo que escuchas al desplazarte es lo que se escribe. Nunca ajustas dos veces.

El timing de clips sigue siendo /hyperframes-core: los recortes de audio/vídeo y los rangos de origen usan data-start, data-duration y data-media-start, y los crossfades superponen clips en diferentes pistas. Este skill gestiona los fundidos de entrada/salida en pistas colocadas, envolventes de crossfade, ganancia/volumen de pista, automatización de volumen y efectos, ducking/carving de voz, y la cadena de efectos. /media-use gestiona el sourcing, la generación y el preprocesamiento.

La constante data-playback-rate (0.1..5) es segura para renderizar imagen y sonido con preservación de tono cuando elementos de audio/vídeo coincidentes usan el mismo timing, desplazamiento de origen y velocidad. No se admiten rampas de velocidad de origen porque no hay envolvente de velocidad; preprocesa un recurso derivado sincronizado. HyperFrames no proporciona sincronización automática de formas de onda ni corrección de deriva. Para recetas copiables de corte/crossfade/retiming, usa /hyperframes-core → references/creator-editing-recipes.md.

Tres atributos lo contienen todo, directamente en el elemento de audio/vídeo:

AtributoContiene
data-fx-chainlos efectos, en orden de señal
data-automationenvolventes en el volumen de esta pista o sus parámetros de efecto
data-fx-carvela configuración del carve, para poder ser recalculado

Las familias de efectos incluidas son ganancia, EQ (paso alto, paso bajo, pico, estantes), compresor, limitador, puerta de ruido, saturación, delay, reverberación, chorus, phaser y bitcrush.

El JSON exacto para cada uno, y las reglas que debe cumplir un carril: references/attributes.md. Cada efecto con sus parámetros, rangos y unidades: references/fx-registry.md. Cómo determinar qué está mal en un archivo que no puedes escuchar: references/diagnosis.md. Presets, trabajos con nombre y perfiles de un solo mando, además de una tabla síntoma-solución: references/presets.md — léelo antes de construir una cadena manualmente, porque uno de los presets o trabajos con nombre suele nombrar el problema.

Cómo encaja todo

Dos superficies de autoría escriben esos atributos; dos tiempos de ejecución los leen a través de los mismos constructores. Esa capa intermedia compartida es la razón por la que la previsualización predice el renderizado.

flowchart TB
  voice["pista de voz<br/>archivo multimedia"]
  bed["pista de música<br/>archivo multimedia"]

  subgraph AUTORÍA["Autoría — las únicas cosas que escriben atributos"]
    panel["Estudio<br/>Control de carve de voz"]
    script["scripts/carve.mjs<br/>detecta el par, dinámico por defecto"]
    analysis["core/audioCarve.ts<br/>carveProfile · analyseCarveBands<br/>analyseCarveDuck · analyseCarveDynamics"]
    panel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATRIBUTOS["Escritos en el elemento de la música"]
    carveAttr["data-fx-carve<br/>origen · intensidad · dinámico"]
    chainAttr["data-fx-chain<br/>peaking xN + ganancia, etiquetado fromCarve"]
    autoAttr["data-automation<br/>un carril por parámetro esculpido"]
  end

  analysis --> carveAttr
  analysis --> chainAttr
  analysis --> autoAttr

  subgraph COMPARTIDO["Una implementación, leída por ambos"]
    build["audioFxGraph.ts · buildFxChain"]
    sched["audioFxAutomation.ts · scheduleChainAutomation"]
  end

  chainAttr --> build
  autoAttr --> sched

  build --> preview["Previsualización<br/>AudioContext en vivo<br/>attachElementFxChain"]
  sched --> preview
  build --> render["Renderizado<br/>OfflineAudioContext en el navegador sin interfaz<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["lo que escuchas mientras editas"]
  render --> wav["WAV procesado<br/>+ chainTailSeconds para que la mezcla permita la cola"]
  wav --> mix["motor · audioMixer<br/>el carril de volumen horneado en este PCM, no en el grafo"]
  mix --> out["la mezcla renderizada"]

  edit["editar el atributo durante la reproducción"] -.->|MutationObserver| preview

La configuración del carve nunca se lee durante la reproducción —las cadenas y carriles que produjo son lo que se reproduce. data-fx-carve existe para que la intensidad se pueda cambiar en un carve existente en lugar de tener que adivinarla a partir de los filtros.

Dentro de una música esculpida, la señal pasa primero por los cortes, luego por el ajuste de nivel, luego por lo que tú mismo hayas construido —por eso un limitador que añadas sigue actuando como el último techo:

flowchart LR
  src["música descodificada"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["ganancia<br/>ajuste de nivel"]
  g --> hand["tus propios efectos<br/>ej. limitador"]
  hand --> dest["ganancia de pista, luego salida"]

  l1["carril fx.n1.gain"] -.->|"envolvente del nivel<br/>de la voz en esa banda"| p1
  l4["carril fx.n4.gain"] -.->|"cuánto se<br/>atenúa la música en general"| g

Un carve estático es el mismo grafo con valores fijos y sin carriles.

Primero, determina qué está mal

La siguiente tabla parte de "suena a hueco" —lo que presupone que alguien ya escuchó y lo dijo. Si te dan un archivo y "arréglalo", no tienes esa frase y no puedes escuchar, así que tienes que medir. Una regla lo gobierna todo:

El espectro absoluto de una sola voz desconocida no se puede diagnosticar. Los formantes son ±10 dB, los fundamentales van de 85 a 255 Hz, y las oraciones disminuyen 5 a 6 dB al final. Cada uno de esos se lee como un defecto por sí solo, y todos pertenecen al hablante.

Por lo tanto, compara, y compara contra algo dentro del mismo archivo: el original limpio si existe, si no, las pausas —todo lo que sea audible en un silencio es aditivo, y el espectro del silencio es el canal en lugar de la voz. Comparar con un espectro promedio publicado o con una voz de control sintetizada no funciona: dos hablantes difieren más que la mayoría de los defectos, y las dos respuestas incorrectas en la evaluación detrás de esta guía provinieron precisamente de eso.

Cuando no hay original ni silencio utilizable, un defecto tonal estático está realmente indeterminado. Dilo y ofrece las lecturas que encajen, en lugar de elegir una y construir una cadena sobre ella.

Comandos, trampas y recetas prácticas: references/diagnosis.md. Léelo antes de diagnosticar un archivo que nadie ha descrito.

Empieza por el síntoma

Una vez que conoces la banda y el tipo, nombra qué está mal con el audio. La mayoría del mal audio es uno o dos de estos, y cada uno tiene una respuesta integrada:

Suena comoPrueba con
Zumbido o golpeteo debajorumble-cut, o un highpass a 80 Hz
Hueco, pectoralDomar el retumbo (200 Hz)
Apagado, detrás de cartónReducir el barro (250 Hz)
Palabras difíciles de entenderAñadir claridad (3 kHz), o tallar la música
Áspero y cansinoSuavizar la aspereza (3.2 kHz)
Algunas palabras más fuertes que otrasUniformidad con un compresor, o Igualar Niveles
Sonido de sala entre frasesroom-gate
Voz y música compitiendoCarve de voz —no un EQ en ninguna
Seco, sin espacioroom-tight o room-natural
Simplemente "amateur"voice-clean, que son cuatro de los anteriores en orden

Catálogo completo, lo que contiene cada preset, el vocabulario de bandas y lo que deliberadamente NO se cubre (de-essing, eliminación de ruido, coincidencia de tono): references/presets.md.

Resta antes de sumar, nivela después de filtrar, relaciones después del nivel, carácter y techo al final. Cada paso cambia lo que el siguiente escucha —un compresor configurado antes de un filtro paso alto pasa el tiempo persiguiendo el retumbo.

Busca una familia por el problema, no por el nombre

Filtros (highpass, lowpass, peaking, lowshelf, highshelf) deciden qué frecuencias puede ocupar una pista. Esta es la primera herramienta para dos fuentes que chocan, porque los choques ocurren en bandas: una música y una voz quieren ambas 1–3 kHz, y quitarlo de la música cuesta mucho menos que bajar todo el volumen. Un filtro paso alto en una voz es la solución estándar para el retumbo; un filtro paso bajo oscurece o amortigua deliberadamente.

Dinámicas (gain, compressor, limiter, gate) deciden cómo se comporta el nivel de una pista en el tiempo. La compresión reduce la distancia entre lo fuerte y lo suave para que las partes suaves puedan subir. Un limitador es un techo —no moldea nada, solo garantiza que nada pase. Una puerta elimina lo que está por debajo de un umbral, que es cómo se silencia el sonido de sala entre frases. gain es una etapa de nivel simple, y es lo que monta un carril de automatización cuando una pista tiene que moverse para dejar espacio.

No lineales (saturate, bitcrush) cambian la forma de la onda, añadiendo armónicos que no estaban. Recurre a ellas cuando una pista necesita carácter o grano en lugar de corrección —y recuerda que son generativas: hacen que una fuente delgada sea más densa, no más limpia.

Temporales (delay, reverb, chorus, phaser) colocan una pista en un espacio o le dan anchura. Son las que más fácilmente arruinan una mezcla, porque una cola o una copia desafinada ocupa el mismo espacio que necesita una voz. Úsalos en lo que debe estar detrás de algo más, y mantén la cantidad de efecto húmedo más baja de lo que suena bien en aislamiento.

La cadena es en serie: cada efecto procesa lo que produjo el anterior. Así que la corrección va temprano, el carácter en el medio, y un limitador al final donde puede actuar realmente como techo.

Voiceover carve (Tallado de voz)

El problema que resuelve. Una música de fondo debajo de una voz dificulta seguir la voz. El reflejo es atenuar toda la música, lo que funciona pero le cuesta a la música toda su presencia —la música se vuelve débil durante toda la locución. Pero la voz no necesita todo el espectro. Necesita las pocas bandas que realmente ocupa. El carve toma solo esas, y la música conserva sus graves y agudos, por lo que sigue siendo música mientras la voz sigue siendo inteligible.

Es una relación, no un efecto. La configuración reside en la música —la pista que se procesa— y nombra las voces a las que escuchar, exactamente como lo hace un compresor de sidechain: seleccionas la pista que se vuelve más suave y eliges qué la hace más suave. Nunca pongas un carve en una pista de voz. Una voz tallada contra sí misma es un error, no una sutil elección de mezcla.

Cada voz, no solo una. sources es una lista, porque una música suele sonar debajo de una secuencia completa —un narrador, una respuesta de entrevista, un segundo presentador. Se suman en el propio reloj de la música antes de medir nada (mixCarveSources), por lo que un análisis las cubre todas: las bandas provienen de todo el discurso existente, y las envolventes suben dondequiera que haya algo. Las voces que nunca suenan mientras la música lo hace se omiten; no pueden enmascararla.

Un solo mando. strength es 0..1 y lo deriva todo: qué profundidad cortar, cuántas bandas, qué anchura, hasta qué punto favorecer la inteligibilidad sobre la energía bruta de la voz, hasta dónde puede caer el nivel, hasta dónde por debajo de la voz apuntar. Esos seis se mueven juntos en cualquier mezcla real —un carve suave es un corte poco profundo en pocas bandas con poca atenuación, uno fuerte es más profundo en más bandas con más— así que son una relación escrita una vez, en carveProfile. El valor por defecto es 0.25 —un corte de 6 dB en tres bandas con 6 dB de margen de nivel, audible sin sonar a agujero. En 0.5 el corte alcanza 10 dB, que es donde un carve empieza a oírse como un efecto en lugar de cómo espacio para la voz; por encima es territorio deliberado para una música fuerte debajo de una voz suave. 0 es solo espectral —una banda, sin ajuste de nivel alguno.

Carve por defecto. Una música que suena debajo de una narración quiere un carve; no es un paso de refinamiento para hacer si hay tiempo. Coloca ambas pistas, ejecuta el comando de abajo, escucha. Omítelo solo cuando no haya narración para que la música se siente debajo —un vídeo musical, una tarjeta de título, un montaje al ritmo de la música.

Siempre sigue a la voz. No hay modo estático: una profundidad fija adelgaza la música en cada pausa, y una vez que has escuchado ambas no hay razón para quererlo. Cada valor se convierte en una envolvente del propio nivel del habla —el silencio deja la música en paz, un pasaje fuerte empuja el carve a toda profundidad— escrito como automatación normal, que es por lo que los carriles aparecen en la línea de tiempo y pueden editarse después.

El ajuste de nivel es parte de ello. El tallado espectral no puede arreglar una música que es simplemente más fuerte que la voz. Por lo tanto, el carve también mide cuánto por encima de la voz está la música y escribe una etapa de gain: mantenida en un valor para un carve estático, impulsada por una envolvente para uno dinámico. Esa envolvente libera lentamente a propósito —la música que vuelve a toda potencia en el instante en que termina una palabra suena a máquina haciéndolo.

Ejecutarlo. En el Estudio, el carve es un módulo en la parte superior del rack de efectos de una pista —voz, intensidad, dinámico y el análisis que produjo, en una sola tarjeta. Está ahí cada vez que otra pista podría ser la voz, y una música con exactamente un candidato encima se talla por defecto, dinámicamente, con la intensidad por defecto: eso es lo que una música bajo narración quiere, y el módulo es donde puedes cambiarlo o desactivarlo. Varios candidatos dejan el selector esperando en lugar de adivinar. Sin interfaz gráfica — que es la ruta cuando estás creando una composición en lugar de editando una:

node <SKILL_DIR>/scripts/carve.mjs --comp index.html

Ese es el comando completo. Encuentra…

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

embedded-captions

>

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

Skills relacionados