Communitygithub.com

heygen-com/hyperframes

HyperFrames Audioは、Web Audioグラフを使用してエフェクトチェーン、オートメーション、およびボイスオーバーカーブを処理するスキルで、プレビューとレンダリングが一致するように設計されています。

hyperframes とは?

HyperFrames Audioスキルは、HyperFramesプラットフォーム内で高度なオーディオ処理を提供します。このスキルの核となる考え方は、ミックスとは単なるプロセッサの積み重ねではなく、トラック間の関係性を表現することです。エフェクトは`data-fx-chain`属性にJSON形式で定義され、Web Audio APIを使用してプレビュー(リアルタイム)とレンダリング(オフライン)の両方で同一の実装が実行されるため、編集時に聞こえる音がそのまま出力結果になります。このスキルは、トラックゲイン、フェードイン/アウト、クロスフェード、ボリュームおよびエフェクトパラメータのオートメーション、ダッキング/ボイスオーバーカーブ、そしてイコライザー、コンプレッサー、リミッター、リバーブ、ディレイなどのエフェクトチェーンを担当します。`data-fx-carve`属性はカーブ設定を保持し、`data-automation`はパラメータのエンベロープを定義します。これらの属性は、スタジオパネルまたは`scripts/carve.mjs`のいずれかによって書き込まれ、`audioFxGraph.ts`と`audioFxAutomation.ts`という共有ビルダーによって読み取られます。この設計により、プレビューがレンダリング結果を正確に予測できるため、チューニングを二度行う必要がありません。また、`data-fx-carve`はカーブの強度を後から変更できるように保持されており、フィルターから逆算する必要はありません。このスキルはヘッドレスブラウザで動作し、`OfflineAudioContext`を使用してレンダリングを行い、最終的なミックスは`audioMixer`によってバスにまとめられます。

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

プラグインのインストール: セットアップまたはフレッシュネスコマンドの前に、このスキルが HyperFrames プラグイン内にある場合は、プラグイン実行ルール に従ってください。スタンドアロンインストールの場合は、以下の更新手順を維持します。

HyperFrames Audio

ミックスとは、プロセッサの積み重ねではなく、関係性の集合です。単体では正しく聞こえる2つのトラックも、一緒にすると聞けなくなることがあります。その修正方法は、ほとんどの場合「どちらかを下げる」ことではなく、何が競合しているのかを見つけ、それを必要としている方に与えることです。ここにあるすべてのツールは、そうした関係性の1つを表現するために存在します。

エフェクトは要素の data-fx-chain に配置され、プレビューとレンダリングは同じ Web Audio グラフを実行します。つまり、スタジオはライブコンテキストで、エンジンはブラウザがすでに駆動するオフラインコンテキストで動作します。各エフェクトの実装は1つなので、スクラブ中に聞こえるものが書き出されるものと一致します。2度調整する必要はありません。

クリップのタイミングは /hyperframes-core に依存します。オーディオ/ビデオのトリムとソース範囲には data-start、data-duration、data-media-start を使用し、クロスフェードは異なるトラックのクリップをオーバーラップさせます。このスキルは、配置されたトラックのフェードイン/フェードアウト、クロスフェードエンベロープ、トラックゲイン/トラックボリューム、ボリュームとエフェクトのオートメーション、ダッキング/ボイスオーバーカーブ、およびエフェクトチェーンを担当します。/media-use はソーシング、生成、プリプロセッシングを担当します。

定数 data-playback-rate (0.1..10) は、同じタイミング、ソースオフセット、レートを使用するオーディオ/ビデオ要素が一致する場合、ピクチャとピッチ保持サウンドのレンダリングで安全に使用できます。スピードランプは data-automation 内の rate レーンです (docs/reference/speed-ramps 参照)。これは定数よりも優先され、プレビューとレンダリングの両方でピッチを保持します。HyperFrames は自動的な波形同期やドリフト補正を提供しません。 コピー可能なカット/クロスフェード/リタイムレシピについては、/hyperframes-core → references/creator-editing-recipes.md を参照してください。

3つの属性がすべてを保持します。オーディオ/ビデオ要素自体に、または最初の2つについては hf-audio-group> バスに (「複数トラックのための1つのバス」を参照してください)。

属性保持するもの
data-fx-chainエフェクト、信号順
data-automationこのトラックのボリュームまたはそのエフェクトパラメータのエンベロープ
data-fx-carveカーブ自体の設定、再導出可能にするため

出荷されているエフェクトファミリーは、ゲイン、EQ (ハイパス、ローパス、ピーキング、シェルビング)、コンプレッサー、リミッター、ゲート、サチュレート、ディレイ、リバーブ、コーラス、フェイザー、ビットクラッシュです。

それぞれの正確なJSONと、レーンが満たすべきルール: references/attributes.md。 パラメータ、範囲、単位を含むすべてのエフェクト: references/fx-registry.md。 聞こえないファイルの問題を解決する方法: references/diagnosis.md。 プリセット、名前付きジョブ、ワンノブプロファイル、および症状から修正へのテーブル: references/presets.md — チェーンを手動で構築する前にこれを読んでください。プリセットや名前付きジョブのいずれかが通常すでに問題を特定しているからです。

どのように連携するか

2つのオーサリングサーフェスがこれらの属性を書き込み、2つのランタイムが同じビルダーを介してそれらを読み取ります。この共有された中間部分が、プレビューがレンダリングを予測できる理由です。

flowchart TB
  voice["ボーカルトラック<br/>メディアファイル"]
  bed["音楽トラック<br/>メディアファイル"]

  subgraph AUTHOR["オーサリング — 属性を書き込む唯一のもの"]
    panel["スタジオ<br/>ボイスオーバーカーブコントロール"]
    script["scripts/carve.mjs<br/>ペアを検出、デフォルトは動的"]
    analysis["core/audioCarve.ts<br/>carveProfile · analyseCarveBands<br/>analyseCarveDuck · analyseCarveDynamics"]
    panel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATTRS["ベッド要素に書き込まれる"]
    carveAttr["data-fx-carve<br/>source · strength · dynamic"]
    chainAttr["data-fx-chain<br/>peaking xN + gain, tagged fromCarve"]
    autoAttr["data-automation<br/>カーブされたパラメータごとに1つのレーン"]
  end

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

  subgraph SHARED["1つの実装、両方で読み取られる"]
    build["audioFxGraph.ts · buildFxChain"]
    sched["audioFxAutomation.ts · scheduleChainAutomation"]
  end

  chainAttr --> build
  autoAttr --> sched

  build --> preview["プレビュー<br/>ライブAudioContext<br/>attachElementFxChain"]
  sched --> preview
  build --> render["レンダリング<br/>ヘッドレスブラウザのOfflineAudioContext<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["スクラブ中に聞こえるもの"]
  render --> wav["処理済みWAV<br/>+ chainTailSeconds でミックスがテールを通過させる"]
  wav --> mix["エンジン · audioMixer<br/>ボリュームレーンはここでPCMに焼き付けられ、グラフでは行われない"]
  mix --> out["レンダリングされたミックス"]

  edit["再生中に属性を編集"] -.->|MutationObserver| preview

カーブ自体の設定は再生時に読み取られることはありません。それが生成したチェーンとレーンが再生されます。data-fx-carve は、既存のカーブで強度を変更できるように存在し、フィルターから逆算する必要はありません。

カーブされたベッド内では、信号は最初にディップを通過し、次にレベルマッチ、次にあなた自身が構築したものを通過します。これが、追加したリミッターが依然として最後の天井として機能する理由です:

flowchart LR
  src["デコードされたベッド"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["gain<br/>レベルマッチ"]
  g --> hand["独自のエフェクト<br/>例 リミッター"]
  hand --> dest["トラックゲイン、その後出力"]

  l1["lane fx.n1.gain"] -.->|"そのバンドでの<br/>ボーカルのレベルのエンベロープ"| p1
  l4["lane fx.n4.gain"] -.->|"ベッドが全体的に<br/>ダッキングする程度"| g

静的カーブは、固定値でレーンのない同じグラフです。

最初に、何が問題かを特定する

以下の表は「ブーミーに聞こえる」から始まります。これは、誰かがすでに聞いてそう言ったことを前提としています。ファイルと「これを修正して」と渡された場合、あなたにはそのような文はなく、聞くこともできないため、測定する必要があります。すべてを支配する1つのルールがあります:

単一の未知のボーカルの絶対スペクトルは診断できません。 フォルマントは±10 dB、基本周波数は85~255 Hz、文は終わりに向かって5~6 dB低下します。これらのすべてが単独では欠陥として読み取られ、それらのすべてが話者によるものです。

したがって、比較します。そして、同じファイル内の何か、つまり元のクリーンなもの(存在する場合)、またはポーズ(ギャップで聞こえるものは追加的なものであり、ギャップのスペクトルはボーカルではなくチャンネルです)と比較します。公開された平均スペクトルや合成された制御ボイスと比較しても機能しません。2人の話者はほとんどの欠陥よりも大きく異なり、このガイダンスの背後にある評価での両方の誤った回答は、まさにそれから生じました。

元のものも使用可能な無音もない場合、静的な音程欠陥は真に未決定です。それを伝え、1つを選んでチェーンを構築するのではなく、適合する読み取り値を提供します。

コマンド、トラップ、実践的なレシピ: references/diagnosis.md。誰も説明していないファイルを診断する前に読んでください。

症状から始める

バンドと種類がわかったら、オーディオの何が問題かを特定します。ほとんどの悪いオーディオはこれらのうち1つまたは2つであり、それぞれに出荷済みの回答があります:

こんな風に聞こえる場合これを使う
ハムやドスンという低音が下にあるrumble-cut、または80 Hzの highpass
ブーミー、胸に響くTame Boominess ジョブ (200 Hz)
こもった、段ボールの後ろのようReduce Mud ジョブ (250 Hz)
言葉が聞き取りにくいAdd Clarity ジョブ (3 kHz)、またはベッドをカーブ
耳障りで疲れるSoften Harshness ジョブ (3.2 kHz)
一部の単語が他の単語よりはるかに大きいコンプレッサーの Evenness、または Even Out Levels
文と文の間に部屋の響きroom-gate
ボーカルと音楽が競合するVoiceover carve — どちらかにEQをかけるのではない
ドライで、どこにも録音されていないようroom-tight または room-natural
単に「アマチュアっぽい」voice-clean (上記の4つを順に組み合わせたもの)

完全なカタログ、各プリセットの内容、バンドの語彙、意図的にカバーされていないもの(デエッシング、ノイズ除去、トーンマッチ): references/presets.md。

追加する前に減算し、フィルターの後にレベルを調整し、レベルの後に関係性を設定し、キャラクターと天井を最後にします。各ステップは、次のステップが聞くものを変更します。ハイパスの前に設定されたコンプレッサーは、ランブルを追いかけるのに時間を費やします。

名前ではなく問題によってファミリーを選ぶ

フィルター (highpass、lowpass、peaking、lowshelf、highshelf) は、トラックが占有できる周波数を決定します。これは2つのソースが衝突する場合の最初のツールです。衝突はバンドで発生します。ベッドとボーカルは両方とも1~3 kHzを望み、ベッドからそれを奪うことは、全体を下げるよりもミックスに対するコストがはるかに少なくなります。ボーカルに対するハイパスはランブルの標準的な修正です。ローパスは意図的に暗くしたりこもらせたりします。

ダイナミクス (gain、compressor、limiter、gate) は、トラックのレベルが時間とともにどのように動作するかを決定します。圧縮は大きい音と小さい音の間隔を狭め、小さい音を持ち上げられるようにします。リミッターは天井です。何も整形せず、何も通過させないことを保証します。ゲートはしきい値以下のものを除去します。これが、フレーズ間の部屋の響きを消す方法です。gain は単純なレベルステージであり、トラックが邪魔にならないように移動する必要がある場合にオートメーションレーンが乗るものです。

非線形 (saturate、bitcrush) は波形の形状を変更し、そこになかった倍音を追加します。トラックに補正ではなくキャラクターやザラツキが必要な場合に使用します。そして、それが生成的であることを覚えておいてください。薄いソースをより密度の高いものにし、クリーンにはしません。

時間ベース (delay、reverb、chorus、phaser) はトラックを空間に配置したり、幅を与えたりします。これらはミックスを最も簡単に台無しにするものです。テールやデチューンされたコピーは、ボーカルが必要とする同じ部屋を占有するからです。何か他のものの_後ろ_に配置すべきものに使用し、ウェット量は単独で正しく聞こえるよりも低く保ちます。

チェーンは直列です。各エフェクトは、前のエフェクトが生成したものを処理します。したがって、補正フィルタリングは早い段階で、キャラクターは中間、リミッターは最後に配置し、実際に天井として機能できるようにします。

ボイスオーバーカーブ

解決する問題。 ボーカルの下の音楽ベッドは、ボーカルを聞き取りにくくします。反射的な対応はベッド全体をダッキングすることですが、それは機能しますが、ベッドの存在感をすべて犠牲にします。音楽はボイスオーバー全体にわたって弱々しくなります。しかし、ボーカルはスペクトル全体を必要とするわけではありません。実際に占有する数少ないバンドだけが必要です。カーブはそれらのバンドだけを取り除き、ベッドは低域と高域を維持するため、ボーカルが明瞭なままでも音楽として機能します。

エフェクトではなく関係性です。 設定は_ベッド_(処理されるトラック)に配置され、聞くべきボーカルを指定します。これはサイドチェインコンプレッサーとまったく同じです。小さくなるトラックを選択し、それを小さくするものを選択します。ボーカルトラックにカーブを決して配置しないでください。 ボーカルをそれ自体に対してカーブすることは、微妙なミックスの選択ではなくバグです。

すべてのボーカルに対して、そのうちの1つだけではありません。 sources はリストです。なぜなら、ベッドは通常、シーケンス全体(ナレーター、インタビューの回答、2人目のプレゼンター)の下で実行されるからです。これらは、何かが測定される前にベッド自身のクロックにミックスされます (mixCarveSources)。したがって、1つの分析ですべてをカバーします。バンドはそこにあるすべてのスピーチから得られ、エンベロープはそのいずれかが発生している場所で上昇します。ベッドが再生されている間決して再生されないボーカルは除外されます。これらはベッドをマスクできません。

複数のクリップIDに対するカーブは誤りです。クリップをグループ化し、グループに対してカーブします。 これはヒントではなく不変条件です。クリップを1つずつ指定することは、完全に正しい必要があり、次の編集までしか正しくありません。後で追加された4番目のナレーションクリップは、カーブの認識範囲外で再生され、ベッドは静かにその下でダッキングできません。代わりにグループを指定すると、分析時にメンバーシップが解決されるため、後でクリップがグループに追加されても、sources に触れることなくカバーされます:

<!-- ナレーションをグループ化し、ベッドをグループに対してカーブする -->
<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>

グループではなく2つ以上のプレーンなクリップIDを指定する sources リストは、audio_carve_ungrouped_sources リントルールに引っかかります。それでも機能しますが、クリップが追加されると静かに壊れるバージョンです。

カーブグループをボーカルグループに保ちます。ベッド、SFX、音楽は含めないでください。 sources のグループIDは、_すべて_の分析で_現在の_すべてのメンバーに解決されるため、指定するグループは、後で取得するグループです。これは、書き込まれたときに測定されたトラックではありません。これが問題を引き起こす2つの方法:

  • ベッドが自身のソースグループにある場合。 それはそれ自身にボーカルとして渡され、自身のコンテンツに対してカーブされます。これは、「トラックをそれ自体に対してカーブしない」ルールが、再分析の1回後に発生するものです。
  • SFXまたは音楽クリップがボーカルグループにある場合。 次の分析でサイドチェインに入り、ベッドは「ウーッ」という音の下でダッキングを開始します。属性を書き込んだ実行ではそれが測定されなかったにもかかわらずです。

どちらもカーブが書き込まれた時点では見えません。分析は検出したボーカルを合計し、グループ解決を往復しないため、最初のパスは本当に正しく、次のパスだけが誤りです。したがって、各役割に独自のグループを与えてください。music をベッドに、voiceover をナレーションに、sfx を効果音に。そして、sources で指定するグループにはボーカルだけが含まれるようにしてください。

carve.mjs は、これらのいずれかのケースを確認すると、グループ形式の書き込みを拒否し、クリップIDを記録し、次のように表示します:

…

[翻訳のため省略]

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]

関連スキル