Communitygithub.com

hyperframes-audio

Gerencia e processa áudio no HyperFrames: ducking, cadeias de efeitos, automação e mixagem baseada em relacionamentos entre faixas.

O que é hyperframes-audio?

Este skill gerencia todos os aspectos de áudio dentro do ecossistema HyperFrames, implementando uma filosofia de mixagem baseada em relacionamentos, não em pilhas de processadores isolados. Ele opera através de atributos HTML como `data-fx-chain` para a cadeia de efeitos, `data-automation` para envelopes de volume/parâmetros e `data-fx-carve` para ducking inteligente (voiceover carve). A implementação é compartilhada entre preview e render: o mesmo grafo Web Audio é executado em tempo real (live AudioContext) e offline (OfflineAudioContext), garantindo que o que você ouve durante a edição seja exatamente o que será renderizado. O skill suporta efeitos como equalizadores, compressores, limitadores, reverb, delay, saturação, chorus, phaser e bitcrush, além de automação por faixa e ducking com análise espectral do sinal de voz. A diagnose de problemas de áudio é orientada por medições comparativas dentro do mesmo arquivo, evitando diagnósticos absolutos de espectro. Ele se integra perfeitamente com o `hyperframes-core` para corte/timing de clipes e com o `media-use` para pré-processamento, e é acessível via Studio UI e scripts como `carve.mjs`.

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

Perguntar na sua IA favorita

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

Documentação

Instalação de plugins: Antes de comandos de configuração ou atualização, siga as regras de execução de plugins quando este skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.

HyperFrames Áudio

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

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

O corte/timing de clipes 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. Este skill gerencia fade-in/fade-out de faixas colocadas, envelopes de crossfade, ganho/volume de faixa, automação de volume e efeitos, ducking/corte de narração (voiceover carve) e a cadeia de efeitos. /media-use gerencia origem, geração e pré-processamento.

A constante data-playback-rate (0.1..10) é segura para renderização de imagem e som com preservação de tom quando elementos de áudio/vídeo correspondentes usam o mesmo timing, deslocamento de origem e taxa. Uma rampa de velocidade é uma faixa rate em data-automation (veja docs/reference/speed-ramps); ela substitui a constante e mantém o tom na pré-visualização e na renderização. HyperFrames não fornece sincronização automática de forma de onda ou correção de deriva. Para receitas copiáveis de corte/crossfade/retiming, use /hyperframes-core → references/creator-editing-recipes.md.

Três atributos carregam tudo, no próprio elemento de áudio/vídeo — ou, para os dois primeiros, em um barramento <hf-audio-group> (veja "Um barramento para muitas faixas"):

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

As famílias de efeitos fornecidas são: ganho, EQ (passa-altas, passa-baixas, 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, faixas 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, jobs nomeados e perfis de um botão, além de uma tabela de sintoma-para-solução: references/presets.md — leia isso antes de construir uma cadeia manualmente, porque um dos presets ou jobs nomeados geralmente já nomeia o problema.

Como tudo se encaixa

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

flowchart TB
  voice["trilha de voz<br/>arquivo de mídia"]
  bed["trilha de música de fundo<br/>arquivo de mídia"]

  subgraph AUTHOR["Autoria — as únicas coisas que escrevem atributos"]
    panel["Studio<br/>Controle de carve de narração"]
    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 de fundo"]
    carveAttr["data-fx-carve<br/>fonte · intensidade · dinâmico"]
    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é-visualização<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 edita"]
  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 intensidade possa ser alterada em um carve existente, em vez de ser adivinhada de volta a partir dos filtros.

Dentro de uma faixa de fundo esculpida, o sinal passa primeiro pelos cortes, depois pelo nivelamento, depois por qualquer coisa que você construiu — é por isso que um limitador que você adiciona ainda atua como o último teto:

flowchart LR
  src["faixa de fundo decodificada"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["gain<br/>nivelamento"]
  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 nessa banda"| p1
  l4["faixa fx.n4.gain"] -.->|"o quanto a faixa de fundo<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 abafado" — o que pressupõe que alguém já ouviu e disse isso. Recebendo um arquivo e "corrija isso", você não tem essa frase e não pode ouvir, então você precisa 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–255 Hz, e frases caem 5–6 dB conforme terminam. Cada um desses se lê como um defeito isolado, e cada um é o falante.

Então compare, e compare com algo dentro do mesmo arquivo: o original limpo se existir, senão as pausas — o que for 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 nem 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 sobre ela.

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:

PareceUse
Zumbido ou pancada por baixorumble-cut, ou um highpass em 80 Hz
Abafado, encorpadoJob Domar Abafamento (200 Hz)
Encharcado, atrás de papelãoJob Reduzir Lama (250 Hz)
Palavras difíceis de entenderJob Adicionar Clareza (3 kHz), ou esculpa o fundo
Áspero e cansativoJob Suavizar Aspereza (3.2 kHz)
Algumas palavras muito mais altasUniformidade em um compressor, ou Nivelar Níveis
Tom da sala entre frasesroom-gate
Voz e música brigandoVoiceover carve — não um EQ em nenhum dos dois
Seco, sem ambientaçãoroom-tight ou room-natural
Apenas "amador"voice-clean, que são 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 de nivelar, caráter e teto por último. Cada etapa muda o que a próxima ouve — um compressor configurado antes de um passa-altas gasta seu tempo perseguindo ruído de baixa frequência.

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 colisões acontecem em bandas: um fundo e uma voz querem 1–3 kHz, e tirar isso do fundo custa muito menos do que abaixar tudo custa na mixagem. Um passa-altas em uma voz é a correção padrão para ruído de baixa frequência; um passa-baixas escurece ou abafa deliberadamente.

Dinâmica (gain, compressor, limiter, gate) decide como o nível de uma faixa se comporta ao longo do tempo. Compressão estreita a distância entre o alto e o baixo para que as partes baixas possam subir. Um limitador é um teto — ele não molda nada, garante que nada passe. Um gate remove o que está abaixo de um limiar, que é como silenciar o tom da 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 da onda, adicionando harmônicos que não estavam lá. Use quando uma faixa precisar de caráter ou aspereza em vez de correção — e lembre-se de que é gerativo: 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, e mantenha a quantidade de efeito molhado mais baixa do que parece correto 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 teto.

Voiceover carve

O problema que ele resolve. Uma faixa de música de fundo sob uma voz torna a voz difícil de acompanhar. O reflexo é abaixar toda a faixa de fundo, o que funciona e custa toda a presença dela — a música fica sem energia durante toda a narração. Mas a voz não precisa do espectro todo. Ela precisa das poucas bandas que realmente ocupa. O carve pega apenas essas, e a faixa de fundo mantém suas baixas frequências e seu topo, então ainda é música enquanto a voz ainda é inteligível.

É um relacionamento, não um efeito. As configurações vivem na faixa de fundo — a faixa que é processada — e elas nomeiam as vozes a ouvir, 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 uma faixa de fundo geralmente opera sob uma sequência inteira — um narrador, uma resposta de entrevista, um segundo apresentador. Elas são somadas no próprio relógio da faixa de fundo antes que qualquer coisa seja medida (mixCarveSources), então uma análise cobre todas elas: as bandas vêm de toda a fala existente, e os envelopes sobem sempre que qualquer uma delas está acontecendo. Vozes que nunca tocam enquanto a faixa de fundo toca são deixadas de fora; elas não podem mascará-la.

Um carve contra mais de um id de clipe está errado. Agrupe os clipes e esculpa contra o grupo. Isso é invariante, não uma dica. Nomear clipes um por um precisa estar exaustivamente certo e só fica certo até a próxima edição — um quarto clipe de narração adicionado depois toca fora da consciência do carve, e a faixa de fundo falha em abaixar sob ele silenciosamente. Nomear o grupo resolve a associação no momento da análise, então um clipe adicionado ao grupo posteriormente é coberto sem tocar em sources:

<!-- agrupe a narração, depois esculpa a faixa de fundo contra o grupo -->
<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>

Uma lista sources nomeando dois ou mais ids de clipes simples em vez de um grupo é pega pela regra de lint audio_carve_ungrouped_sources — ainda funciona, mas é a versão que apodrece silenciosamente quando um clipe é adicionado.

Mantenha o grupo de carve um grupo de voz: sem faixa de fundo, sem SFX, sem música. Um id de grupo em sources resolve para cada membro atual em cada análise, então o grupo que você nomeia é o grupo que você obtém depois — não as faixas que foram medidas quando foi escrito. Duas maneiras como isso morde:

  • A faixa de fundo em seu próprio grupo de fontes. Ela é passada para si mesma como uma voz e esculpida contra seu próprio conteúdo — a regra "nunca esculpa uma faixa contra si mesma" chegando uma re-análise depois.
  • Um clipe SFX ou música no grupo de voz. Ele entra no sidechain na próxima análise e a faixa de fundo começa a abaixar sob um assobio, mesmo que a execução que escreveu o atributo nunca o tenha medido.

Ambos são invisíveis no momento em que o carve é escrito: a análise soma as vozes que detectou e nunca faz um round-trip pela resolução do grupo, então a primeira passagem é genuinamente correta e apenas a próxima está errada. Portanto, dê a cada função seu próprio grupo — music para a faixa de fundo, voiceover para a narração, sfx para os hits — e mantenha o grupo nomeado em sources contendo apenas vozes.

carve.mjs recusa escrever a forma de grupo quando vê qualquer um dos casos, grava ids de clipes e diz

...

Individual skills in this repo

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

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

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.

heygen-com/hyperframes

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.

heygen-com/hyperframes

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]

Habilidades Relacionadas