Communitygithub.com

AntlersSam/saas-launch-video-kit

HyperFrames 구성에서 이미 오디오가 배치된 경우 페이드 인/아웃, 크로스페이드, 트랙 게인/볼륨, 볼륨 자동화, 덕킹, 보이스오버 반주 제거, 트랙 효과(EQ, 컴프레서, 리미터, 게이트, 새추레이션, 딜레이, 리버브, 코러스, 페이저, 비트크러시), 볼륨 또는 효과 파라미터 자동화 엔벨로프, 여러 트랙을 동시에 처리하는 서브믹스 버스(`<hf-audio-group>`)를 사용해야 할 때 사용합니다. BGM, SFX, 보이스오버 생성에는 사용하지 마세요.

saas-launch-video-kit란 무엇인가요?

HyperFrames Audio 스킬은 웹 브라우저 기반의 HyperFrames 시스템에서 오디오 믹싱, 효과 적용 및 자동화를 담당하는 전문 도구입니다. 이 스킬은 이미 배치된 오디오 트랙에 대해 페이드 인/아웃, 크로스페이드, 트랙 게인/볼륨 조정, 볼륨 및 효과 파라미터 자동화 엔벨로프, 덕킹(보이스오버 반주 제거), 그리고 EQ, 컴프레서, 리미터, 게이트, 새추레이션, 딜레이, 리버브, 코러스, 페이저, 비트크러시 등 10가지 이상의 효과 체인을 지원합니다. 주요 특징은 미리보기(Preview)와 최종 렌더링(Render)이 동일한 Web Audio 그래프를 사용하므로, 편집하면서 듣는 소리가 그대로 최종 결과물에 반영되어 두 번 튜닝할 필요가 없다는 점입니다. 또한 여러 트랙을 하나의 서브믹스 버스(`<hf-audio-group>`)로 묶어 체인, 페이더, 자동화 시계를 동시에 관리할 수 있어 복잡한 믹스 관계를 효율적으로 설정할 수 있습니다. 이 스킬은 오디오 소싱이나 생성(예: `/media-use`), 클립 타이밍이나 트랙 레이아웃(예: `/hyperframes-core`)과는 구분되며, 순수하게 배치된 오디오의 믹싱 관계와 효과 처리를 표현하는 데 특화되어 있습니다. 사용자는 오디오 요소의 `data-fx-chain`, `data-automation`, `data-fx-carve` 속성이나 `<hf-audio-group>` 버스를 통해 모든 믹싱 관계를 정의할 수 있으며, 음향학적 문제를 진단하는 참조 자료와 사전 설정된 프리셋을 활용하여 신속하게 문제를 해결할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AntlersSam/saas-launch-video-kit/tree/HEAD/skills/hyperframes-audio

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

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

문서

플러그인 설치: 설정 또는 초기화 명령을 실행하기 전에, 이 스킬이 HyperFrames 플러그인 내에 있을 경우 플러그인 실행 규칙을 따르십시오. 독립 실행형 설치는 아래 업데이트 지침을 유지합니다.

HyperFrames 오디오

믹스는 관계의 집합이지, 프로세서의 더미가 아닙니다. 각각 따로 듣기에는 완벽한 두 트랙이 함께 있을 때는 듣기 어려울 수 있으며, 해결책은 거의 "하나를 줄이는 것"이 아닙니다. — 그것이 무엇을 두고 싸우는지 찾아서 필요한 쪽에 주는 것입니다. 여기 있는 모든 도구는 그러한 관계 중 하나를 표현하기 위해 존재합니다.

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

클립 타이밍은 /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를 사용하십시오.

모든 것을 전달하는 세 가지 속성은 오디오/비디오 요소 자체에 있거나, 처음 두 개의 경우 <hf-audio-group> 버스에 있습니다(자세한 내용은 "많은 트랙을 위한 하나의 버스" 참조).

속성보유 내용
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/>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["engine · 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

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

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

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

하나의 알 수 없는 음성의 절대 스펙트럼은 진단할 수 없습니다. 포먼트는 ±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 (위의 네 가지를 순서대로 포함)

전체 카탈로그, 각 프리셋의 내용, 대역 용어 및 의도적으로 다루지 않는 내용(디에싱, 노이즈 제거, 톤 매치): references/presets.md.

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

이름이 아닌 문제로 제품군을 찾으십시오

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

다이나믹스 (gain, compressor, limiter, gate)는 시간에 따른 트랙 레벨의 동작을 결정합니다. 압축은 크고 작은 것 사이의 거리를 좁혀 조용한 부분이 올라올 수 있도록 합니다. 리미터는 천장입니다 — 아무것도 형성하지 않고 아무것도 통과하지 못하게 보장합니다. 게이트는 임계값 아래의 것을 제거하며, 이것이 문장 사이의 방음을 없애는 방법입니다. gain은 일반 레벨 스테이지이며, 트랙이 이동해야 할 때 자동화 레인이 타는 것입니다.

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

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

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

음성오버 카브

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

이펙트가 아닌 관계입니다. 설정은 처리되는 트랙인 _배경_에 있으며, 사이드체인 컴프레서가 하는 것처럼 들을 음성을 지정합니다: 더 작아지는 트랙을 선택하고 무엇이 더 작아지게 하는지 선택합니다. 절대 음성 트랙에 카브를 넣지 마십시오. 음성이 자기 자신에 대해 카브되는 것은 미묘한 믹스 선택이 아닌 버그입니다.

모든 음성, 하나만이 아닙니다. sources는 목록입니다. 배경은 일반적으로 전체 시퀀스 아래에서 실행되기 때문입니다. — 내레이터, 인터뷰 응답, 두 번째 발표자. 아무것도 측정되기 전에 배경의 자체 클록에 합산됩니다(mixCarveSources). 따라서 하나의 분석이 모두를 포함합니다: 대역은 모든 음성에서 나오고, 엔벨로프는 그 중 어느 것이 발생하는 곳에서 상승합니다. 배경과 함께 재생되지 않는 음성은 생략됩니다. 마스킹할 수 없습니다.

하나 이상의 클립 ID에 대한 카브는 잘못되었습니다. 클립을 그룹화하고 그룹에 대해 카브하십시오. 이것은 팁이 아니라 불변입니다. 클립을 하나씩 지정하는 것은 철저하게 정확해야 하며 다음 편집까지만 유지됩니다. — 나중에 추가된 네 번째 내레이션 클립은 카브의 인식 밖에서 재생되며 배경은 조용히 덕킹하지 않습니다. 대신 그룹을 지정하면 분석 시간에 멤버십이 해결되므로 나중에 그룹에 추가된 클립은 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>

두 개 이상의 일반 클립 ID를 그룹 대신 지정하는 sources 목록은 audio_carve_ungrouped_sources 린트 규칙에 의해 포착됩니다. — 여전히 작동하지만 클립이 추가될 때 조용히 썩는 버전입니다.

카브 그룹을 음성 그룹으로 유지하십시오: 배경 없음, SFX 없음, 음악 없음. sources의 그룹 ID는 각 분석의 현재 멤버로 해결되므로, 지정한 그룹은 나중에 얻는 그룹입니다. — 작성될 때 측정된 트랙이 아닙니다. 두 가지 방식으로 문제가 발생합니다:

  • 자체 소스 그룹의 배경. 음성으로 자신에게 전달되어 자체 콘텐츠에 대해 카브됩니다. — "트랙을 자기 자신에 대해 카브하지 않음" 규칙이 다음 재분석에 도착합니다.
  • 음성 그룹의 SFX 또는 음악 클립. 다음 분석에 사이드체인에 들어가고 배경은 웅웅거리는 소리 아래에서 덕킹을 시작합니다. 속성을 작성한 실행이 결코 측정하지 않았음에도 불구하고.

둘 다 카브가 작성되는 순간에는 보이지 않습니다: 분석은 감지된 음성을 합산하고 그룹 해결을 통해 왕복하지 않으므로 첫 번째 패스는 진정으로 정확하고 다음 패스만 잘못됩니다. 따라서 각 역할에 자체 그룹을 제공하십시오. — 배경에는 music, 내레이션에는 voiceover, 효과음에는 sfx — 그리고 sources에 지정된 그룹에 음성만 포함되도록 유지하십시오.

carve.mjs는 두 경우 중 하나를 볼 때 그룹 형식을 쓰기를 거부하고 클립 ID를 기록하며 다음과 같이 말합니다.

…

Individual skills in this repo

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

AntlersSam/saas-launch-video-kit

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.

AntlersSam/saas-launch-video-kit

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.

AntlersSam/saas-launch-video-kit

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, timeline, history, clean, 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.

AntlersSam/saas-launch-video-kit

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. Read before writing composition HTML.

관련 스킬