Communitygithub.com

AlessandroFare/fluxychat

當 HyperFrames 合成中的音訊需要混音時使用:處理音樂背景與旁白的衝突(旁白雕琢)、音軌上的效果(EQ、壓縮器、限制器、閘門、飽和、延遲、殘響、合唱、移相、位元深降),或在音軌音量或任何效果參數上繪製自動化封包。請勿用於生成或擷取音訊 — 尋找 BGM、SFX 或製作旁白請使用 `/media-use`。請勿用於剪輯時序或音軌佈局,請使用 `/hyperframes-core`。

fluxychat 是什麼?

HyperFrames Audio 是一個專為 HyperFrames 組合中的音訊混音設計的 AI 助手技能。它專注於處理音軌間的關係,而非簡單的處理器堆疊:例如音樂背景與旁白之間的頻率衝突(旁白雕琢)、對音軌套用效果(EQ、壓縮器、限制器、閘門、飽和、延遲、殘響、合唱、移相、位元深降),以及在音軌音量或任何效果參數上繪製自動化封包。此技能支援 Studio 和無頭(headless)兩種操作模式,確保預覽與渲染使用相同的 Web Audio 圖形,實現所聽即所得。它提供全面的診斷、預設和處方,幫助使用者從問題症狀出發,而非效果名稱,並遵循「先減後加、濾波後調整音量、關係處理後再調整動態、最後處理音色與上限」的信號鏈順序。該技能明確不處理音訊生成或擷取,也不涉及剪輯時序或音軌佈局,這些功能由其他專門技能負責。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/agent/skills/hyperframes-audio

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

HyperFrames Audio 音訊混音

混音是一組關係的集合,而非處理器的堆疊。兩條各自聽起來不錯的音軌放在一起可能變得難以入耳,而解決方法幾乎從來不是「調低其中一條」 — 而是找出它們在爭奪什麼,並將其交給更需要的那一條。這裡的每一個工具都是為了表達這些關係之一而存在。

效果以 data-fx-chain 的形式存在於元素上,預覽和渲染使用同一個 Web Audio 圖形 — 即時環境中的工作室,瀏覽器內離線環境中的引擎。每一種效果都只有一種實作,因此你在拖動時間軸時聽到的,就是最終寫入的結果。你永遠不需要調整兩次。

所有屬性都由三個屬性承載,位於音訊/視訊元素本身:

屬性包含內容
data-fx-chain效果鏈,依訊號順序排列
data-automation此音軌音量或其效果參數的封包
data-fx-carve雕琢本身的設定,以便可以重新推導

每個屬性的確切 JSON 格式,以及音軌必須滿足的規則:references/attributes.md。 每個效果及其參數、範圍和單位:references/fx-registry.md。 如何診斷你無法聽到的檔案問題:references/diagnosis.md。 預設、命名任務和單旋鈕設定檔,以及症狀對應解決方案表:references/presets.md — 在自行建立效果鏈之前請先閱讀,因為其中一個預設或命名任務通常已經指出了問題。

如何運作

兩個創作介面負責寫入這些屬性;兩個執行階段透過相同的建構器讀取它們。這個共享的中間層正是預覽可以預測渲染結果的原因。

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,標記為 fromCarve"]
    autoAttr["data-automation<br/>每個雕琢參數一條通道"]
  end

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

  subgraph SHARED["單一實作,由兩者讀取"]
    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["通道 fx.n1.gain"] -.->|"該頻段中旁白<br/>音量的封包"| p1
  l4["通道 fx.n4.gain"] -.->|"音樂背景整體<br/>閃避的程度"| g

靜態雕琢則是具有固定值且完全沒有通道的相同圖形。

首先,找出問題所在

下表從「聽起來很轟」開始 — 這假設已經有人聽過並如此描述。如果給你一個檔案並要求「修好它」,你沒有這樣的描述,也無法聆聽,所以你必須進行測量。一個規則適用於所有情況:

單一未知人聲的絕對頻譜無法被診斷。 共振峰在 ±10 dB,基頻範圍為 85–255 Hz,句子結尾會衰減 5–6 dB。 這些獨立來看都像是缺陷,但它們都是說話者的特徵。

因此,進行比較,並與同一個檔案內的內容進行比較:如果存在,使用乾淨的原始音訊;否則使用停頓處 — 間隙中可聽見的內容都是額外添加的,而間隙的頻譜是通道而不是人聲。與公佈的平均頻譜或合成的對照人聲進行比較是無效的:兩位說話者之間的差異大於大多數缺陷,本指南評估中的兩個錯誤答案正是來自這種方法。

當沒有原始音訊也沒有可用的靜音時,靜態的音色缺陷確實是無法確定的。請說明這一點,並提供符合的讀數,而不是選擇一個並在上面建立效果鏈。

命令、陷阱和實際操作食譜:references/diagnosis.md。在診斷一個無人描述過的檔案之前,請先閱讀。

從症狀開始

一旦你知道了頻段和類型,指出音訊的問題所在。大多數糟糕的音訊屬於以下一到兩種情況,每種都有現成的解決方案:

聽起來像是使用
底層有嗡嗡聲或低頻噪音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,這是上述四種的組合

完整目錄、每個預設包含的內容、頻段詞彙以及故意不涵蓋的內容(de-essing、噪音去除、音色匹配):references/presets.md。

先減後加,濾波後調整音量,關係處理後再調整動態,最後處理音色與上限。每個步驟都會改變下一步聽到的內容 — 在高通濾波器之前設定的壓縮器會將其時間花費在追逐低頻噪音上。

根據問題選擇工具家族,而非名稱

濾波器(highpass、lowpass、peaking、lowshelf、highshelf)決定一條音軌被允許佔據哪些頻率。這是兩個音源衝突時的首選工具,因為衝突發生在頻段中:音樂背景和人聲都想要 1–3 kHz,從音樂背景中移除這個頻段對音樂背景的損害遠小於調低整個音軌對混音的損害。對人聲使用高通濾波器是處理低頻噪音的標準方法;低通濾波器則會故意讓聲音變暗或模糊。

動態處理器(gain、compressor、limiter、gate)決定一條音軌的音量隨時間變化的方式。壓縮器縮小大聲和小聲之間的差距,以便小聲的部分可以提升。限制器是一個上限 — 它不會塑造任何東西,只是保證沒有任何東西超過它。閘門移除低於閾值的內容,這就是你如何靜音句子之間的房間聲。gain 是一個單純的音量級,當一條音軌需要讓路時,自動化通道會騎乘它。

非線性處理器(saturate、bitcrush)改變波形的形狀,添加原本不存在的諧波。當一條音軌需要特色或顆粒感而不是修正時使用它 — 請記住它是生成性的:它使薄的音源變得更密,而不是更乾淨。

時間效果器(delay、reverb、chorus、phaser)將一條音軌置於一個空間中或賦予其寬度。這些是最容易破壞混音的效果,因為一個尾部或一個失諧的複製版本會佔據人聲需要的相同空間。將它們用於應該坐在其他東西後面的東西上,並保持濕聲量低於在獨立聽時聽起來正確的程度。

效果鏈是串聯的:每個效果處理前一個效果產生的內容。因此,校正性濾波器放在前面,特色效果放在中間,限制器放在最後,它才能真正起到上限的作用。

旁白雕琢

它解決的問題。 人聲下的音樂背景會使人聲難以理解。直覺反應是將整個音樂背景閃避,這有效,但代價是音樂背景失去了所有的存在感 — 音樂在整個旁白過程中變得軟弱無力。但人聲並不需要整個頻譜。它只需要它實際佔據的少數頻段。雕琢只移除這些頻段,音樂背景保留其低頻和高頻,因此當人聲仍然清晰可辨時,音樂仍然是音樂。

它是一種關係,而非一種效果。 設定位於被處理的音軌 — 音樂背景上 — 並且它們指定要收聽的人聲,就像側鏈壓縮器一樣:你選擇變小聲的音軌並選擇讓它變小聲的東西。切勿在人聲音軌上放置雕琢。 人聲對抗自身的雕琢是一個錯誤,而不是一個微妙的混音選擇。

每一道人聲,而不是其中之一。 sources 是一個列表,因為音樂背景通常會貫穿整個序列 — 一位旁白、一段訪談回答、第二位主持人。它們在音樂背景自己的時鐘上被求和後再進行測量(mixCarveSources),因此一次分析涵蓋了所有內容:頻段來自所有存在的語音,封包在任何語音發生的地方上升。從未在音樂背景播放時出現的人聲則被排除在外;它們無法遮蔽它。

一個旋鈕。 strength 是 0..1,並推導出所有內容:切割深度、頻段數量、寬度、偏向可理解度而非原始人聲能量的程度、音量可以下降的程度、低於人聲的目標程度。這六個因素在任何真實混音中都會一起變化 — 溫和的雕琢是在少數頻段中進行淺切割,並帶有少量的閃避;強烈的雕琢是在更多頻段中進行更深度的切割,並帶有更多的閃避 — 因此它們被寫成一個關係,在 carveProfile 中。預設值為 0.25 — 三個頻段中 6 dB 的衰減,具有 6 dB 的音量空間,可聞但聽起來不像一個洞。在 0.5 時,衰減達到 10 dB,這是雕琢開始被聽起來像是一種效果而不是為人聲騰出空間的點;高於此值則是有意為之的範圍,適用於大聲音樂背景下的小聲人聲。0 僅為頻譜方式 — 一個頻段,完全沒有音量匹配。

預設進行雕琢。 在旁白下方播放的音樂背景需要雕琢;這不是一個有時間才做的修飾步驟。放置兩個音軌,運行下面的命令,聽聽看。只有在音樂背景下方沒有旁白時才跳過它 — 例如音樂影片、片頭卡、配合音樂的蒙太奇剪輯。

它總是跟隨人聲。 沒有靜態模式:固定的深度會在每一個停頓處削弱音樂背景,一旦你聽過兩者,就沒有理由想要靜態模式。每個值都變成了語音自身音量的封包 — 寂靜時讓音樂背景獨處,大聲段落將雕琢推至最大深度 — 寫成普通的自動化,這就是為什麼通道會顯示在時間軸上並且可以在之後編輯。

音量匹配是其一部分。 頻譜雕琢無法修復一個比人聲還大聲的音樂背景。因此,雕琢還會測量音樂背景超過人聲多少,並寫入一個 gain 級:對於靜態雕琢保持在一個值,對於動態雕琢則由封包驅動。該封包故意緩慢釋放 — 在一個詞結束的瞬間就彈回滿音量的音樂背景聽起來像是機器在操作。

運行它。 在工作室中,雕琢是音軌效果架頂部的一個模組 — 人聲、強度、動態以及它產生的分析,都在一個卡片中。每當另一條音軌可能是人聲時,它就會出現,而一條恰好有一個候選者在它之上的音樂背景會預設進行雕琢,動態進行,使用預設強度:這就是旁白下方的音樂背景想要的,而模組就是你更改或關閉它的地方。多個候選者則會讓選擇器等待而不是猜測。無頭模式 — 這是你創作而不是編輯組合時的路徑:

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

這就是完整的命令。它自行找到人聲和音樂背景,以預設強度動態雕琢,並輸出其決定的內容:

bed    music-bed (名稱看起來像音樂)
voice  narration (唯一剩下的音軌)
carve  strength 0.25 dynamic
bands  400Hz -6dB q1.4, 1000Hz -3dB q1.4, 1600Hz -3.17dB q1.4
level  216-point envelope, floor -6 dB

當自動選擇錯誤時,使用 --bed / --voice(可重複)指定音軌名稱,使用 --strength 加強效果,使用 --dry-run 查看報告而不寫入任何內容。

它如何選擇音軌。 首先根據名稱,因為這是你已經告訴它的,而且答案是可解釋的 — 使用核心中的 classifyAudioName,與工作室自己的選擇器使用的分類器相同,因此兩者不會不一致。一個 id 或檔案名看起來像音樂(music、bgm、bed、score…)的音軌是音樂背景;其他所有在它之上播放且不是 SFX 形狀的音軌都是人聲。音訊元素優先:只有當沒有音軌可以作為人聲時,或者每一個 B-roll 剪輯都會被解讀為有人在說話時,才會計算視訊。當它無法確定時會拒絕運行。

…

[原文截斷]

Individual skills in this repo

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

AlessandroFare/fluxychat

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.\n

AlessandroFare/fluxychat

Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.\n

AlessandroFare/fluxychat

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).

AlessandroFare/fluxychat

Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.\n

AlessandroFare/fluxychat

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint #13 (captions overlay, keep-out band retired) from the product-launch-video scene agent. Applies ON TOP of embedded-captions.

AlessandroFare/fluxychat

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

AlessandroFare/fluxychat

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

AlessandroFare/fluxychat

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated motion-first unit, including an animated title. Route fresh creation through hyperframes before using this skill.

AlessandroFare/fluxychat

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's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

AlessandroFare/fluxychat

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.

AlessandroFare/fluxychat

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`.

AlessandroFare/fluxychat

Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.

AlessandroFare/fluxychat

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]

AlessandroFare/fluxychat

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

AlessandroFare/fluxychat

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.

AlessandroFare/fluxychat

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

AlessandroFare/fluxychat

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR topic explainer (/faceless-explainer). Unclear → /hyperframes.

AlessandroFare/fluxychat

Design and improve user interfaces using the concrete rules from Refactoring UI (Wathan & Schoger) — constrained spacing/type/color/shadow scales, visual hierarchy through weight and color rather than size, and depth through emulated light. Use when building or styling any UI (web, app, dashboard, landing page, component), when picking font sizes, spacing, colors, shadows or border radius, when designing a color palette or design tokens, and whenever someone says a UI "looks off", "looks amateur", "feels cluttered/plain/unfinished", or asks to "make this look better".

AlessandroFare/fluxychat

Port an existing Remotion (React) composition''s source to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate/translate a Remotion source — one-way, Remotion-only. A passing Remotion mention, reference-only code, or "make something like my Remotion video" is a fresh build (/general-video). Unclear → /hyperframes.

AlessandroFare/fluxychat

Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

相關技能