Communitygithub.com

hyperframes-audio

Effets audio, ducking et automation pour la plateforme HyperFrames.

Qu'est-ce que hyperframes-audio ?

Ce skill audio pour HyperFrames traite le son comme un ensemble de relations plutôt qu'une pile de processeurs. Il gère les effets audio (gain, EQ, compresseur, limiteur, réverbération, délai, etc.) via l'attribut `data-fx-chain`, l'automatisation du volume et des paramètres d'effet via `data-automation`, et le carve de voix off via `data-fx-carve`. Le système utilise une seule implémentation pour chaque effet, garantissant que ce que vous entendez en prévisualisation correspond exactement à ce qui sera rendu. Il prend en charge les transitions, les fondus, et le ducking de musique de fond par rapport à la voix, avec des profils prédéfinis pour des corrections rapides. Le skill s'intègre à `/hyperframes-core` pour le timing des clips et à `/media-use` pour la génération des sources.

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

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

HyperFrames Audio

Un mix est un ensemble de relations, pas une pile de processeurs. Deux pistes qui sonnent bien individuellement peuvent être inécoutables ensemble, et la solution n'est presque jamais de « baisser l'une » — il s'agit de trouver sur quoi elles se disputent et de le donner à celle qui en a besoin. Chaque outil ici existe pour exprimer une de ces relations.

Les effets vivent sur l'élément en tant que data-fx-chain, et la prévisualisation et le rendu utilisent le même graphe Web Audio — le studio dans un contexte live, le moteur dans un contexte hors ligne dans le navigateur qu'il pilote déjà. Il n'y a qu'une seule implémentation de chaque effet, donc ce que vous entendez en naviguant est ce qui sera écrit. Vous ne réglez jamais deux fois.

Le timing des clips reste sous /hyperframes-core : les coupes audio/vidéo et les plages source utilisent data-start, data-duration et data-media-start, et les fondus enchaînés superposent les clips sur différentes pistes. Ce skill gère les fondus d'entrée/sortie de piste placée, les enveloppes de fondu enchaîné, le gain/volume de piste, l'automatisation du volume et des effets, le ducking/carve de voix off, et la chaîne d'effets. /media-use gère la source, la génération et le prétraitement.

Le taux de lecture constant data-playback-rate (0,1..5) est sûr pour le rendu de l'image et du son avec préservation de la hauteur lorsque des éléments audio/vidéo correspondants utilisent le même timing, le même décalage source et le même taux. Les rampes de vitesse source ne sont pas prises en charge car il n'y a pas d'enveloppe de taux ; prétraitez un actif synchronisé dérivé. HyperFrames ne fournit pas de synchronisation automatique de forme d'onde ni de correction de dérive. Pour des recettes de coupe/fondu enchaîné/re-timing copiables, utilisez /hyperframes-core → references/creator-editing-recipes.md.

Trois attributs portent tout, directement sur l'élément audio/vidéo :

AttributContient
data-fx-chainles effets, dans l'ordre du signal
data-automationles enveloppes sur le volume de cette piste ou ses paramètres d'effet
data-fx-carveles propres réglages du carve, pour pouvoir être redérivé

Les familles d'effets fournies sont : gain, EQ (passe-haut, passe-bas, pic, étagères), compresseur, limiteur, gate, saturation, délai, réverbération, chorus, phaser et bitcrush.

JSON exact pour chacun, et les règles qu'une piste doit satisfaire : references/attributes.md. Chaque effet avec ses paramètres, plages et unités : references/fx-registry.md. Comment déterminer ce qui ne va pas avec un fichier que vous ne pouvez pas entendre : references/diagnosis.md. Préréglages, tâches nommées et profils à un seul bouton, ainsi qu'un tableau symptôme-résolution : references/presets.md — lisez-le avant de construire une chaîne à la main, car un des préréglages ou tâches nommées nomme généralement déjà le problème.

Comment tout s'assemble

Deux surfaces de création écrivent ces attributs ; deux runtimes les lisent via les mêmes constructeurs. Ce noyau partagé est la raison pour laquelle la prévisualisation prédit le rendu.

flowchart TB
  voice["piste voix<br/>fichier média"]
  bed["piste musique<br/>fichier média"]

  subgraph AUTHOR["Création — les seules choses qui écrivent les attributs"]
    panel["Studio<br/>Contrôle du carve de voix off"]
    script["scripts/carve.mjs<br/>détecte la paire, dynamique par défaut"]
    analysis["core/audioCarve.ts<br/>carveProfile · analyseCarveBands<br/>analyseCarveDuck · analyseCarveDynamics"]
    panel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATTRS["Écrits sur l'élément de la piste musique"]
    carveAttr["data-fx-carve<br/>source · strength · dynamic"]
    chainAttr["data-fx-chain<br/>peaking xN + gain, taggé fromCarve"]
    autoAttr["data-automation<br/>une piste par paramètre carvé"]
  end

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

  subgraph SHARED["Une seule implémentation, lue par les deux"]
    build["audioFxGraph.ts · buildFxChain"]
    sched["audioFxAutomation.ts · scheduleChainAutomation"]
  end

  chainAttr --> build
  autoAttr --> sched

  build --> preview["Prévisualisation<br/>AudioContext en direct<br/>attachElementFxChain"]
  sched --> preview
  build --> render["Rendu<br/>OfflineAudioContext dans le navigateur sans tête<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["ce que vous entendez en naviguant"]
  render --> wav["WAV traité<br/>+ chainTailSeconds pour que le mix laisse passer la queue"]
  wav --> mix["moteur · audioMixer<br/>la piste de volume est intégrée dans le PCM ici, pas dans le graphe"]
  mix --> out["le mix rendu"]

  edit["éditer l'attribut pendant la lecture"] -.->|MutationObserver| preview

Les propres réglages du carve ne sont jamais lus à la lecture — la chaîne et les pistes qu'il a produites sont ce qui est joué. data-fx-carve existe pour que la force puisse être modifiée sur un carve existant au lieu d'être devinée à partir des filtres.

À l'intérieur d'une piste musique carvée, le signal passe d'abord par les creux, puis par l'égalisation de niveau, puis par tout ce que vous avez construit vous-même — c'est pourquoi un limiteur que vous ajoutez agit toujours comme le plafond final :

flowchart LR
  src["piste musique décodée"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1,6 kHz"]
  p3 --> g["gain<br/>égalisation de niveau"]
  g --> hand["vos propres effets<br/>ex. limiteur"]
  hand --> dest["gain de piste, puis sortie"]

  l1["piste fx.n1.gain"] -.->|"enveloppe du niveau<br/>de la voix dans cette bande"| p1
  l4["piste fx.n4.gain"] -.->|"à quel point la musique<br/>baisse globalement"| g

Un carve statique est le même graphe avec des valeurs fixes et aucune piste du tout.

D'abord, déterminer ce qui ne va pas

Le tableau ci-dessous part de « ça sonne sourd » — ce qui suppose que quelqu'un a déjà écouté et l'a dit. Si on vous donne un fichier avec « réparez ça », vous n'avez pas cette phrase et vous ne pouvez pas écouter, vous devez donc mesurer. Une règle régit tout :

Le spectre absolu d'une seule voix inconnue ne peut pas être diagnostiqué. Les formants sont de ±10 dB, les fondamentales vont de 85 à 255 Hz, et les phrases diminuent de 5 à 6 dB en fin de phrase. Chacune de ces choses ressemble à un défaut en soi, et chacune d'elles est le locuteur.

Comparez donc, et comparez avec quelque chose dans le même fichier : l'original propre s'il existe, sinon les pauses — tout ce qui est audible dans un silence est additif, et le spectre du silence est celui du canal plutôt que celui de la voix. Comparer avec un spectre moyen publié ou une voix de synthèse de contrôle ne fonctionne pas : deux locuteurs diffèrent plus que la plupart des défauts, et les deux mauvaises réponses dans l'évaluation qui a guidé cette recommandation viennent exactement de là.

Lorsqu'il n'y a pas d'original et pas de silence utilisable, un défaut tonal statique est véritablement sous-déterminé. Dites-le et proposez les lectures qui correspondent, plutôt que d'en choisir une et de construire une chaîne dessus.

Commandes, pièges et recettes éprouvées : references/diagnosis.md. Lisez-le avant de diagnostiquer un fichier que personne n'a décrit.

Partir du symptôme

Une fois que vous connaissez la bande et le type, nommez ce qui ne va pas avec l'audio. La plupart des mauvais audios sont un ou deux de ces problèmes, et chacun a une réponse prête :

Ça ressemble àUtilisez
Bourdonnement ou bruit sourdrumble-cut, ou un highpass à 80 Hz
Sourd, caverneuxTâche Atténuer la rondeur (200 Hz)
Étouffé, comme derrière du cartonTâche Réduire le boueux (250 Hz)
Mots difficiles à comprendreTâche Ajouter de la clarté (3 kHz), ou carver la musique
Âpre et fatigantTâche Adoucir l'âpreté (3,2 kHz)
Certains mots bien plus forts que d'autresTâche Uniformiser avec un compresseur, ou Niveaux uniformes
Son de pièce entre les phrasesroom-gate
Voix et musique en conflitCarve de voix off — pas un EQ sur l'une ou l'autre
Sec, enregistré nulle partroom-tight ou room-natural
Juste « amateur »voice-clean, qui est quatre des ci-dessus en ordre

Catalogue complet, contenu de chaque préréglage, vocabulaire des bandes, et ce qui est délibérément NON couvert (dé-essing, suppression de bruit, correspondance de tonalité) : references/presets.md.

Soustrayez avant d'ajouter, égalisez après avoir filtré, les relations après l'égalisation, le caractère et le plafond en dernier. Chaque étape change ce que la suivante entend — un compresseur réglé avant un passe-haut passe son temps à chasser les basses fréquences.

Choisir une famille par le problème, pas par le nom

Filtres (highpass, lowpass, peaking, lowshelf, highshelf) décident quelles fréquences une piste est autorisée à occuper. C'est le premier outil pour deux sources en collision, car les collisions se produisent par bandes : une musique et une voix veulent toutes deux 1–3 kHz, et retirer cela de la musique coûte bien moins à la musique que de baisser tout le volume ne coûte au mix. Un passe-haut sur une voix est la solution standard pour les bruits sourds ; un passe-bas assombrit ou étouffe délibérément.

Dynamiques (gain, compressor, limiter, gate) décident comment le niveau d'une piste se comporte dans le temps. La compression réduit la distance entre le fort et le faible pour que les parties faibles puissent remonter. Un limiteur est un plafond — il ne façonne rien, il garantit que rien ne le dépasse. Un gate supprime ce qui est en dessous d'un seuil, ce qui permet de faire taire le bruit de pièce entre les phrases. gain est un simple étage de niveau, et c'est ce qu'une piste d'automatisation utilise lorsqu'une piste doit se déplacer pour laisser passer l'autre.

Non linéaires (saturate, bitcrush) modifient la forme de l'onde, ce qui ajoute des harmoniques qui n'étaient pas là. Utilisez-les lorsqu'une piste a besoin de caractère ou de grain plutôt que de correction — et rappelez-vous qu'ils sont génératifs : ils rendent une source fine plus dense, pas plus propre.

Temporels (delay, reverb, chorus, phaser) placent une piste dans un espace ou lui donnent de la largeur. Ce sont ceux qui gâchent le plus facilement un mix, car une queue ou une copie désaccordée occupe la même pièce dont une voix a besoin. Utilisez-les sur la chose qui doit se trouver derrière autre chose, et gardez la quantité de wet plus faible que ce qui sonne bien en isolation.

La chaîne est en série : chaque effet traite ce que le précédent a produit. Placez donc les filtres correctifs tôt, le caractère au milieu, et un limiteur en dernier où il peut effectivement agir comme un plafond.

Carve de voix off

Le problème qu'il résout. Une musique de fond sous une voix rend la voix difficile à suivre. Le réflexe est de baisser toute la musique, ce qui fonctionne mais coûte à la musique toute sa présence — la musique devient molle pendant toute la voix off. Mais la voix n'a pas besoin de tout le spectre. Elle a besoin des quelques bandes qu'elle occupe réellement. Le carve ne prend que celles-ci, et la musique conserve ses basses et ses hautes, donc la musique reste belle tout en laissant la voix intelligible.

C'est une relation, pas un effet. Les réglages vivent sur la musique — la piste qui est traitée — et ils nomment les voix à écouter, exactement comme un compresseur sidechain : vous sélectionnez la piste qui devient plus silencieuse et choisissez ce qui la rend plus silencieuse. Ne mettez jamais un carve sur une piste de voix. Une voix carvée contre elle-même est un bug, pas un choix de mix subtil.

Toutes les voix, pas une seule. sources est une liste, car une musique passe généralement sous une séquence entière — un narrateur, une réponse d'interview, un deuxième présentateur. Elles sont sommées sur la propre horloge de la musique avant que quoi que ce soit ne soit mesuré (mixCarveSources), donc une seule analyse les couvre toutes : les bandes proviennent de toute la parole présente, et les enveloppes montent chaque fois que l'une d'elles se produit. Les voix qui ne jouent jamais pendant que la musique joue sont laissées de côté ; elles ne peuvent pas la masquer.

Un seul bouton. strength est de 0 à 1 et dérive tout : à quelle profondeur couper, combien de bandes, combien larges, à quel point favoriser l'intelligibilité par rapport à l'énergie vocale brute, à quel point le niveau peut chuter, à quel point viser en dessous de la voix. Ces six choses bougent ensemble dans tout mix réel — un carve doux est une coupe peu profonde dans peu de bandes avec peu de ducking, un carve fort est plus profond dans plus de bandes avec plus — donc elles sont une seule relation écrite une fois, dans carveProfile. La valeur par défaut est 0,25 — une baisse de 6 dB dans trois bandes avec 6 dB de marge de niveau, audible sans ressembler à un trou. À 0,5, la baisse atteint 10 dB, ce qui est le point où un carve commence à être entendu comme un effet plutôt que comme un espace pour la voix ; au-dessus, c'est un territoire délibéré pour une musique forte sous une voix faible. 0 est purement spectral — une seule bande, aucune égalisation de niveau.

Carve par défaut. Une musique jouant sous une narration veut un carve ; ce n'est pas une étape de polissage à faire s'il reste du temps. Placez les deux pistes, exécutez la commande ci-dessous, écoutez. Ne l'ignorez que lorsqu'il n'y a pas de narration pour que la musique se place en dessous — un clip musical, un générique, un montage cuté sur la musique.

Il suit toujours la voix. Il n'y a pas de mode statique : une profondeur fixe appauvrit la musique pendant chaque pause, et une fois que vous avez entendu les deux, il n'y a aucune raison de vouloir l'autre. Chaque valeur devient une enveloppe du propre niveau de la parole — le silence laisse la musique tranquille, un passage fort pousse le carve à pleine profondeur — écrite comme une automation ordinaire, c'est pourquoi les pistes apparaissent dans la timeline et peuvent être éditées ensuite.

L'égalisation de niveau en fait partie. Le carve spectral ne peut pas corriger une musique simplement plus forte que la voix. Donc le carve mesure également à quel point la musique dépasse la voix et écrit un étage gain : maintenu à une valeur pour un carve statique, piloté par une enveloppe pour un carve dynamique. Cette enveloppe se relâche lentement à dessein — une musique qui revient à fond instantanément après un mot sonne comme une machine.

Exécution. Dans Studio, le carve est un module en haut de la chaîne d'effets d'une piste — voix, force, dynamique, et l'analyse qu'il a produite, dans une seule carte. Il est présent chaque fois qu'une autre piste pourrait être la voix, et une musique avec exactement un candidat au-dessus d'elle est carvée par défaut, dynamiquement, avec la force par défaut : c'est ce qu'une musique sous une narration veut, et le module est l'endroit où vous la modifiez ou la désactivez. Plusieurs candidats laissent le sélecteur en attente plutôt que de deviner. En mode sans tête — qui est le chemin lorsque vous créez une composition plutôt que d'en éditer une :

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

C'est la commande complète. Elle trouve

…

[le contenu est tronqué pour la traduction]

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 associés