Communitygithub.com

heygen-com/hyperframes

Sistema de mídia OS para agentes: um único skill para todas as necessidades de mídia em um projeto HyperFrames. Resolva BGM, SFX, imagem, ícone, logotipo, voz, correção de cor ou LUT em um arquivo local congelado ou bloco pronto para colar + registro de ledger (um verbo: `resolve`); gere via modelos TTS / música / imagem quando o catálogo não tiver; produza narração, transcrição, legendas e remoção de fundo através de um mecanismo de áudio compartilhado; opere em mídia (cortar / reenquadrar / transformar); e reutilize ativos entre projetos. Também use para feedbacks vagos de que o vídeo real parece escuro, sem graça, chato, deve ser retrô/camcorder/impresso/ASCII, precisa de privacidade ou precisa de uma revelação de mídia.

O que é hyperframes?

Este é um skill de sistema operacional de mídia para agentes HyperFrames que unifica resolução, geração, operação e reutilização de mídia em um único comando. Com o verbo central `resolve`, ele permite localizar e fornecer BGM, SFX, imagens, ícones, logotipos, vozes (TTS), correções de cor (grade) e LUTs a partir de um catálogo, gerando-o dinamicamente via modelos de IA quando necessário. O skill também lida com feedback visual vago (como 'escuro', 'sem graça', 'retrô', 'ASCII') através de tratamentos de mídia baseados em fontes, que são transformações prescritas com capabilidades verificadas, não efeitos genéricos. Ele suporta operações de corte, reenquadramento e transformação, além de oferecer um mecanismo de áudio compartilhado para narração, transcrição e legendas. Sua abordagem proativa, mas não intrusiva, verifica oportunidades de mídia (como adicionar música de fundo ou locução) com base em sinais concretos, propondo uma sugestão específica uma vez por projeto. A documentação referenciada detalha configuração de provedores, reutilização, memória do usuário e metadados, permitindo que o agente execute tarefas de mídia complexas sem ruído de contexto.

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

Perguntar na sua IA favorita

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

Documentação

Instalação de plugins: Antes dos comandos de setup ou freshness, siga 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.

media-use

O SO de mídia para HyperFrames: resolver · gerar · operar · lembrar — todo tipo de mídia, um skill, zero ruído de contexto.

Primeira execução: instale e faça login na CLI heygen (caminho gratuito), depois verifique com npx hyperframes media-use resolve --doctor. Configuração e provedores: references/setup-providers.md.

Resolver — o único verbo

npx hyperframes media-use resolve --type <type> --intent "<description>" --project <dir>

Retorna uma linha: resolved <id> → <path> (<type>, <metadata>). Todo o ruído de busca permanece no disco.

TipoIntenção em uma linha
bgmmúsica de fundo (catálogo HeyGen, 10k+ faixas)
sfxefeitos sonoros (biblioteca de 19 arquivos + catálogo)
imagefotos, fundos (pesquisa de ativos HeyGen, 75k+ vetores)
iconícones, símbolos (transparentes)
logomarcas oficiais (theSVG → avatar GitHub → favicon; nunca redesenhado)
voicelocução TTS (caminho gratuito HeyGen; Kokoro local opcional)
gradecandidato de correção medido; polimento/estilização amplo segue Tratamentos de Mídia
lutarquivo .cube fornecido pelo usuário ou explicitamente escolhido e reutilizável

Antes de resolver algo novo, liste candidatos reutilizáveis com --candidates e julgue você mesmo o ajuste — regras de reutilização, todas as flags, ingest (--from) e adoção estão em references/resolve.md.

Trate feedback visual amplo como intenção de mídia

Quando um usuário explicitamente pede para corrigir, polir, estilizar, obscurecer, enfatizar ou revelar mídia fotográfica, leia references/media-treatments.md mesmo que ele não mencione correção de cor ou um efeito. Inspecione o <img>/<video> real, escolha uma intenção primária, depois use persistência e verificação determinísticas. Use uma receita correspondente como uma semente testada opcional, ou inspecione hyperframes media-treatment --capabilities --json, depois solicite uma família/efeito relevante com --capability <id> e monte um tratamento personalizado a partir de controles canônicos. Nunca carregue --all para criação comum. Um tratamento pode compor correção, um preset, finalização, efeitos de shader compatíveis, keyframes suportados e sobreposições opcionais do Registry. Adicione apenas ajustes limitados justificados pela fonte e partes compatíveis, nunca efeitos meramente para fazer o resultado parecer mais sofisticado. Persista o payload final combinado com hyperframes media-treatment.

Use um fluxo de trabalho progressivo. Para vídeo, inspecione uma folha de contato rotulada (início/meio/fim) em vez de ler quadros separadamente. Aplique um candidato e inspecione uma folha posterior para correção ou polimento comum. Escalone para quadros individuais ou evidências em movimento apenas quando o resultado for ambíguo, temporal, estilizado, baseado em LUT, sensível a HDR/LOG, privado ou crítico para a marca.

Para correção ou polimento comum, persista o JSON de preset/ajuste do tratamento final. Não gere um LUT .cube meramente para codificar exposição, sombras, contraste ou aquecimento. Use um LUT apenas quando o usuário fornecer um ou o tratamento selecionado explicitamente possuir um. resolve --type grade --for ... --analyze é evidência de medição, não permissão para substituir o tratamento escolhido por um LUT gerado. Não recrie efeitos suportados de vinheta, granulação, desfoque, pixelização, cor ou tratamento com sobreposições CSS/SVG; isso ignora os controles do Studio e o caminho canônico de preview/render de shader.

Seja proativo — execute uma passagem de oportunidade de mídia

O humano geralmente não sabe qual mídia melhoraria o projeto. Você sabe. Ao construir ou revisar uma composição, faça uma varredura fundamentada e depois pergunte uma vez — não adicione silenciosamente e não perturbe por ativo.

Ofereça uma oportunidade apenas quando um sinal concreto estiver presente:

Sinal detectadoOfereça
Texto na tela / um script sem locuçãoLocução TTS (mecanismo de áudio)
Emoji ou um <div> estilizado como íconeresolver icons reais
Imagem que é placeholder, miniatura ou parece ampliadauma image melhor (e/ou ampliação — veja references/operations.md)
Cortes de cena / transições sem somsfx de transição
Uma peça com mais de ~10s sem trilha musicalbgm
Filmagem sub/sobre-exposta ou com dominante de coruma correção corretiva (inspecione com hyperframes media-treatment --selector '#hero' --analyze --json)
Mídia fotográfica que parece visualmente sem graça ou fora do assuntoUm preset específico e apropriado à fonte ou tratamento personalizado, com o destino pretendido nomeado
Uma entrada/revelação de mídia significativa que parece estáticaUma animação de tratamento segura para seek; preserve a cor, a menos que a solicitação também justifique um preset

Regras que mantêm isso como ajuda, não encheção: fundamentado, não genérico (sem sinal → sem sugestão); opinativo + concreto (proponha a correção específica com padrões escolhidos — o humano aprova tudo / algo / nada); uma vez por projeto (um pedido consolidado; respeite "deixa assim"); na superfície, nunca mude silenciosamente (correções de cor especialmente: proponha e pré-visualize — uma correção de "mundo cinza" arruína um pôr do sol ou visual neon intencional).

Onde olhar — leia apenas o arquivo que sua tarefa precisa

TarefaLeia
resolver / reutilizar / adotar / ingerir, flags, cascata, inventárioreferences/resolve.md
correção de cor, LUTs, correção inteligente (--for), grade-comparereferences/grading.md
locução / TTS, música, SFX, legendas, transcrição (mecanismo de áudio)references/audio.md
cortar / reenquadrar / transformar mídia existente, difusão de erro exata, HEVCreferences/operations.md
tratamentos criativos sensíveis à fonte, efeitos em tempo real, sobreposições, revelaçõesreferences/media-treatments.md
instalação + autenticação, tabela de provedores, escalas de RAM, --local-only, --providerreferences/setup-providers.md
preferências lembradas + receitas congeladas (memória do usuário)references/memory.md
matriz de propriedade, estatísticas de uso, telemetria, privacidade (voltado a mantenedores)references/meta.md

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