Communitygithub.com

HyperFrames Áudio

Gerencia cadeias de efeitos de áudio, automação e carving de voiceover em composições HyperFrames, garantindo que a mixagem final corresponda exatamente à prévia durante a edição.

O que é HyperFrames Áudio?

HyperFrames Áudio é uma skill para agentes de IA que trabalham com composições HyperFrames, focada em mixagem de áudio baseada em relacionamentos entre faixas, não em processamento empilhado. Ela define como efeitos de áudio (ganho, EQ, compressor, reverb, etc.) são aplicados a elementos via atributos `data-fx-chain`, `data-automation` e `data-fx-carve`. A skill garante que a prévia durante a edição e a renderização final usem exatamente a mesma implementação de grafo de áudio Web Audio — nunca é necessário ajustar duas vezes. Suporta automação de volume e parâmetros, crossfades, ducking e carving de voiceover, onde o leito da música é esculpido espectralmente para abrir espaço para a voz, com envelopes dinâmicos que seguem o nível da fala. É útil para desenvolvedores e editores que precisam de um sistema previsível e sem surpresas na renderização, funcionando tanto em estúdio interativo quanto em renderização headless. A skill documenta comandos CLI, referências de parâmetros e uma tabela de sintomas para diagnóstico de áudio, permitindo que o agente escolha a correção certa sem ouvir o arquivo — medindo espectros, comparando com pausas na mesma faixa e aplicando presets ou receitas de edição.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que HyperFrames Áudio faz?

Uma mixagem é um conjunto de relacionamentos, não uma pilha de processadores. Duas faixas que soam bem isoladamente podem ser insuportáveis juntas, e a correção quase nunca é "abaixar uma" — é descobrir pelo que elas estão competindo e dar aquilo para quem precisa. Cada ferramenta aqui existe para expressar um desses relacionamentos.

Os efeitos residem no elemento como data-fx-chain, e a prévia e a renderização executam o mesmo grafo de Web Audio — o estúdio em um contexto ao vivo, o motor em um contexto offline dentro do navegador que ele já controla. Há uma única implementação de cada efeito, então o que você ouve enquanto arrasta é o que será gravado. Você nunca ajusta duas vezes.

O tempo do clipe permanece em /hyperframes-core: cortes de áudio/vídeo e intervalos de origem usam data-start, data-duration e data-media-start, e crossfades sobrepõem clipes em faixas diferentes. Esta skill é responsável por fade-in/fade-out de faixas posicionadas, envelopes de crossfade, ganho/volume de faixa, automação de volume e efeitos, ducking/carve de voiceover e a cadeia de efeitos. /media-use é responsável pela obtenção, geração e pré-processamento.

A constante data-playback-rate (0.1..5) é segura para renderização de imagem e som com preservação de tom quando elementos de áudio/vídeo correspondentes usam a mesma sincronização, deslocamento de origem e taxa. Rampas de velocidade de origem não são suportadas porque não há envelope de taxa; pré-processe um ativo sincronizado derivado. HyperFrames não fornece sincronização automática de forma de onda ou correção de deriva. Para receitas copiáveis de corte/crossfade/retempo, use /hyperframes-core → references/creator-editing-recipes.md.

Três atributos carregam tudo, todos no próprio elemento de áudio/vídeo:

AtributoContém
data-fx-chainos efeitos, na ordem do sinal
data-automationenvelopes no volume desta faixa ou em seus parâmetros de efeito
data-fx-carveas configurações do carve, para que ele possa ser rederivado

As famílias de efeitos fornecidas são ganho, EQ (passa-alta, passa-baixa, pico, prateleiras), compressor, limitador, gate, saturação, delay, reverb, chorus, phaser e bitcrush.

JSON exato para cada um e as regras que uma faixa deve satisfazer: references/attributes.md. Cada efeito com seus parâmetros, intervalos e unidades: references/fx-registry.md. Como descobrir o que há de errado com um arquivo que você não pode ouvir: references/diagnosis.md. Presets, trabalhos nomeados e perfis de um botão, além de uma tabela de sintoma-para-correção: references/presets.md — leia isso antes de construir uma cadeia manualmente, porque um dos presets ou trabalhos nomeados geralmente já nomeia o problema.

Como tudo se encaixa

Duas superfícies de autoria escrevem esses atributos; dois executores os leem através dos mesmos construtores. Esse meio compartilhado é o motivo pelo qual a prévia prevê a renderização.

flowchart TB
  voice["faixa de voz<br/>arquivo de mídia"]
  bed["leito musical<br/>arquivo de mídia"]

  subgraph AUTHOR["Autoria — as únicas coisas que escrevem atributos"]
    panel["Studio<br/>Controle de carve de voiceover"]
    script["scripts/carve.mjs<br/>detecta o par, dinâmico por padrão"]
    analysis["core/audioCarve.ts<br/>carveProfile · analyseCarveBands<br/>analyseCarveDuck · analyseCarveDynamics"]
    panel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATTRS["Escritos no elemento do leito"]
    carveAttr["data-fx-carve<br/>source · strength · dynamic"]
    chainAttr["data-fx-chain<br/>peaking xN + gain, marcado fromCarve"]
    autoAttr["data-automation<br/>uma faixa por parâmetro esculpido"]
  end

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

  subgraph SHARED["Uma implementação, lida por ambos"]
    build["audioFxGraph.ts · buildFxChain"]
    sched["audioFxAutomation.ts · scheduleChainAutomation"]
  end

  chainAttr --> build
  autoAttr --> sched

  build --> preview["Prévia<br/>AudioContext ao vivo<br/>attachElementFxChain"]
  sched --> preview
  build --> render["Renderização<br/>OfflineAudioContext no navegador headless<br/>applyAudioFxChain"]
  sched --> render

  preview --> heard["o que você ouve enquanto arrasta"]
  render --> wav["WAV processado<br/>+ chainTailSeconds para que a mixagem deixe a cauda passar"]
  wav --> mix["motor · audioMixer<br/>faixa de volume incorporada no PCM aqui, não no grafo"]
  mix --> out["a mixagem renderizada"]

  edit["editar o atributo durante a reprodução"] -.->|MutationObserver| preview

As configurações do carve nunca são lidas durante a reprodução — a cadeia e as faixas que ele produziu são o que toca. data-fx-carve existe para que a força possa ser alterada em um carve existente, em vez de ser adivinhada de volta a partir dos filtros.

Dentro de um leite esculpido, o sinal passa primeiro pelos cortes, depois pela correspondência de nível, depois por qualquer coisa que você mesmo construiu — é por isso que um limitador que você adiciona ainda atua como o teto final:

flowchart LR
  src["leito decodificado"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["gain<br/>correspondência de nível"]
  g --> hand["seus próprios efeitos<br/>ex.: limitador"]
  hand --> dest["ganho da faixa, depois saída"]

  l1["faixa fx.n1.gain"] -.->|"envelope do nível<br/>da voz naquela banda"| p1
  l4["faixa fx.n4.gain"] -.->|"o quanto o leito<br/>abaixa no geral"| g

Um carve estático é o mesmo grafo com valores fixos e nenhuma faixa.

Primeiro, descubra o que está errado

A tabela abaixo começa com "soa encorpado" — o que pressupõe que alguém já ouviu e disse isso. Com um arquivo e "conserta isso", você não tem essa frase e não pode ouvir, então você tem que medir. Uma regra governa tudo:

O espectro absoluto de uma única voz desconhecida não pode ser diagnosticado. Formantes são ±10 dB, fundamentais variam de 85 a 255 Hz, e as frases declinam 5–6 dB à medida que terminam. Cada um desses soa como um defeito por si só, e cada um deles é o falante.

Portanto, compare, e compare com algo dentro do mesmo arquivo: o original limpo, se existir, caso contrário, as pausas — tudo o que é audível em um silêncio é aditivo, e o espectro do silêncio é o canal, não a voz. Comparar com um espectro médio publicado ou uma voz de controle sintetizada não funciona: dois falantes diferem mais do que a maioria dos defeitos, e ambas as respostas erradas na avaliação por trás desta orientação vieram exatamente disso.

Quando não há original e nenhum silêncio utilizável, um defeito tonal estático é genuinamente subdeterminado. Diga isso e ofereça as leituras que se encaixam, em vez de escolher uma e construir uma cadeia nela.

Comandos, armadilhas e receitas testadas: references/diagnosis.md. Leia antes de diagnosticar um arquivo que ninguém descreveu.

Comece pelo sintoma

Depois de identificar a banda e o tipo, nomeie o que está errado com o áudio. A maioria dos áudios ruins é um ou dois destes, e cada um tem uma resposta fornecida:

Soa comoUse
Zumbido ou batida abaixorumble-cut, ou um highpass a 80 Hz
Encorpado, peitoralTame Boominess job (200 Hz)
Abafado, atrás de papelãoReduce Mud job (250 Hz)
Palavras difíceis de entenderAdd Clarity job (3 kHz), ou esculpa o leito
Áspero e cansativoSoften Harshness job (3.2 kHz)
Algumas palavras muito mais altasEvenness em um compressor, ou Even Out Levels
Tom de sala entre frasesroom-gate
Voz e música competindoVoiceover carve — não um EQ em nenhum deles
Seco, gravado em lugar nenhumroom-tight ou room-natural
Apenas "amador"voice-clean, que é quatro dos acima em ordem

Catálogo completo, o que cada preset contém, o vocabulário de bandas e o que é deliberadamente NÃO coberto (de-essing, remoção de ruído, correspondência de tom): references/presets.md.

Subtraia antes de adicionar, nivele depois de filtrar, relacionamentos depois do nível, caráter e teto por último. Cada etapa muda o que a próxima ouve — um compressor configurado antes de um passa-alta gasta seu tempo perseguindo o zumbido.

Use uma família pelo problema, não pelo nome

Filtros (highpass, lowpass, peaking, lowshelf, highshelf) decidem quais frequências uma faixa pode ocupar. Esta é a primeira ferramenta para duas fontes colidindo, porque as colisões acontecem em bandas: um leito e uma voz ambos querem 1–3 kHz, e tirar isso do leito custa muito menos ao leito do que girar a coisa toda para baixo custa à mixagem. Um passa-alta em uma voz é a correção padrão para zumbido; um passa-baixa escurece ou abafa deliberadamente.

Dinâmicas (gain, compressor, limiter, gate) decidem como o nível de uma faixa se comporta ao longo do tempo. A compressão reduz a distância entre alto e baixo para que as partes baixas possam subir. Um limitador é um teto — ele não molda nada, ele garante que nada ultrapasse. Um gate remove o que está abaixo de um limite, que é como você silencia o tom de sala entre frases. gain é um estágio de nível simples, e é o que uma faixa de automação monta quando uma faixa precisa sair do caminho.

Não lineares (saturate, bitcrush) mudam a forma de onda, o que adiciona harmônicos que não estavam lá. Use-os quando uma faixa precisa de caráter ou aspereza em vez de correção — e lembre-se de que é generativo: torna uma fonte fina mais densa, não mais limpa.

Tempo (delay, reverb, chorus, phaser) coloca uma faixa em um espaço ou dá largura a ela. Estes são os que mais facilmente estragam uma mixagem, porque uma cauda ou uma cópia desafinada ocupa o mesmo espaço que uma voz precisa. Use-os na coisa que deve ficar atrás de outra coisa, e mantenha a quantidade de efeito molhado mais baixa do que soa bem isoladamente.

A cadeia é serial: cada efeito processa o que o anterior produziu. Portanto, filtragem corretiva vai no início, caráter no meio, e um limitador no final, onde ele pode realmente atuar como um teto.

Voiceover carve

O problema que resolve. Um leito musical sob uma voz torna a voz difícil de seguir. O reflexo é abaixar todo o leito, o que funciona e custa ao leito toda a sua presença — a música fica mole para todo o voiceover. Mas a voz não precisa de todo o espectro. Ela precisa das poucas bandas que realmente ocupa. O carve pega apenas essas, e o leito mantém suas frequências baixas e seu topo, então ele ainda é música enquanto a voz ainda é inteligível.

É um relacionamento, não um efeito. As configurações ficam no leito — a faixa que é processada — e elas nomeiam as vozes a serem ouvidas, exatamente como um compressor sidechain faz: você seleciona a faixa que fica mais baixa e escolhe o que a deixa mais baixa. Nunca coloque um carve em uma faixa de voz. Uma voz esculpida contra si mesma é um bug, não uma escolha sutil de mixagem.

Cada voz, não apenas uma. sources é uma lista, porque um leito geralmente roda sob uma sequência inteira — um narrador, uma resposta de entrevista, um segundo apresentador. Eles são somados no próprio relógio do leito antes que qualquer coisa seja medida (mixCarveSources), então uma análise cobre todos eles: as bandas vêm de toda a fala existente, e os envelopes sobem onde quer que qualquer uma delas esteja acontecendo. Vozes que nunca tocam enquanto o leito toca são deixadas de fora; elas não podem mascarar o leito.

Um botão. strength é 0..1 e deriva tudo: quão profundo cortar, quantas bandas, quão largas, o quanto favorecer a inteligibilidade sobre a energia bruta da voz, o quanto o nível pode cair, o quanto abaixo da voz mirar. Esses seis se movem juntos em qualquer mixagem real — um carve suave é um corte superficial em poucas bandas com pouco ducking, um forte é mais profundo em mais bandas com mais — então eles são um relacionamento escrito uma vez, em carveProfile. O padrão é 0.25 — uma queda de 6 dB em três bandas com 6 dB de espaço de nível, audível sem soar como um buraco. Em 0.5 a queda atinge 10 dB, que é onde um carve começa a ser ouvido como um efeito em vez de como espaço para a voz; acima disso é território deliberado para um leito alto sob uma voz baixa. 0 é apenas espectral — uma banda, sem correspondência de nível.

Carve por padrão. Um leito tocando sob narração quer um carve; não é uma etapa de polimento para chegar se houver tempo. Coloque ambas as faixas, execute o comando abaixo, ouça. Pule apenas quando não houver narração para a música se sentar sob — um videoclipe, um cartão de título, um corte de montagem para a faixa.

Ele sempre segue a voz. Não há modo estático: uma profundidade fixa empobrece o leito em cada pausa, e depois de ouvir ambos não há razão para querê-lo. Cada valor se torna um envelope do próprio nível da fala — o silêncio deixa o leito em paz, uma passagem alta empurra o carve para a profundidade máxima — escrito como automação comum, que é o motivo pelo qual as faixas aparecem na linha do tempo e podem ser editadas depois.

A correspondência de nível faz parte disso. O carve espectral não pode consertar um leito que é simplesmente mais alto que a voz. Portanto, o carve também mede o quanto o leito está acima da voz e escreve um estágio gain: mantido em um valor para um carve estático, conduzido por um envelope para um dinâmico. Esse envelope libera lentamente de propósito — música que volta ao máximo no instante em que uma palavra termina soa como uma máquina fazendo isso.

Executando. No Studio, o carve é um módulo no topo do rack de efeitos de uma faixa — voz, força, dinâmico e a análise que produziu, em um cartão. Ele está lá sempre que outra faixa pode ser a voz, e um leito com exatamente um candidato acima dele é esculpido por padrão, dinamicamente, na força padrão: isso é o que um leito sob narração quer, e o módulo é onde você muda ou desliga. Vários candidatos deixam o seletor esperando em vez de adivinhar. Headless — que é o caminho quando você está criando uma composição em vez de editando uma:

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

Esse é o comando inteiro. Ele encontra

...

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

Habilidades Relacionadas