Communitygithub.com

AlessandroFare/fluxychat

Use quando um áudio já colocado em uma composição HyperFrames precisa ser mixado: um fundo musical que luta com uma narração (esculpir a narração), efeitos em uma faixa (EQ, compressor, limitador, gate, saturação, delay, reverb, chorus, phaser, bitcrush) ou envelopes de automação desenhados no volume de uma faixa ou em qualquer parâmetro de efeito. Não use para buscar ou gerar áudio — encontrar BGM, SFX ou fazer uma narração é `/media-use`. Não use para temporização de clipes ou layout de faixas, que é `/hyperframes-core`.

O que é fluxychat?

Esta skill, AlessandroFare/fluxychat, é uma ferramenta especializada para mixagem de áudio dentro de composições HyperFrames, focada em resolver conflitos sonoros entre faixas, como um fundo musical que compete com uma narração. Em vez de simplesmente reduzir o volume, a skill oferece uma abordagem baseada em relacionamentos, esculpindo faixas específicas para criar espaço umas para as outras. Ela utiliza três atributos principais (`data-fx-chain`, `data-automation`, `data-fx-carve`) para controlar efeitos, envelopes de automação e definições de escultura, respectivamente, todos aplicados diretamente aos elementos de áudio/vídeo. A skill suporta uma ampla gama de efeitos de áudio (EQ, compressão, reverberação, etc.) e fornece um fluxo de trabalho que vai desde a análise do problema (usando espectros de comparação em vez de absolutos) até a aplicação de presets e jobs nomeados para sintomas comuns (como 'boomy', 'muffled', 'harsh'). Um recurso central é o 'carve' de narração, que dinamicamente reduz as bandas de frequência específicas que a voz ocupa, permitindo que o fundo musical mantenha sua presença sem sobrepor a fala. A skill opera tanto em uma interface de estúdio visual quanto via script de linha de comando, com um mecanismo de áudio Web compartilhado que garante que a pré-visualização corresponda exatamente ao resultado final renderizado. Ela é projetada para ser usada em conjunto com outras skills do ecossistema HyperFrames, como `/media-use` para sourcing de áudio e `/hyperframes-core` para edição de clipes, focando exclusivamente na mixagem e no processamento de relações sonoras.

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

Perguntar na sua IA favorita

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

Documentação

HyperFrames Áudio

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

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

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

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 da própria escultura, para que possa ser rederivada

O 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 está errado em 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 correçã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["faixa de voz<br/>arquivo de mídia"]
  bed["faixa de fundo musical<br/>arquivo de mídia"]

  subgraph AUTHOR["Autoria — as únicas coisas que escrevem atributos"]
    panel["Estúdio<br/>Controle de escultura 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"]
    painel --> analysis
    script --> analysis
  end

  voice --> analysis
  bed --> analysis

  subgraph ATTRS["Escrito no elemento do fundo musical"]
    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 --> previsualização["Pré-visualização<br/>AudioContext ao vivo<br/>attachElementFxChain"]
  sched --> previsualização
  build --> renderização["Renderização<br/>OfflineAudioContext no navegador headless<br/>applyAudioFxChain"]
  sched --> renderização

  previsualização --> ouvido["o que você ouve enquanto examina"]
  renderização --> wav["WAV processado<br/>+ chainTailSeconds para que a mixagem deixe a cauda passar"]
  wav --> mixer["motor · audioMixer<br/>faixa de volume assada no PCM aqui, não no grafo"]
  mixer --> saida["a mixagem renderizada"]

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

As configurações da própria escultura nunca são lidas durante a reprodução — a cadeia e as faixas que ela produziu são o que toca. data-fx-carve existe para que a intensidade possa ser alterada em uma escultura existente em vez de ser adivinhada de volta a partir dos filtros.

Dentro de um fundo musical esculpido, o sinal passa primeiro pelos cortes, depois pelo ajuste de nível, e então por qualquer coisa que você mesmo construiu — que é o motivo pelo qual um limitador que você adiciona ainda atua como o último teto:

flowchart LR
  src["fundo musical decodificado"] --> p1["peaking<br/>400 Hz"]
  p1 --> p2["peaking<br/>1 kHz"]
  p2 --> p3["peaking<br/>1.6 kHz"]
  p3 --> g["ganho<br/>ajuste de nível"]
  g --> mao["seus próprios efeitos<br/>ex.: limitador"]
  mao --> destino["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 o fundo musical<br/>reduz no geral"| g

Uma escultura estática é 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. Se receber um arquivo e "consertar isso", você não tem essa frase e não pode ouvir, então tem que medir. Uma regra rege 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 sentenças declinam de 5 a 6 dB à medida que terminam. Cada um desses é lido como um defeito por si só, e cada um deles é do locutor.

Então compare, e compare com algo dentro do mesmo arquivo: o original limpo se existir, caso contrário, as pausas — o que é audível em uma lacuna é aditivo, e o espectro da lacuna é o canal em vez da voz. Comparar com um espectro médio publicado ou uma voz de controle sintetizada não funciona: dois locutores 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-o antes de diagnosticar um arquivo que ninguém descreveu.

Comece pelo sintoma

Depois de saber 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 pronta:

Soa comoRecorra a
Zumbido ou baque por baixorumble-cut, ou um highpass a 80 Hz
Encorpado, peitoralDomar Encorpado job (200 Hz)
Abafado, atrás de papelãoReduzir Lama job (250 Hz)
Palavras difíceis de entenderAdicionar Clareza job (3 kHz), ou esculpa o fundo musical
Áspero e cansativoSuavizar Aspereza job (3.2 kHz)
Algumas palavras muito mais altas que outrasUniformidade em um compressor, ou Uniformizar Níveis
Tom de ambiente entre frasesroom-gate
Voz e música competindoEscultura de narração — não um EQ em nenhum
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 definido antes de um high-pass passa seu tempo perseguindo o zumbido.

Recorra a 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 fundo musical e uma voz ambos querem 1–3 kHz, e tirar isso do fundo musical custa muito menos para ele do que abaixar tudo custa para a mixagem. Um high-pass em uma voz é a correção padrão para zumbido; um low-pass 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 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 você silencia o tom de ambiente entre frases. gain é um estágio de nível simples, e é o que uma faixa de automação monta quando uma faixa tem que sair do caminho.

Não lineares (saturate, bitcrush) mudam a forma da forma de onda, o que adiciona harmônicos que não estavam lá. Recorra a eles quando uma faixa precisa de caráter ou granulação 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á a ela largura. 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 menor do que soa bem isoladamente.

A cadeia é serial: cada efeito processa o que o anterior produziu. Portanto, a filtragem corretiva vai cedo, o caráter no meio e um limitador por último, onde pode realmente atuar como um teto.

Escultura de narração

O problema que resolve. Um fundo musical sob uma voz torna a voz difícil de seguir. O reflexo é abaixar todo o fundo musical, o que funciona e custa a ele toda a sua presença — a música fica sem vida durante toda a narração. Mas a voz não precisa de todo o espectro. Ela precisa das poucas bandas que realmente ocupa. A escultura pega apenas essas, e o fundo musical mantém suas frequências graves e agudas, então ainda é música enquanto a voz ainda é inteligível.

É um relacionamento, não um efeito. As configurações residem no fundo musical — a faixa que é processada — e nomeiam as vozes para ouvir, exatamente como um compressor sidechain faz: você seleciona a faixa que fica mais baixa e escolhe o que a torna mais baixa. Nunca coloque uma escultura em uma faixa de voz. Uma voz esculpida contra si mesma é um erro, não uma escolha sutil de mixagem.

Cada voz, não apenas uma. sources é uma lista, porque um fundo musical geralmente toca sob uma sequência inteira — um narrador, uma resposta de entrevista, um segundo apresentador. Elas são somadas no próprio relógio do fundo musical antes que qualquer coisa seja medida (mixCarveSources), então uma análise cobre todas elas: as bandas vêm de toda a fala que existe, e os envelopes sobem onde quer que alguma esteja acontecendo. Vozes que nunca tocam enquanto o fundo musical toca são deixadas de fora; elas não podem mascará-lo.

Um botão. strength é 0..1 e deriva tudo: o quão profundo cortar, quantas bandas, o quão largas, o quanto favorecer a inteligibilidade sobre a energia bruta da voz, o quanto o nível pode cair, o quão abaixo da voz mirar. Esses seis andam juntos em qualquer mixagem real — uma escultura suave é um corte raso em poucas bandas com pouca redução, uma forte é mais profunda em mais bandas com mais — então eles são um relacionamento escrito uma vez, em carveProfile. O padrão é 0,25 — um corte de 6 dB em três bandas com 6 dB de margem de nível, audível sem soar como um buraco. Em 0,5 o corte atinge 10 dB, que é onde uma escultura começa a ser ouvida como um efeito em vez de espaço para a voz; acima disso é território deliberado para um fundo musical alto sob uma voz baixa. 0 é apenas espectral — uma banda, sem ajuste de nível.

Esculpir por padrão. Um fundo musical tocando sob narração quer uma escultura; 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 — um videoclipe, um cartão de título, um corte de montagem ao ritmo da faixa.

Ela sempre segue a voz. Não há modo estático: uma profundidade fixa enfraquece o fundo musical através de cada pausa, e depois que você ouviu ambos, não há razão para querê-la. Cada valor se torna um envelope do próprio nível da fala — o silêncio deixa o fundo musical em paz, uma passagem alta empurra a escultura para a profundidade total — escrito como automação comum, que é o motivo pelo qual as faixas aparecem na linha do tempo e podem ser editadas depois.

O ajuste de nível faz parte dela. A escultura espectral não pode corrigir um fundo musical que é simplesmente mais alto que a voz. Então a escultura também mede o quanto o fundo musical está acima da voz e escreve um estágio gain: mantido em um valor para uma escultura estática, conduzido por um envelope para uma dinâmica. 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-a. No Estúdio, a escultura é um módulo no topo do rack de efeitos de uma faixa — voz, intensidade, dinâmico e a análise que produziu, em um cartão. Está lá sempre que outra faixa poderia ser a voz, e um fundo musical com exatamente um candidato acima dele é esculpido por padrão, dinamicamente, na intensidade padrão: isso é o que um fundo musical 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 a voz e o fundo musical, esculpe dinamicamente na intensidade padrão e imprime o que decidiu:

bed    music-bed (nome parece música)
voice  narration (única faixa restante)
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

Nomeie as faixas com --bed / --voice (repetível) quando a escolha automática estiver errada, --strength para empurrá-la, --dry-run para ver esse relatório e não escrever nada.

Como ele escolhe as faixas. Nomes primeiro, porque é o que você já disse a ele e a resposta é explicável — classifyAudioName em core, o mesmo classificador que o seletor do próprio Estúdio usa, então os dois não podem discordar. Uma faixa cujo id ou nome de arquivo parece música (music, bgm, bed, score…) é o fundo musical; todo o resto que toca sobre ela e não tem forma de SFX é uma voz. Elementos de áudio são preferidos: o vídeo conta apenas quando nenhuma faixa de áudio resta para ser a voz, ou cada clipe B-roll na composição pareceria alguém falando. Ele recusa quando não pode distinguir: duas faixas que parecem música ou nenhuma que pareça música, e imprime um erro em vez de adivinhar.

Efeitos e presets

Referência completa de parâmetros, unidades e faixas: references/fx-registry.md. Abra isso antes de construir qualquer cadeia manualmente, porque as faixas de parâmetros não são padronizadas entre efeitos — uma largura de 0.5 para um peaking é um corte estreito, para um shelving é um suave — e o ID de parâmetro que uma automação faz referência no JSON é o nome oficial, não o rótulo amigável.

Presets nomeados, jobs e perfis de um botão: references/presets.md. Um preset é uma cadeia de efeitos completa com valores, que é o que você alcança quando o som está errado de uma forma que já tem nome. Um job nomeado é um subconjunto — uma etapa de cadeia, não a cadeia inteira. Um perfil de um botão é uma única abstração que define vários parâmetros em um movimento (como strength na escultura). A tabela de sintoma para correção na seção Comece pelo sintoma acima aponta para este arquivo.

Efeitos por tipo:

Filtros (primeiro) — highpass, lowpass, peaking, lowshelf, highshelf. Todos paramétricos com frequência, Q e ganho onde aplicável.

Dinâmicas (segundo, depois que as bandas são corrigidas) — gain (estágio de nível simples), compressor (threshold, ratio, attack, release, knee, makeup-gain), limiter (apenas threshold), gate (threshold, attack, hold, release).

Não lineares (terceiro, se a faixa precisar de caráter) — saturate (drive, output-gain), bitcrush (bits, sample-rate-reduction, mix).

Tempo (último, se a faixa deve ficar atrás de outra coisa) — delay (time, feedback, mix), reverb (decay, pre-delay, damping, size, mix), chorus (rate, depth, delay, mix), phaser (rate, depth, feedback, stages, mix).

A cadeia é serial. Cada efeito processa o que o anterior produziu. Portanto, a filtragem corretiva vai cedo, o caráter no meio e um limitador por último.

Automação

Automação não é uma peça de efeito. É uma propriedade de um parâmetro, expressa como um conjunto de pontos-chave ou uma função de envelope, em JSON dentro de data-automation. Qualquer parâmetro de qualquer efeito na cadeia pode ser automatizado — volume da faixa, frequência de um peaking, threshold de um compressor, taxa de um chorus. A automação de escultura sempre escreve em data-automation para que os envelopes apareçam e possam ser editados posteriormente. Especificação completa: references/attributes.md.

Cauda de mixagem

Uma cauda de reverberação ou delay que continua após o final de uma faixa não deve ser cortada. O motor de renderização permite que você especifique segundos extras (padrão 0.5) como chainTailSeconds na mixagem, que é somado ao contêiner de áudio para que a cauda passe. O valor padrão cobre a maioria dos reverbs de sala e delays de quarto de nota; um reverb de cauda longa ou delay com feedback alto pode precisar de 1.0–2.0.

Se falhar

A skill imprime JSON em stderr. O motivo está sempre na primeira chave: "error". Possibilidades:

  • Nenhuma faixa de áudio encontrada (a composição pode não ter sido renderizada ainda para um elemento de áudio).
  • A classificação não conseguiu distinguir o fundo musical da voz (duas faixas parecem música ou nenhuma parece música).
  • A faixa do fundo musical não tinha áudio decodificado (pode precisar de um ciclo de renderização).
  • Um atributo é JSON inválido (um efeito com parâmetros ausentes).

Para problemas de diagnóstico de áudio, execute node <SKILL_DIR>/scripts/diagnose.mjs --comp index.html --track-id <id>, que executa a análise de espectro e imprime as leituras.

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.

Habilidades Relacionadas