Communitygithub.com

AlessandroFare/fluxychat

오디오가 이미 HyperFrames 컴포지션에 배치된 상태에서 믹싱이 필요할 때 사용합니다: 배경 음악과 보이스오버가 충돌하는 경우(보이스오버 자르기), 트랙에 효과 적용(EQ, 컴프레서, 리미터, 게이트, 새츄레이션, 딜레이, 리버브, 코러스, 페이저, 비트크러시), 또는 트랙 볼륨이나 효과 파라미터에 그려진 오토메이션 엔벨로프를 다룹니다. 오디오 소싱이나 생성(BGM, SFX 찾기, 보이스오버 제작)에는 사용하지 마세요. 해당 작업은 `/media-use`입니다. 클립 타이밍이나 트랙 레이아웃에는 사용하지 마세요. 해당 작업은 `/hyperframes-core`입니다.

fluxychat란 무엇인가요?

HyperFrames Audio는 HyperFrames 컴포지션 내에서 오디오 믹싱을 위한 포괄적인 AI 어시스턴트 스킬입니다. 이 스킬은 오디오 파일이 이미 배치된 상태에서 믹싱 관계를 설정하는 데 초점을 맞춥니다. 보이스오버 아래에서 배경 음악을 지능적으로 자르는 '보이스오버 자르기(voiceover carve)' 기능, 다양한 오디오 효과(EQ, 컴프레서, 리미터 등)를 트랙에 적용하는 기능, 그리고 트랙 볼륨이나 효과 파라미터에 오토메이션 엔벨로프를 그리는 기능을 제공합니다. 효과는 `data-fx-chain` 속성에 저장되며, 미리보기와 렌더링은 동일한 Web Audio 그래프를 사용하여 '한 번 튜닝' 원칙을 보장합니다. 이 스킬은 증상 기반 접근 방식을 통해 문제를 진단하고 해결합니다. '웅웅거림', '먹먹함', '뭉개짐'과 같은 일반적인 오디오 문제에 대해 사전 정의된 프리셋과 작업을 제공합니다. 특히, 음악과 음성이 충돌하는 상황을 해결하기 위해 스펙트럼 분석과 동적 엔벨로프를 결합한 관계 기반 믹싱 도구인 보이스오버 자르기를 강조합니다. 이 스킬은 `data-fx-chain`, `data-automation`, `data-fx-carve`의 세 가지 속성을 통해 모든 설정을 전달하며, 오디오 요소에 직접 JSON 형식으로 저장됩니다. HyperFrames Studio와 헤드리스 스크립트 환경을 모두 지원하므로, 사용자가 컴포지션을 편집하거나 스크립트 기반 워크플로우를 통해 자동화할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlessandroFare/fluxychat/tree/HEAD/agent/skills/hyperframes-audio

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

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

문서

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/>소스 · 강도 · 동적"]
    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는 기존 자르기에서 강도를 변경할 수 있도록 존재하며, 필터에서 다시 추측할 필요가 없습니다.

조각된 배경 음악 내부에서 신호는 먼저 딥을 통과한 다음 레벨 매치를, 그런 다음 직접 구축한 모든 것을 통과합니다. — 이것이 추가하는 리미터가 여전히 마지막 천장 역할을 하는 이유입니다:

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

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

먼저, 무엇이 문제인지 파악하십시오

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

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

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

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

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

증상부터 시작하십시오

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

소리가 다음과 같다면다음을 사용하십시오
아래에 윙윙거리거나 쿵쿵거리는 소리rumble-cut, 또는 80 Hz에서 highpass
웅웅거리거나, 가슴에서 나는 듯한웅웅거림 길들이기 작업 (200 Hz)
먹먹함, 판지 뒤에 있는 듯먹먹함 줄이기 작업 (250 Hz)
말을 알아듣기 어려움명료도 추가 작업 (3 kHz), 또는 배경 음악 자르기
거칠고 피곤함거칠음 부드럽게 작업 (3.2 kHz)
어떤 단어가 다른 단어보다 훨씬 큼컴프레서의 균일함, 또는 레벨 균일화
문장 사이에 방 톤room-gate
보이스와 음악이 충돌함보이스오버 자르기 — 둘 중 하나에 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). 따라서 하나의 분석이 모두를 다룹니다: 대역은 존재하는 모든 음성에서 오고, 엔벨로프는 그 중 어떤 것이든 발생하는 곳에서 올라갑니다. 배경 음악이 재생되는 동안 재생되지 않는 보이스는 제외됩니다. 배경 음악을 마스킹할 수 없습니다.

하나의 노브. 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 (이름이 music처럼 보임)
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으로 해당 보고서를 보고 아무것도 쓰지 않습니다.

트랙을 선택하는 방법. 먼저 이름, 이미 알려준 것이고 답을 설명할 수 있기 때문입니다 — core의 classifyAudioName, 스튜디오 자체 선택기와 동일한 분류기이므로 둘이 동의하지 않을 수 없습니다. ID나 파일 이름이 music처럼 보이는 트랙(music, bgm, bed, score…)은 배경 음악입니다. 그 위에서 재생되고 SFX 형태가 아닌 다른 모든 것은 보이스입니다. 오디오 요소가 선호됩니다: 비디오는 오디오 트랙이 보이스로 남아 있지 않거나 컴포지션의 모든 B-roll 클립이 말하는 사람으로 읽힐 때만 계산됩니다. 하나의 후보가 없을 때는 거부합니다. 명시적 --bed / --voice도 항상 작동합니다.

잘못될 수 있는 것. 보이스가 없는 배경 음악을 자르면 아무 일도 일어나지 않아야 하지만 엔벨로프는 보이스가 재생되지 않을 때 고정됩니다. 배경 음악 아래에 있는 보이스 트랙은 자르기를 받지 않습니다 — 해당 설정을 무시하는 data-fx-carve를 가질 수 있으며, 포함할 수 있습니다. 여러 오디오 트랙은 mixCarveSources에 의해 합산되므로 분석하기 전에 하나의 모노로 혼합됩니다. 스튜디오는 타임라인 업데이트(autoplayEffects)에 다시 분석하므로 strength 슬라이더를 드래그하면 라이브로 업데이트됩니다.

자르기가 아닌 경우. 보이스와 배경 음악이 동시에 재생되지 않거나, 배경 음악이 전혀 없거나, 배경 음악이 보이스 아래에서 실행되지 않는 모든 것(몽타주, 타이틀 카드, 전체 믹스) — 이것은 사용하지 마십시오.cripts/carve.mjs에 의해 작성되지 않은 기존 data-fx-carve는 스튜디오에서 수동으로 편집할 수 있지만 명령줄은 하나의 작업을 수행합니다.

상호 작용. 배경 음악이 이미 조각된 후에 추가하는 모든 것은 자르기 체인 이후에 신호 체인의 끝에 추가됩니다 — 추가 필터는 레벨 매치를 방해하지 않습니다. 자르기 자체를 편집하는 것은 분석을 다시 실행하고 전체 체인과 오토메이션 레인을 다시 씁니다. 손으로 그린 오토메이션이나 직접 추가된 이펙트는 손실되지 않습니다. 일반적인 문제: 스튜디오는 autoplayEffects가 켜져 있을 때 자르기 강도에 대한 다시 분석을 트리거하지만 타임라인을 스크러빙하거나 재생 헤드를 움직이면 트리거되지 않습니다 — 직접 "분석"을 클릭하거나 명령줄을 다시 실행하십시오.

모든 이펙트와 파라미터

정확한 파라미터 이름, 범위, 기본값 및 단위: references/fx-registry.md.

진단 워크플로우

들리지 않는 파일을 진단하기 위한 명령, 함정 및 작업 레시피: references/diagnosis.md.

프리셋 목록

전체 프리셋 카탈로그, 각각이 포함하는 것, 대역 어휘: references/presets.md.

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.

관련 스킬