Communitygithub.com

hyperframes-audio

Gestiona relaciones de mezcla de audio en HyperFrames: encadenamiento de efectos, automatización, carving de voz en off y volumen de pista, todo en atributos del elemento.

¿Qué es hyperframes-audio?

HyperFrames Audio es una skill de HyperFrames que gestiona todas las relaciones de mezcla de audio a través de atributos HTML (`data-fx-chain`, `data-automation`, `data-fx-carve`). Funciona tanto en previsualización en vivo como en renderizado offline, unificando el procesamiento. Proporciona una cadena de efectos serial (gain, EQ, compresor, limitador, gate, saturación, delay, reverb, chorus, phaser y bitcrush), automatización de parámetros y carving de voz en off (ducking selectivo por bandas de frecuencia). Es compatible con navegadores modernos que soportan Web Audio API y con el pipeline de renderizado headless de HyperFrames. La skill se enfoca en relaciones entre pistas en lugar de efectos aislados: los filtros correctivos van primero, luego los efectos de carácter, y finalmente el limitador como techo. El carving de voz en off actúa como una relación dinámica: en lugar de bajar todo el volumen de la música, solo reduce las bandas de frecuencia que ocupa la voz, preservando el cuerpo y la presencia de la música.

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

Preguntar en tu IA favorita

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

Documentación

Instalación del plugin: Antes de los comandos de configuración o actualización, sigue las reglas de ejecución del plugin cuando esta skill esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.

HyperFrames Audio

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

Los efectos viven en el elemento como data-fx-chain, y la previsualización y el renderizado 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 mientras haces scrub es lo que se escribe. Nunca ajustas dos veces.

El tiempo de los clips sigue siendo /hyperframes-core: los recortes de audio/video y los rangos de origen usan data-start, data-duration y data-media-start, y los crossfades superponen clips en pistas diferentes. Esta skill posee el fundido de entrada/salida de pistas colocadas, envolventes de crossfade, ganancia/volumen de pista, automatización de volumen y efectos, carving de voz en off, y la cadena de efectos. /media-use posee la obtención de fuentes, generación y preprocesamiento.

La constante data-playback-rate (0.1..10) es segura para renderizar en imagen y sonido con tono preservado cuando los elementos de audio/video coinciden utilizan la misma sincronización, desplazamiento de origen y velocidad. Un ramp de velocidad es un carril rate en data-automation (ver docs/reference/speed-ramps); prevalece sobre la constante y mantiene el tono en previsualización y renderizado. HyperFrames no proporciona sincronización automática de formas de onda ni corrección de deriva. Para recetas copiables de corte/crossfade/reajuste de tiempo, usa /hyperframes-core → references/creator-editing-recipes.md.

Tres atributos lo llevan todo, en el propio elemento de audio/video — o, para los dos primeros, en un bus <hf-audio-group> (ver "Un bus para muchas pistas"):

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 en sí, para que pueda ser re-derivada

Las familias de efectos disponibles son: gain, EQ (paso alto, paso bajo, pico, estanterías), compresor, limitador, gate, saturación, delay, reverb, chorus, phaser y bitcrush.

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 averiguar qué está mal en un archivo que no puedes escuchar: references/diagnosis.md. Presets, trabajos nombrados y perfiles de un solo botón, más una tabla de síntoma a solución: references/presets.md — léelo antes de construir una cadena manualmente, porque uno de los presets o trabajos nombrados suele nombrar el problema.

Cómo encaja todo

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

flowchart TB
  voice["pista de voz<br/>archivo multimedia"]
  bed["cama musical<br/>archivo multimedia"]

  subgraph AUTHOR["Autoría — las únicas cosas que escriben atributos"]
    panel["Estudio<br/>Control de carve de voz en off"]
    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 ATTRS["Escrito en el elemento de la cama"]
    carveAttr["data-fx-carve<br/>source · strength · dynamic"]
    chainAttr["data-fx-chain<br/>peaking xN + gain, etiquetado fromCarve"]
    autoAttr["data-automation<br/>un carril por parámetro esculpido"]
  end

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

  subgraph SHARED["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 headless<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["lo que escuchas mientras haces scrub"]
  render --> wav["WAV procesado<br/>+ chainTailSeconds para que la mezcla permita el tail"]
  wav --> mix["motor · audioMixer<br/>el carril de volumen se hornea en el PCM aquí, no en el grafo"]
  mix --> out["la mezcla renderizada"]

  edit["editar el atributo mientras se reproduce"] -.->|MutationObserver| preview

La configuración del carve en sí nunca se lee durante la reproducción — lo que se reproduce es la cadena y los carriles que produjo. data-fx-carve existe para que la fuerza se pueda cambiar en un carve existente sin tener que adivinarla de nuevo a partir de los filtros.

Dentro de una cama esculpida, la señal pasa primero por los hundimientos, luego por el ajuste de nivel, luego por cualquier cosa que hayas construido tú mismo — que es por qué un limitador que agregues sigue actuando como el techo final:

flowchart LR
  src["cama decodificada"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["gain<br/>ajuste de nivel"]
  g --> hand["tus propios efectos<br/>p. 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 baja<br/>la cama en general"| g

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

Primero, averigua qué está mal

La tabla a continuación parte de "suena retumbante" — 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 gobierna todo:

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

Así que compara, y compara contra algo dentro del mismo archivo: el original limpio si existe, si no los silencios — cualquier cosa audible en un hueco es aditiva, y el espectro del hueco es el canal, no la voz. Comparar contra un espectro promedio publicado o una voz de control sintetizada no funciona: dos hablantes difieren más que la mayoría de los defectos, y ambas respuestas incorrectas en la evaluación detrás de esta guía provinieron de exactamente eso.

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

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

Empieza por el síntoma

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

Suena comoUsa
Zumbido o golpeteo debajorumble-cut, o un highpass a 80 Hz
Retumbante, pectoralTame Boominess job (200 Hz)
Apagado, detrás de cartónReduce Mud job (250 Hz)
Palabras difíciles de entenderAdd Clarity job (3 kHz), o esculpe la cama
Duro y cansinoSoften Harshness job (3.2 kHz)
Algunas palabras más fuertes que otrasEvenness en un compresor, o Even Out Levels
Ruido de sala entre frasesroom-gate
Voz y música peleandoVoiceover carve — no un EQ en ninguna
Seco, grabado en ninguna parteroom-tight o room-natural
Simplemente "amateur"voice-clean, que es cuatro de los anteriores en orden

Catálogo completo, qué contiene cada preset, el vocabulario de bandas y qué está DELIBERADAMENTE NO CUBIERTO (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 paso alto pasa su tiempo persiguiendo retumbos.

Usa 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 las colisiones ocurren en bandas: una cama y una voz quieren 1–3 kHz, y quitar eso de la cama le cuesta mucho menos que bajar todo el volumen a la mezcla. Un paso alto en una voz es la solución estándar para el retumbo; un paso bajo oscurece o amortigua deliberadamente.

Dinámicas (gain, compressor, limiter, gate) deciden cómo se comporta el nivel de una pista a lo largo del 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, garantiza que nada pase. Un gate elimina lo que está por debajo de un umbral, que es cómo silencias el ruido 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 paso.

No lineales (saturate, bitcrush) cambian la forma de la onda, lo que añade armónicos que no estaban allí. Úsalos cuando una pista necesita carácter o textura en lugar de corrección — y recuerda que son generativos: 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. Estos son los que más fácilmente arruinan una mezcla, porque una cola o una copia desafinada ocupa el mismo espacio que necesita la voz. Úsalos en lo que debe sentarse detrás de algo más, y mantén la cantidad de efecto húmedo más baja de lo que suena bien de forma aislada.

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

Voiceover carve

El problema que resuelve. Una cama musical debajo de una voz hace que la voz sea difícil de seguir. El reflejo es bajar toda la cama, lo que funciona pero le cuesta a la cama toda su presencia — la música se vuelve floja durante toda la voz en off. Pero la voz no necesita todo el espectro. Necesita las pocas bandas que realmente ocupa. El carve toma solo esas, y la cama mantiene su extremo bajo y su parte alta, por lo que sigue siendo música mientras la voz sigue siendo inteligible.

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

Cada voz, no una de ellas. sources es una lista, porque una cama suele sonar bajo una secuencia completa — un narrador, una respuesta de entrevista, un segundo presentador. Se suman en el propio reloj de la cama antes de medir nada (mixCarveSources), por lo que un análisis cubre todas: las bandas provienen de todo el habla que hay, y las envolventes suben donde sea que esté sucediendo. Las voces que nunca suenan mientras la cama lo hace se omiten; no pueden enmascararla.

Un carve contra más de un id de clip está mal. Agrupa los clips y esculpe contra el grupo. Esto es un invariante, no un consejo. Nombrar clips uno por uno tiene que ser exhaustivamente correcto y solo sigue siendo correcto hasta la próxima edición — un cuarto clip de narración añadido después suena fuera de la conciencia del carve, y la cama falla al bajar silenciosamente debajo de él. Nombrar el grupo en su lugar resuelve la pertenencia en el momento del análisis, por lo que un clip añadido al grupo después se cubre sin tocar sources en absoluto:

<!-- agrupa la narración, luego esculpe la cama contra el grupo -->
<audio id="vo-intro" data-audio-group="voiceover" …></audio>
<audio id="vo-middle" data-audio-group="voiceover" …></audio>
<audio id="vo-outro" data-audio-group="voiceover" …></audio>

<audio id="music" data-fx-carve='{"enabled":true,"sources":["voiceover"],"strength":0.8}' …></audio>

Una lista sources que nombra dos o más ids de clip simples en lugar de un grupo es detectada por la regla de lint audio_carve_ungrouped_sources — sigue funcionando, pero es la versión que se pudre silenciosamente cuando se añade un clip.

Mantén el grupo de carve como un grupo de voz: sin cama, sin SFX, sin música. Un id de grupo en sources se resuelve a cada miembro actual en cada análisis, por lo que el grupo que nombras es el grupo que obtienes después — no las pistas que se midieron cuando se escribió. Dos formas en que esto muerde:

  • La cama en su propio grupo fuente. Se entrega a sí misma como voz y se esculpe contra su propio contenido — la regla de "nunca esculpas una pista contra sí misma" llega un re-análisis después.
  • Un clip de SFX o música en el grupo de voz. Entra en la cadena lateral en el siguiente análisis y la cama empieza a bajar bajo un "whoosh", aunque la ejecución que escribió el atributo nunca lo midió.

Ambos son invisibles en el momento en que se escribe el carve: el análisis suma las voces que detectó y nunca pasa por la resolución de grupo, por lo que la primera pasada es genuinamente correcta y solo la siguiente es incorrecta. Así que da a cada rol su propio grupo — music para la cama, voiceover para la narración, sfx para los golpes — y mantén el grupo nombrado en sources conteniendo solo voces.

carve.mjs se niega a escribir la forma de grupo cuando ve cualquiera de los casos, registra los ids de clip, y dice

...

Individual skills in this repo

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

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

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.

heygen-com/hyperframes

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.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

Skills relacionados