Communitygithub.com

hyperframes-audio

HyperFrames Audio는 Web Audio API를 기반으로 한 오디오 믹스 및 이펙트 체인 도구로, 오디오 트랙 간의 관계(보이스오버 카빙, 동적 덕킹, 필터 체인 등)를 표현합니다. 프리뷰와 렌더링이 동일한 그래프를 공유하여 조정이 필요 없습니다.

hyperframes-audio란 무엇인가요?

HyperFrames Audio는 오디오 믹싱을 '스택된 프로세서'가 아닌 '트랙 간의 관계'로 바라보는 접근법을 제공합니다. 각 오디오/비디오 요소에 `data-fx-chain`, `data-automation`, `data-fx-carve` 세 가지 속성을 부여하여 이펙트 체인, 볼륨 및 이펙트 파라미터 자동화, 보이스오버 카빙(voiceover carve)을 정의합니다. 프리뷰와 렌더링은 동일한 Web Audio 그래프를 사용하므로, 편집 중 들리는 소리가 그대로 최종 결과물에 반영되어 두 번 조정할 필요가 없습니다. 지원하는 이펙트는 게인, EQ(하이패스, 로우패스, 피킹, 쉘프), 컴프레서, 리미터, 게이트, 새추레이트, 딜레이, 리버브, 코러스, 페이저, 비트크러시 등입니다. 보이스오버 카빙은 음성 트랙이 사용하는 주파수 대역만을 선택적으로 줄여 음악 베드의 존재감을 유지하면서 음성을 또렷하게 만듭니다. 이 도구는 스튜디오 UI와 헤드리스 스크립트(`carve.mjs`) 모두를 지원하며, 사전 설정과 진단 가이드를 통해 일반적인 오디오 문제(움, 먹먹함, 선명도 부족 등)를 빠르게 해결할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/hyperframes-audio

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

HyperFrames Audio

믹스는 프로세서의 스택이 아니라 관계의 집합입니다. 각각 따로 들을 때는 괜찮지만 함께 들을 수 없는 두 트랙이 있을 때, 해결책은 거의 '하나를 줄이는 것'이 아니라 두 트랙이 무엇을 놓고 싸우는지 찾아서 필요한 쪽에 전달하는 것입니다. 여기의 모든 도구는 그러한 관계 중 하나를 표현하기 위해 존재합니다.

이펙트는 data-fx-chain 속성으로 요소에 존재하며, 프리뷰와 렌더링은 동일한 Web Audio 그래프를 실행합니다. 즉, 라이브 컨텍스트의 스튜디오와 이미 구동 중인 브라우저 내부의 오프라인 엔진이 동일합니다. 각 이펙트의 구현은 하나뿐이므로, 스크러빙 중에 듣는 소리가 그대로 기록되는 소리입니다. 두 번 조정할 필요가 없습니다.

클립 타이밍은 /hyperframes-core에 속합니다. 오디오/비디오 트림과 소스 범위는 data-start, data-duration, data-media-start를 사용하며, 크로스페이드는 다른 트랙의 클립을 겹칩니다. 이 스킬은 배치된 트랙의 페이드 인/아웃, 크로스페이드 엔벨로프, 트랙 게인/트랙 볼륨, 볼륨 및 이펙트 자동화, 덕킹/보이스오버 카빙, 그리고 이펙트 체인을 담당합니다. /media-use는 소싱, 생성, 전처리를 담당합니다.

상수 data-playback-rate (0.1..5)는 오디오/비디오 요소가 동일한 타이밍, 소스 오프셋, 속도를 사용할 때 픽처와 피치 보존 사운드에 대해 렌더링 안전합니다. 속도 램프는 지원되지 않습니다(속도 엔벨로프가 없음). 파생된 동기화 자산을 전처리하십시오. HyperFrames는 자동 파형 동기화 또는 드리프트 보정을 제공하지 않습니다. 복사 가능한 컷/크로스페이드/리타임 레시피는 /hyperframes-core → references/creator-editing-recipes.md를 사용하십시오.

세 가지 속성이 모든 것을 전달하며, 모두 오디오/비디오 요소 자체에 있습니다:

속성보유 내용
data-fx-chain신호 순서대로 이펙트
data-automation이 트랙의 볼륨 또는 해당 이펙트 파라미터에 대한 엔벨로프
data-fx-carve카브 자체 설정 (재파생 가능하도록)

제공되는 이펙트 제품군은 게인, EQ(하이패스, 로우패스, 피킹, 쉘프), 컴프레서, 리미터, 게이트, 새추레이트, 딜레이, 리버브, 코러스, 페이저, 비트크러시입니다.

각각의 정확한 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/>소스 · 강도 · 동적"]
    chainAttr["data-fx-chain<br/>피킹 xN + 게인, 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는 기존 카브의 강도를 필터에서 추측하지 않고 변경할 수 있도록 존재합니다.

카브된 베드 내부에서 신호는 먼저 딥(dip)을 통과한 다음 레벨 매치, 그 다음 직접 구축한 모든 것을 통과합니다. 이것이 추가한 리미터가 여전히 마지막 천장 역할을 하는 이유입니다:

flowchart LR
  src["디코딩된 베드"] --> p1["피킹<br/>400 Hz"]
  p1 --> p2["피킹<br/>1 kHz"]
  p2 --> p3["피킹<br/>1.6 kHz"]
  p3 --> g["게인<br/>레벨 매치"]
  g --> hand["자체 이펙트<br/>(예: 리미터)"]
  hand --> dest["트랙 게인, 이후 출력"]

  l1["레인 fx.n1.gain"] -.->|"해당 대역에서<br/>보이스 레벨의 엔벨로프"| p1
  l4["레인 fx.n4.gain"] -.->|"베드가 전체적으로<br/>덕킹되는 정도"| g

정적 카브는 고정 값과 레인이 전혀 없는 동일한 그래프입니다.

먼저, 무엇이 잘못되었는지 파악하십시오

아래 표는 "소리가 웅웅거린다"에서 시작합니다. 이는 이미 누군가 듣고 그렇게 말했다고 가정합니다. "이걸 고쳐"라는 파일을 받았지만 그런 문장이 없고 들을 수도 없다면, 측정해야 합니다. 하나의 규칙이 모든 것을 지배합니다:

알 수 없는 단일 음성의 절대 스펙트럼은 진단할 수 없습니다. 포먼트는 ±10dB이고, 기본 주파수는 85–255Hz이며, 문장은 끝날 때 5–6dB 감소합니다. 이 모든 것이 각각 결함으로 읽히지만, 모두 화자의 특성입니다.

따라서 비교하고, 같은 파일 내부의 무언가와 비교하십시오: 가능하면 깨끗한 원본, 그렇지 않으면 일시 정지 — 간격에서 들리는 것은 추가적인 것이며, 간격의 스펙트럼은 음성이 아닌 채널입니다. 게시된 평균 스펙트럼이나 합성된 제어 음성과 비교하는 것은 작동하지 않습니다: 두 화자는 대부분의 결함보다 더 많이 다르며, 이 지침 뒤의 평가에서 두 가지 잘못된 답변 모두 정확히 그 이유에서 비롯되었습니다.

원본도 사용 가능한 침묵도 없을 때, 정적인 음색 결함은 진정으로 불충분하게 결정됩니다. 그렇게 말하고 적합한 판독값을 제공하되, 하나를 선택하고 그 위에 체인을 구축하지 마십시오.

명령, 함정 및 작업 레시피: references/diagnosis.md. 아무도 설명하지 않은 파일을 진단하기 전에 읽으십시오.

증상부터 시작하십시오

일단 대역과 종류를 알았다면, 오디오의 문제가 무엇인지 이름을 붙이십시오. 대부분의 나쁜 오디오는 이 중 하나 또는 두 개이며, 각각에 대해 제공된 답변이 있습니다:

들리는 소리사용할 도구
아래에 웅 or 쿵쿵거리는 소리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
음성과 음악이 충돌보이스오버 카브 — 둘 중 하나에 EQ를 걸지 마십시오
건조하고, 어디에도 녹음되지 않은 듯room-tight 또는 room-natural
그냥 "아마추어" 같은voice-clean (위의 네 가지를 순서대로 조합)

전체 카탈로그, 각 사전 설정의 내용, 대역 용어 및 의도적으로 포함되지 않은 것(디에싱, 노이즈 제거, 톤 매치): references/presets.md.

더하기 전에 빼고, 필터링 후에 레벨을 조정하고, 레벨 후에 관계를 설정하고, 캐릭터와 천장을 마지막에 설정하십시오. 각 단계는 다음 단계가 듣는 것을 변경합니다. 하이패스 전에 설정된 컴프레서는 럼블을 쫓느라 시간을 낭비합니다.

문제 이름이 아닌 문제 유형으로 패밀리에 접근하십시오

필터(highpass, lowpass, peaking, lowshelf, highshelf)는 트랙이 점유할 수 있는 주파수를 결정합니다. 두 소스가 충돌할 때 첫 번째 도구입니다. 충돌은 대역에서 발생하기 때문입니다. 베드와 음성 모두 1-3kHz를 원하며, 베드에서 그것을 빼는 것은 전체를 줄이는 것보다 베드에 훨씬 적은 비용이 듭니다. 음성의 하이패스는 럼블에 대한 표준 수정입니다. 로우패스는 의도적으로 어둡게 하거나 머플러 효과를 줍니다.

다이나믹스(gain, compressor, limiter, gate)는 시간이 지남에 따라 트랙의 레벨이 어떻게 동작하는지 결정합니다. 압축은 큰 소리와 작은 소리 사이의 거리를 좁혀 작은 부분이 올라올 수 있도록 합니다. 리미터는 천장입니다. 아무것도 형성하지 않고 아무것도 지나가지 못하게 보장합니다. 게이트는 임계값 아래의 것을 제거하며, 이것이 구절 사이의 룸 톤을 제거하는 방법입니다. gain은 일반 레벨 단계이며, 트랙이 비켜서야 할 때 자동화 레인이 타는 곳입니다.

비선형(saturate, bitcrush)은 파형의 모양을 변경하여 원래 없었던 고조파를 추가합니다. 트랙에 보정보다는 특성이나 거칠기가 필요할 때 사용하십시오. 그리고 생성적임을 기억하십시오: 얇은 소스를 더 조밀하게 만들지 더 깨끗하게 만들지 않습니다.

시간 기반(delay, reverb, chorus, phaser)은 트랙을 공간에 배치하거나 너비를 제공합니다. 이것들이 믹스를 가장 쉽게 망칠 수 있는 것들입니다. 테일이나 디튠된 복사본이 음성이 필요한 동일한 공간을 차지하기 때문입니다. 다른 것 뒤에 있어야 하는 것에 사용하고, 웨트 양을 단독으로 들을 때 괜찮게 들리는 것보다 낮게 유지하십시오.

체인은 직렬입니다. 각 이펙트는 이전 이펙트가 생성한 것을 처리합니다. 따라서 교정 필터링은 초기에, 캐릭터는 중간에, 리미터는 마지막에 실제로 천장 역할을 할 수 있도록 배치하십시오.

보이스오버 카브

해결하는 문제. 음성 아래의 음악 베드는 음성을 따라가기 어렵게 만듭니다. 본능은 전체 베드를 덕킹하는 것이며, 이는 작동하지만 베드의 모든 존재감을 희생합니다. 음악은 전체 보이스오버 동안 축 늘어집니다. 그러나 음성은 전체 스펙트럼이 필요하지 않습니다. 실제로 점유하는 몇 개의 대역만 필요합니다. 카브는 그 대역만 가져오고 베드는 저음과 고음을 유지하므로, 음성이 여전히 명료한 동안에도 음악은 여전히 음악입니다.

이펙트가 아니라 관계입니다. 설정은 처리되는 트랙인 _베드_에 있으며, 청취할 음성의 이름을 지정합니다. 정확히 사이드체인 컴프레서처럼: 더 조용해지는 트랙을 선택하고 더 조용하게 만드는 것을 선택합니다. 절대로 음성 트랙에 카브를 넣지 마십시오. 자체에 대해 카브된 음성은 미묘한 믹스 선택이 아니라 버그입니다.

하나가 아닌 모든 음성. sources는 목록입니다. 베드는 일반적으로 전체 시퀀스(내레이터, 인터뷰 답변, 두 번째 발표자) 아래에서 실행되기 때문입니다. 그것들은 측정 전에 베드 자체의 클록에 합산되므로(mixCarveSources), 하나의 분석이 모두를 다룹니다: 대역은 존재하는 모든 음성에서 비롯되며, 엔벨로프는 어느 음성이든 활동이 있는 곳에서 상승합니다. 베드가 재생되는 동안 재생되지 않는 음성은 제외됩니다. 베드를 마스킹할 수 없습니다.

하나의 손잡이. strength는 0..1이며 모든 것을 파생시킵니다: 얼마나 깊이 자를지, 몇 개의 대역, 얼마나 넓게, 명료성 대 원시 음성 에너지를 얼마나 선호할지, 레벨이 얼마나 떨어질 수 있는지, 음성 아래를 얼마나 목표로 할지. 이 여섯 가지는 실제 믹스에서 함께 움직입니다. 부드러운 카브는 덕킹이 거의 없는 적은 대역의 얕은 컷이고, 하드 카브는 더 많은 덕킹을 가진 더 많은 대역의 더 깊은 컷입니다. 따라서 carveProfile에 한 번 작성된 하나의 관계입니다. 기본값은 0.25입니다. 3개의 대역에서 6dB 딥, 6dB의 레벨 여유, 구멍처럼 들리지 않으면서 들을 수 있습니다. 0.5에서 딥은 10dB에 도달하며, 이는 카브가 음성을 위한 공간보다는 이펙트로 인식되기 시작하는 지점입니다. 그 위는 조용한 음성 아래 시끄러운 베드를 위한 의도적인 영역입니다. 0은 스펙트럼 전용입니다: 하나의 대역, 레벨 매치 전혀 없음.

기본적으로 카브. 내레이션 아래 재생되는 베드는 카브를 원합니다. 시간이 있으면 가는 폴리쉬 단계가 아닙니다. 두 트랙을 배치하고 아래 명령을 실행하고 듣으십시오. 음악이 아래에 앉을 내레이션이 없는 경우(뮤직 비디오, 타이틀 카드, 트랙에 맞춘 몽타주 컷)에만 건너뛰십시오.

항상 음성을 따릅니다. 정적 모드는 없습니다. 고정된 깊이는 모든 일시 정지를 통해 베드를 얇게 만들며, 둘 다 들어본 후에는 원할 이유가 없습니다. 모든 값은 음성 자체 레벨의 엔벨로프가 됩니다. 침묵은 베드를 그대로 두고, 큰 구절은 카브를 전체 깊이로 밀어냅니다. 이것은 일반 자동화로 기록되며, 이것이 레인이 타임라인에 나타나고 나중에 편집될 수 있는 이유입니다.

레벨 매칭도 포함됩니다. 스펙트럼 카빙은 단순히 음성보다 더 큰 베드를 고칠 수 없습니다. 따라서 카브는 또한 베드가 음성 위에 얼마나 있는지 측정하고 gain 단계를 작성합니다. 정적 카브의 경우 하나의 값으로 유지되고, 동적 카브의 경우 엔벨로프에 의해 구동됩니다. 그 엔벨로프는 의도적으로 천천히 해제됩니다. 단어가 끝나는 즉시 음악이 전체로 다시 튀는 것은 기계처럼 들리기 때문입니다.

실행. 스튜디오에서 카브는 트랙의 이펙트 랙 상단에 있는 하나의 모듈입니다(음성, 강도, 동적, 생성된 분석). 다른 트랙이 음성이 될 수 있을 때마다 있으며, 위에 정확히 하나의 후보가 있는 베드는 기본적으로 동적으로 기본 강도로 카브됩니다. 이것이 내레이션 아래 베드가 원하는 것이며, 모듈은 변경하거나 끄는 곳입니다. 여러 후보가 있으면 추측보다 선택기를 기다리게 합니다. 헤드리스(컴포지션을 편집하지 않고 작성할 때의 경로):

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

그게 전부입니다. 다음을 찾습니다...

[번역을 위해 잘림]

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

관련 스킬