Communitygithub.com

hyperframes-audio

Gère les relations audio dans HyperFrames : chaîne d'effets, fondu, ducking, automation et gravure de voix.

Qu'est-ce que hyperframes-audio ?

Cette compétence pour HyperFrames gère toutes les relations audio dans un montage : la chaîne d'effets (`data-fx-chain`), l'automatisation du volume et des paramètres d'effets (`data-automation`), le ducking et la gravure de voix (`data-fx-carve`), ainsi que les fondus et les enveloppes de fondu. Elle s'applique aux éléments audio/vidéo et aux bus `<hf-audio-group>`. Les effets sont implémentés une seule fois et partagés entre l'aperçu et le rendu. La compétence fournit des présets pour les défauts audio courants (basses, boueux, dur, etc.) et une procédure de diagnostic basée sur la comparaison. Elle prend en charge les rampes de vitesse via un lane `rate` dans l'automatisation. Plateformes : HyperFrames, navigateur (aperçu en direct et rendu hors ligne).

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/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

Installation du plugin : Avant les commandes de configuration ou de fraîcheur, suivez les règles d'exécution du plugin lorsque cette compétence se trouve dans un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.

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 ce sur quoi elles se battent 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 l'aperçu et le rendu utilisent le même graphe Web Audio — le studio dans un contexte en direct, le moteur dans un contexte hors ligne dans le navigateur qu'il pilote déjà. Il y a une seule implémentation de chaque effet, donc ce que vous entendez en déplaçant le curseur est ce qui est écrit. Vous ne réglez jamais deux fois.

Le timing des clips reste /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. Cette compétence possède le fondu d'entrée/de sortie des pistes placées, les enveloppes de fondu enchaîné, le gain/volume de piste, l'automatisation du volume et des effets, le ducking/gravure de voix, et la chaîne d'effets. /media-use possède l'approvisionnement, la génération et le prétraitement.

La constante data-playback-rate (0.1..10) est sûre pour le rendu de l'image et du son préservant la hauteur lorsque les éléments audio/vidéo correspondants utilisent le même timing, le même décalage source et le même taux. Une rampe de vitesse est un lane rate dans data-automation (voir docs/reference/speed-ramps) ; elle prévaut sur la constante et maintient la hauteur dans l'aperçu et le rendu. 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, sur l'élément audio/vidéo lui-même — ou, pour les deux premiers, sur un bus <hf-audio-group> (voir "Un bus pour plusieurs pistes") :

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 de la gravure, pour pouvoir être redérivés

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

JSON exact pour chacun, et les règles qu'un lane 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 dans un fichier que vous ne pouvez pas entendre : references/diagnosis.md. Presets, jobs nommés et profils one-knob, plus une table symptôme-vers-correction : references/presets.md — lisez cela avant de construire manuellement une chaîne, car un des presets ou jobs nommés 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 milieu partagé est la raison pour laquelle l'aperçu 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 de la gravure de voix"]
    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, tagué fromCarve"]
    autoAttr["data-automation<br/>un lane par paramètre gravé"]
  end

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

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

  chainAttr --> build
  autoAttr --> sched

  build --> preview["Aperçu<br/>AudioContext en direct<br/>attachElementFxChain"]
  sched --> preview
  build --> render["Rendu<br/>OfflineAudioContext dans le navigateur headless<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["ce que vous entendez en déplaçant le curseur"]
  render --> wav["WAV traité<br/>+ chainTailSeconds pour que le mix laisse passer la queue"]
  wav --> mix["moteur · audioMixer<br/>le lane de volume est cuit dans le PCM ici, pas dans le graphe"]
  mix --> out["le rendu mixé"]

  edit["modification de l'attribut en cours de lecture"] -.->|MutationObserver| preview

Les propres réglages de la gravure ne sont jamais lus à la lecture — la chaîne et les lanes qu'elle a produits sont ce qui est joué. data-fx-carve existe pour que la force puisse être changée sur une gravure existante au lieu d'être devinée à partir des filtres.

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

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["lane fx.n1.gain"] -.->|"enveloppe du niveau<br/>de la voix dans cette bande"| p1
  l4["lane fx.n4.gain"] -.->|"à quel point la piste musique<br/>s'abaisse globalement"| g

Une gravure statique est le même graphe avec des valeurs fixes et aucun lane.

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 et "répare ça", vous n'avez pas une telle phrase et vous ne pouvez pas écouter, donc vous devez mesurer. Une règle gouverne tout cela :

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

Donc comparez, et comparez par rapport à quelque chose dans le même fichier : l'original propre s'il existe, sinon les silences — tout ce qui est audible dans un trou est additif, et le spectre du trou est celui du canal plutôt que de la voix. Comparer à un spectre moyen publié ou à une voix de contrôle synthétisée ne fonctionne pas : deux locuteurs diffèrent plus que la plupart des défauts, et les deux mauvaises réponses dans l'évaluation derrière ces conseils viennent exactement de cela.

Quand il n'y a pas d'original ni 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 audio sont un ou deux de ces problèmes, et chacun a une réponse fournie :

| Ça sonne comme… | Utilisez | |------------------------------------------|------------------------------------------------|| | Ronflement ou bruit sourd en dessous | rumble-cut, ou un highpass à 80 Hz | | Sourd, dans la poitrine | Tame Boominess (200 Hz) | | Étouffé, derrière du carton | Reduce Mud (250 Hz) | | Mots difficiles à comprendre | Add Clarity (3 kHz), ou gravez la piste musique | | Dur et fatigant | Soften Harshness (3.2 kHz) | | Certains mots beaucoup plus forts que d'autres | Evenness sur un compresseur, ou Even Out Levels | | Bruit de pièce entre les phrases | room-gate | | Voix et musique qui se battent | Gravure de voix — pas un EQ sur l'un ou l'autre | | Sec, enregistré nulle part | room-tight ou room-natural | | Juste "amateur" | voice-clean, qui est quatre des ci-dessus dans l'ordre |

Catalogue complet, ce que contient chaque preset, le 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é, relations après l'égalisation, caractère et plafond en dernier. Chaque étape change ce que la suivante entend — un compresseur réglé avant un passe-haut passe son temps à chasser le ronflement.

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 qui entrent en collision, parce que les collisions arrivent par bandes : une piste musique et une voix veulent toutes les deux 1–3 kHz, et prendre cela de la piste musique coûte beaucoup moins à celle-ci que baisser le tout ne coûte au mix. Un passe-haut sur une voix est la correction standard pour le ronflement ; 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 l'écart entre fort et 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, c'est ainsi que vous faites taire le bruit de pièce entre les phrases. gain est un simple étage de niveau, et c'est ce qu'un lane d'automatisation utilise quand une piste doit se déplacer.

Non linéaires (saturate, bitcrush) changent la forme d'onde, ce qui ajoute des harmoniques qui n'étaient pas là. Utilisez-les quand une piste a besoin de caractère ou de grain plutôt que de correction — et rappelez-vous qu'elles sont génératives : elles 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 abîment le plus facilement un mix, car une queue ou une copie désaccordée occupe le même espace dont une voix a besoin. Utilisez-les sur ce qui doit se trouver derrière autre chose, et gardez le niveau humide plus bas 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. Donc le filtrage correctif va tôt, le caractère au milieu, et un limiteur en dernier où il peut réellement agir comme un plafond.

Gravure de voix

Le problème qu'elle résout. Une piste musique sous une voix rend la voix difficile à suivre. Le réflexe est d'abaisser toute la piste musique, ce qui fonctionne mais coûte à la piste 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. La gravure ne prend que celles-ci, et la piste musique conserve ses basses et ses aigus, donc elle reste de la musique pendant que la voix reste intelligible.

C'est une relation, pas un effet. Les réglages vivent sur la piste 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 une gravure sur une piste de voix. Une voix gravée contre elle-même est un bug, pas un choix de mix subtil.

Chaque voix, pas une seule. sources est une liste, car une piste musique fonctionne généralement sous une séquence entière — un narrateur, une réponse d'interview, un second présentateur. Elles sont additionnées sur l'horloge de la piste musique avant que quoi que ce soit ne soit mesuré (mixCarveSources), donc une analyse les couvre tous : les bandes viennent de toute la parole présente, et les enveloppes montent partout où l'une d'elles se produit. Les voix qui ne jouent jamais pendant la piste musique sont laissées de côté ; elles ne peuvent pas la masquer.

Une gravure contre plus d'un identifiant de clip est erronée. Regroupez les clips et gravez contre le groupe. C'est un invariant, pas un conseil. Nommer les clips un par un doit être exhaustivement correct et ne reste correct que jusqu'à la prochaine édition — un quatrième clip de narration ajouté plus tard joue en dehors de la conscience de la gravure, et la piste musique ne s'abaisse pas silencieusement. Nommer le groupe à la place résout l'appartenance au moment de l'analyse, donc un clip ajouté au groupe plus tard est pris en compte sans toucher à sources du tout :

<!-- groupe la narration, puis grave la piste musique contre le groupe -->
<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>

Une liste sources nommant deux identifiants de clips simples ou plus au lieu d'un groupe est détectée par la règle de lint audio_carve_ungrouped_sources — elle fonctionne encore, mais c'est la version qui pourrit silencieusement quand un clip est ajouté.

Gardez le groupe de gravure comme un groupe de voix : pas de piste musique, pas de bruitage, pas de musique. Un identifiant de groupe dans sources se résout à chaque membre actuel à chaque analyse, donc le groupe que vous nommez est le groupe que vous obtenez plus tard — pas les pistes qui ont été mesurées quand il a été écrit. Deux façons dont cela mord :

  • La piste musique dans son propre groupe source. Elle est donnée à elle-même comme une voix et gravée contre son propre contenu — la règle "ne jamais graver une piste contre elle-même" arrive une réanalyse plus tard.
  • Un clip SFX ou musique dans le groupe voix. Il entre dans le sidechain à la prochaine analyse et la piste musique commence à s'abaisser sous un whoosh, même si l'exécution qui a écrit l'attribut ne l'a jamais mesuré.

Les deux sont invisibles au moment où la gravure est écrite : l'analyse additionne les voix qu'elle a détectées et ne repasse jamais par la résolution de groupe, donc le premier passage est réellement correct et seul le suivant est erroné. Donnez donc à chaque rôle son propre groupe — music pour la piste musique, voiceover pour la narration, sfx pour les bruitages — et gardez le groupe nommé dans sources contenant uniquement des voix.

carve.mjs refuse d'écrire la forme du groupe quand il voit l'un ou l'autre cas, enregistre les identifiants de clips et dit

…

[truncé pour la traduction]

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