Communitygithub.com

hyperframes-audio

HyperFrames Audio definiert Audio-Beziehungen im Mix durch einen signalbasierten Effekt-Chain, automatisierte Hüllkurven und ein Sidechain-basiertes Voiceover-Carving – alles über Web Audio API, sowohl in der Live-Vorschau als auch im finalen Render.

Was ist hyperframes-audio?

HyperFrames Audio ist ein Skill für das HyperFrames-System, der Audio-Mixing nicht als Stapel von Prozessoren, sondern als Netzwerk von Beziehungen zwischen Spuren modelliert. Er definiert drei zentrale Attribute auf Audio-/Video-Elementen: `data-fx-chain` für die serielle Effektkette (Gain, EQ, Kompressor, Limiter, Gate, Sättigung, Delay, Hall, Chorus, Phaser, Bitcrush), `data-automation` für Hüllkurven auf Lautstärke oder Effektparametern und `data-fx-carve` für die Einstellungen des Voiceover-Carvings. Die Besonderheit liegt in der einzigen Implementierung jedes Effekts – was in der Live-Vorschau hörbar ist, wird exakt so gerendert. Das Voiceover-Carving analysiert Sprachfrequenzbänder und schreibt Hüllkurven auf das Musikbett, sodass nur die von der Stimme belegten Frequenzbereiche abgesenkt werden, während das Bett seine Präsenz behält. Unterstützt wird die Entwicklungsumgebung HyperFrames Studio sowie eine headless CLI (`scripts/carve.mjs`). Der Skill ist primär für Audio/Musikproduktion, Videobearbeitung und automatisierte Voiceover-Arbeitsabläufe konzipiert und arbeitet komplementär zu `/hyperframes-core` (Timing, Clips) und `/media-use` (Quellenverwaltung).

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

HyperFrames Audio

Ein Mix ist eine Menge von Beziehungen, kein Stapel von Prozessoren. Zwei Spuren, die für sich allein richtig klingen, können zusammen unhörbar sein – und die Lösung ist fast nie „eine leiser drehen", sondern herauszufinden, worüber sie streiten, und es dem zu geben, der es braucht. Jedes Werkzeug hier dient dazu, eine dieser Beziehungen auszudrücken.

Effekte leben auf dem Element als data-fx-chain, und Vorschau und Render nutzen denselben Web-Audio-Graphen – das Studio in einem Live-Kontext, die Engine in einem Offline-Kontext innerhalb des Browsers, den sie bereits steuert. Es gibt eine Implementierung jedes Effekts, sodass das, was Sie beim Scrubbing hören, auch geschrieben wird. Sie stimmen nie zweimal ab.

Das Clip-Timing bleibt bei /hyperframes-core: Audio-/Video-Trims und Quellbereiche verwenden data-start, data-duration und data-media-start, und Überblendungen überlappen Clips auf verschiedenen Spuren. Dieser Skill verwaltet Einblendung/Ausblendung von platzierten Spuren, Überblendungshüllkurven, Spurenverstärkung/Spurenlautstärke, Lautstärke- und Effektautomation, Ducking/Voiceover-Carving und die Effektkette. /media-use verwaltet Quellen, Generierung und Vorverarbeitung.

Die konstante data-playback-rate (0.1..5) ist rendersicher für Bild und tonhöhenerhaltenden Sound, wenn passende Audio-/Video-Elemente dasselbe Timing, denselben Quell-Offset und dieselbe Rate verwenden. Quellgeschwindigkeitsrampen werden nicht unterstützt, da es keine Ratenhüllkurve gibt; verarbeiten Sie ein abgeleitetes synchronisiertes Asset vor. HyperFrames bietet keine automatische Wellenformsynchronisation oder Driftkorrektur. Für kopierbare Schnitt-/Überblendungs-/Zeitdehnungsrezepte verwenden Sie /hyperframes-core → references/creator-editing-recipes.md.

Drei Attribute tragen alles, alle auf dem Audio-/Video-Element selbst:

AttributEnthält
data-fx-chaindie Effekte in Signalreihenfolge
data-automationHüllkurven auf der Lautstärke dieser Spur oder ihren Effektparametern
data-fx-carvedie eigenen Einstellungen des Carvings, sodass es neu abgeleitet werden kann

Die ausgelieferten Effektfamilien sind Gain, EQ (Hochpass, Tiefpass, Peak, Shelves), Kompressor, Limiter, Gate, Sättigung, Delay, Hall, Chorus, Phaser und Bitcrush.

Genaues JSON für jeden und die Regeln, die eine Spur erfüllen muss: references/attributes.md. Jeder Effekt mit seinen Parametern, Bereichen und Einheiten: references/fx-registry.md. Wie man herausfindet, was mit einer Datei nicht stimmt, die man nicht hören kann: references/diagnosis.md. Voreinstellungen, benannte Jobs und One-Knob-Profile sowie eine Tabelle von Symptom zu Lösung: references/presets.md – lesen Sie das, bevor Sie eine Kette von Hand zusammenbauen, denn eine der Voreinstellungen oder benannten Jobs nennt das Problem normalerweise bereits.

Wie es zusammenhängt

Zwei Autorenoberflächen schreiben diese Attribute; zwei Laufzeitumgebungen lesen sie durch dieselben Builder. Diese gemeinsame Mitte ist der Grund, warum die Vorschau das Rendervorhersagt.

flowchart TB
  voice["Voice-Spur<br/>Mediendatei"]
  bed["Musikbett<br/>Mediendatei"]

  subgraph AUTHOR["Autoring – die einzigen Dinge, die Attribute schreiben"]
    panel["Studio<br/>Voiceover-Carve-Steuerung"]
    script["scripts/carve.mjs<br/>erkennt das Paar, dynamisch standardmäßig"]
    analysis["core/audioCarve.ts<br/>carveProfile · analyseCarveBands<br/>analyseCarveDuck · analyseCarveDynamics"]
    panel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATTRS["Auf das Bettelement geschrieben"]
    carveAttr["data-fx-carve<br/>source · strength · dynamic"]
    chainAttr["data-fx-chain<br/>peaking xN + gain, getaggt von Carve"]
    autoAttr["data-automation<br/>eine Spur pro gecarvtem Parameter"]
  end

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

  subgraph SHARED["Eine Implementierung, von beiden gelesen"]
    build["audioFxGraph.ts · buildFxChain"]
    sched["audioFxAutomation.ts · scheduleChainAutomation"]
  end

  chainAttr --> build
  autoAttr --> sched

  build --> preview["Vorschau<br/>live AudioContext<br/>attachElementFxChain"]
  sched --> preview
  build --> render["Render<br/>OfflineAudioContext im Headless-Browser<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["Was Sie beim Scrubbing hören"]
  render --> wav["Verarbeitete WAV<br/>+ chainTailSeconds, damit der Mix den Ausklang durchlässt"]
  wav --> mix["Engine · audioMixer<br/>Lautstärkespur hier in das PCM eingebacken, nicht im Graph"]
  mix --> out["Der gerenderte Mix"]

  edit["Bearbeitung des Attributs während der Wiedergabe"] -.->|MutationObserver| preview

Die eigenen Einstellungen des Carvings werden nie zur Wiedergabe gelesen – die Kette und die Spuren, die es erzeugt hat, werden abgespielt. data-fx-carve existiert, damit die Stärke an einem vorhandenen Carve geändert werden kann, anstatt sie aus den Filtern zurückzuschätzen.

Innerhalb eines gecarvten Betts durchläuft das Signal zuerst die Absenkungen, dann den Pegelausgleich, dann alles, was Sie selbst gebaut haben – daher wirkt ein Limiter, den Sie hinzufügen, immer noch als letzte Begrenzung:

flowchart LR
  src["Dekodiertes Bett"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["gain<br/>Pegelausgleich"]
  g --> hand["Ihre eigenen Effekte<br/>z. B. Limiter"]
  hand --> dest["Spurenverstärkung, dann Ausgang"]

  l1["Spur fx.n1.gain"] -.->|"Hüllkurve des<br/>Stimmpegels in diesem Band"| p1
  l4["Spur fx.n4.gain"] -.->|"Wie stark das Bett<br/>insgesamt duckt"| g

Ein statisches Carve ist derselbe Graph mit festen Werten und gar keinen Spuren.

Zuerst: Finden Sie heraus, was falsch ist

Die folgende Tabelle beginnt mit „es klingt dröhnend" – was voraussetzt, dass bereits jemand zugehört und das gesagt hat. Wenn Sie eine Datei erhalten mit der Anweisung „Reparieren Sie das", haben Sie keinen solchen Satz und können nicht zuhören, also müssen Sie messen. Eine Regel regiert alles:

Das absolute Spektrum einer einzelnen unbekannten Stimme kann nicht diagnostiziert werden. Formanten sind ±10 dB, Grundfrequenzen liegen bei 85–255 Hz, und Sätze fallen um 5–6 dB ab, wenn sie enden. Jeder dieser Werte liest sich für sich genommen wie ein Defekt, und jeder einzelne ist der Sprecher.

Vergleichen Sie also, und vergleichen Sie mit etwas innerhalb derselben Datei: das saubere Original, falls vorhanden, ansonsten die Pausen – alles, was in einer Lücke hörbar ist, ist additiv, und das Spektrum der Lücke ist der Kanal, nicht die Stimme. Der Vergleich mit einem veröffentlichten Durchschnittsspektrum oder einer synthetisierten Kontrollstimme funktioniert nicht: Zwei Sprecher unterscheiden sich mehr als die meisten Defekte, und beide falschen Antworten in der Bewertung hinter dieser Anleitung kamen genau daher.

Wenn es kein Original und keine verwertbare Stille gibt, ist ein statischer tonaler Defekt wirklich unterbestimmt. Sagen Sie das und bieten Sie die Messwerte an, die passen, anstatt einen auszuwählen und eine Kette darauf aufzubauen.

Befehle, Fallstricke und ausgearbeitete Rezepte: references/diagnosis.md. Lesen Sie es, bevor Sie eine Datei diagnostizieren, die niemand beschrieben hat.

Vom Symptom ausgehen

Sobald Sie das Band und die Art kennen, benennen Sie, was mit dem Audio falsch ist. Die meisten schlechten Audios sind eines oder zwei dieser Dinge, und jedes hat eine ausgelieferte Antwort:

Es klingt wieGreifen Sie zu
Brummen oder dumpfes Pochen darunterrumble-cut oder ein highpass bei 80 Hz
Dröhnend, brustigTame Boominess-Job (200 Hz)
Gedämpft, hinter PappeReduce Mud-Job (250 Hz)
Wörter schwer verständlichAdd Clarity-Job (3 kHz) oder Carven des Betts
Schrill und ermüdendSoften Harshness-Job (3,2 kHz)
Manche Wörter viel lauter als andereEvenness auf einem Kompressor oder Pegel ausgleichen
Raumton zwischen Sätzenroom-gate
Stimme und Musik im ClinchVoiceover-Carve – kein EQ auf einem von beiden
Trocken, nirgendwo aufgenommenroom-tight oder room-natural
Einfach „amateurhaft"voice-clean, das vier der obigen in Reihenfolge ist

Vollständiger Katalog, was jede Voreinstellung enthält, das Band-Vokabular und was bewusst NICHT abgedeckt ist (De-Essing, Rauschentfernung, Ton-Matching): references/presets.md.

Subtrahieren Sie, bevor Sie addieren, pegeln Sie nach dem Filtern, Beziehungen nach dem Pegel, Charakter und Begrenzung zuletzt. Jeder Schritt ändert, was der nächste hört – ein Kompressor, der vor einem Hochpass eingestellt wird, jagt dem Brummen hinterher.

Greifen Sie nach einer Familie nach dem Problem, nicht nach dem Namen

Filter (highpass, lowpass, peaking, lowshelf, highshelf) entscheiden, welche Frequenzen eine Spur belegen darf. Dies ist das erste Werkzeug für zwei kollidierende Quellen, weil Kollisionen in Bändern stattfinden: Ein Bett und eine Stimme wollen beide 1–3 kHz, und dies dem Bett zu nehmen, kostet das Bett weit weniger, als das Ganze herunterzudrehen den Mix kostet. Ein Hochpass auf einer Stimme ist die Standardlösung für Brummen; ein Tiefpass verdunkelt oder dämpft bewusst.

Dynamik (gain, compressor, limiter, gate) entscheidet, wie sich der Pegel einer Spur im Laufe der Zeit verhält. Kompression verringert den Abstand zwischen laut und leise, damit die leisen Teile angehoben werden können. Ein Limiter ist eine Begrenzung – er formt nichts, er stellt sicher, dass nichts darüber hinausgeht. Ein Gate entfernt alles unterhalb eines Schwellwerts, so wird der Raumton zwischen Phrasen zum Schweigen gebracht. gain ist eine einfache Pegelstufe, und sie wird von einer Automationsspur geritten, wenn eine Spur aus dem Weg gehen muss.

Nichtlinear (saturate, bitcrush) verändert die Wellenform und fügt Oberschwingungen hinzu, die nicht da waren. Greifen Sie danach, wenn eine Spur Charakter oder Körnung braucht, eher als Korrektur – und denken Sie daran: Es ist generativ, es macht eine dünne Quelle dichter, nicht sauberer.

Zeit (delay, reverb, chorus, phaser) setzt eine Spur in einen Raum oder gibt ihr Breite. Diese sind diejenigen, die am leichtesten einen Mix ruinieren, weil ein Ausklang oder eine verstimmte Kopie denselben Raum belegt, den eine Stimme braucht. Verwenden Sie sie auf dem Ding, das hinter etwas anderem sitzen soll, und halten Sie den Nassanteil niedriger, als es isoliert richtig klingt.

Die Kette ist seriell: Jeder Effekt verarbeitet, was der vorherige produziert hat. Gehen Sie also früh korrigierend filtern, Charakter in die Mitte und einen Limiter zuletzt, wo er tatsächlich als Begrenzung wirken kann.

Voiceover-Carve

Das Problem, das es löst. Ein Musikbett unter einer Stimme macht die Stimme schwer verständlich. Der Reflex ist, das gesamte Bett zu ducken, was funktioniert und dem Bett seine gesamte Präsenz kostet – die Musik wird für den gesamten Voiceover schlaff. Aber die Stimme braucht nicht das gesamte Spektrum. Sie braucht die wenigen Bänder, die sie tatsächlich belegt. Das Carve nimmt nur diese, und das Bett behält seine Tiefen und Höhen, sodass es immer noch Musik ist, während die Stimme verständlich bleibt.

Es ist eine Beziehung, kein Effekt. Die Einstellungen leben auf dem Bett – der Spur, die verarbeitet wird – und sie benennen die Stimmen, auf die gehört wird, genau wie ein Sidechain-Kompressor: Sie wählen die Spur, die leiser wird, und bestimmen, was sie leiser macht. Setzen Sie niemals ein Carve auf eine Voice-Spur. Eine gegen sich selbst gecarvte Stimme ist ein Fehler, keine subtile Mix-Entscheidung.

Jede Stimme, nicht nur eine. sources ist eine Liste, weil ein Bett normalerweise unter einer ganzen Sequenz läuft – einem Erzähler, einer Interviewantwort, einem zweiten Moderator. Sie werden auf der eigenen Uhr des Betts summiert, bevor etwas gemessen wird (mixCarveSources), sodass eine Analyse alle abdeckt: Die Bänder stammen von der gesamten vorhandenen Sprache, und die Hüllkurven steigen immer dann an, wenn etwas davon passiert. Stimmen, die nie abgespielt werden, während das Bett läuft, werden weggelassen; sie können es nicht maskieren.

Ein Drehknopf. strength ist 0..1 und leitet alles ab: wie tief zu schneiden, wie viele Bänder, wie breit, wie sehr die Verständlichkeit gegenüber der rohen Stimmenergie zu bevorzugen ist, wie weit der Pegel fallen darf, wie weit unter der Stimme zu zielen ist. Diese sechs bewegen sich in jedem echten Mix zusammen – ein sanftes Carve ist ein flacher Schnitt in wenigen Bändern mit wenig Ducking, ein hartes ist tiefer in mehr Bändern mit mehr – also sind sie eine Beziehung, die einmal in carveProfile geschrieben wird. Standard ist 0.25 – eine Absenkung um 6 dB in drei Bändern mit 6 dB Pegelreserve, hörbar, ohne wie ein Loch zu klingen. Bei 0.5 erreicht die Absenkung 10 dB, was der Punkt ist, an dem ein Carve eher als Effekt wahrgenommen wird denn als Raum für die Stimme; darüber liegt bewusstes Terrain für ein lautes Bett unter einer leisen Stimme. 0 ist nur spektral – ein Band, gar kein Pegelausgleich.

Standardmäßig Carven. Ein Bett, das unter einer Erzählung läuft, möchte ein Carve; es ist kein optionaler Verfeinerungsschritt, wenn Zeit ist. Platzieren Sie beide Spuren, führen Sie den folgenden Befehl aus, hören Sie zu. Überspringen Sie es nur, wenn es keine Erzählung gibt, unter der die Musik sitzen soll – ein Musikvideo, ein Titelbild, ein Zusammenschnitt zum Takt.

Es folgt immer der Stimme. Es gibt keinen statischen Modus: Eine feste Tiefe verdünnt das Bett durch jede Pause, und wenn Sie beide gehört haben, gibt es keinen Grund, sie zu wollen. Jeder Wert wird zu einer Hüllkurve des eigenen Pegels der Sprache – Stille lässt das Bett in Ruhe, eine laute Passage drückt das Carve auf volle Tiefe – geschrieben als gewöhnliche Automation, weshalb die Spuren in der Timeline erscheinen und anschließend bearbeitet werden können.

Pegelausgleich ist ein Teil davon. Spektrales Carven kann ein Bett, das einfach lauter als die Stimme ist, nicht reparieren. Also misst das Carve auch, wie weit das Bett über der Stimme liegt, und schreibt eine gain-Stufe: gehalten auf einem Wert für ein statisches Carve, gesteuert von einer Hüllkurve für ein dynamisches. Diese Hüllkurve klingt absichtlich langsam ab – Musik, die sofort nach einem Wort wieder auf voller Lautstärke ist, klingt wie eine Maschine.

Ausführen. Im Studio ist das Carve ein Modul oben im Effekt-Rack einer Spur – Stimme, Stärke, Dynamik und die erzeugte Analyse, in einer Karte. Es ist immer da, wenn eine andere Spur die Stimme sein könnte, und ein Bett mit genau einem Kandidaten darüber wird standardmäßig dynamisch mit der Standardstärke gecarved: Das ist, was ein Bett unter einer Erzählung will, und das Modul ist der Ort, an dem Sie es ändern oder ausschalten. Mehrere Kandidaten lassen die Auswahl warten, anstatt zu raten. Headless – der Pfad, wenn Sie eine Komposition erstellen und nicht bearbeiten:

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

Das ist der ganze Befehl. Es findet…

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

Verwandte Skills