Communitygithub.com

heygen-com/hyperframes

Doutrina de sobreposição para o fluxo de trabalho de legendas incorporadas — o MODELO de legenda (drop / rail / embed) e a regra de que as legendas são uma SOBREPOSIÇÃO compostada sobre o filme, nunca uma faixa inferior reservada que desloca o conteúdo para cima.

O que é hyperframes?

Este skill (habilidade) define uma doutrina de sobreposição (“overlay doctrine”) que complementa o skill `embedded-captions` e se aplica SOBRE ele. A base do skill é dupla: primeiro, o **modelo de legenda** — cada frase falada recebe um dos três status: `drop` (filler, não exibido), `rail` (conteúdo padrão, exibido como legenda inferior) ou `embed` (pico promovido, exibido atrás do sujeito com entrada/saída projetadas). O embed é escasso e reservado para os momentos de maior impacto, evitando o erro comum de transformar tudo em embed. Segundo, a **lei de sobreposição**: as legendas são compostadas COMO UMA CAMADA SOBRE o vídeo completo, sem reservar qualquer faixa inferior que force o deslocamento do conteúdo principal. Isso significa que a composição deve ser centralizada no centro vertical verdadeiro (y = H/2), permitindo que o conteúdo ocupe toda a tela, inclusive a parte inferior. Não há mais nenhuma verificação automática de zona de exclusão (keep-out gate); a legibilidade da legenda sobre o conteúdo é julgada visualmente. O skill é ideal para agentes que geram vídeos de lançamento, tutoriais com cabeças falantes ou qualquer cena que precise adicionar legendas sem comprometer o layout.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/HEAD/.agents/skills/captions-overlay

Perguntar na sua IA favorita

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

Documentação

Doutrina de Sobreposição de Legendas

Doutrina de sobreposição — complementa o skill upstream embedded-captions. Aplica-se SOBRE ele; não espere que esteja incorporado no skill upstream.

Duas ideias se combinam aqui. Primeiro, o modelo de legenda — cada frase falada é drop, rail ou embed, e embed é o pico raro e conquistado, não o padrão. Segundo, a lei de sobreposição — uma linha de legenda é composta SOBRE o filme como uma camada; ela NÃO é uma zona reservada, portanto você nunca desloca o conteúdo para cima ou deixa uma faixa morta para "abrir espaço" para ela. As duas se reforçam: porque as legendas atuam como sobreposição (o rail verbatim na frente, o embed ocasional atrás do sujeito), a composição mantém seu quadro completo e centraliza no centro vertical verdadeiro.

O modelo de legenda — drop / rail / embed

Cada frase falada é uma de três coisas (textual do embedded-captions):

O quêComo é exibida
dropfiller — hum/ah, gaguejos, autocorreçõesnão exibida
railo padrão — conteúdo falado comum (textual)legenda inferior limpa, na frente, legível. Uma palavra de destaque pode ganhar um realce emphasis inline (cor de destaque / pop ativo da palavra) — permanece no rail.
embedum pico promovido — o momento principaluma palavra grande composta atrás do sujeito (oclusão fosca), entrada + saída projetadas

O rail carrega a maior parte do texto; embed é o pico raro e conquistado — ≤1 por compasso, nunca dois adjacentes/co-visíveis, espaçados ≥ um compasso. Um clipe curto → geralmente um embed; um explicador longo → ~um por seção. Incorporar toda palavra é o erro comum.

Este é o formato Padrão (rail = a legenda inferior verbatim; embed = o clímax composto atrás do sujeito). O modo Cinematográfico remove o rail e transforma tudo em estilo embed — use-o apenas para pedidos puramente cinematográficos, nunca para explicadores / narrações em que as palavras precisam ser lidas.

Rail primeiro, embed escasso (as regras estruturais)

Extraído dos itens não negociáveis do embedded-captions:

  • Rail primeiro para cabeça falante / explicador. Não incorpore a transcrição inteira — a maior parte do texto é rail; incorpore apenas os picos. Incorporar tudo é o erro padrão.
  • Embed é escasso + espaçado. ≤1 embed por frase/compasso, nunca dois adjacentes ou co-visíveis, ≥ um compasso de distância, no máximo um apex. clímax = pico por compasso, não "o único momento de destaque do clipe inteiro."

A lei de sobreposição — legendas NÃO são uma faixa reservada

Em uma composição de lançamento gerada, quando as legendas estão ativadas, o sistema de finalização compõe uma linha de legenda palavra por palavra pequena e mínima como uma camada de sobreposição SOBRE todo o filme (uma única linha de texto, centralizada na parte inferior, aproximadamente entre 5 e 8% da altura do canvas). É uma sobreposição, não uma zona reservada (textual da restrição #13 do agente de cena de vídeo de lançamento de produto):

  • Centralize a composição no centro vertical VERDADEIRO — y = H / 2 (paisagem 540, retrato 960). Não desloque o conteúdo para cima para "abrir espaço" para legendas; uma composição centralizada em 0,42 × H com uma faixa inferior morta é o bug, não a correção.
  • O conteúdo pode se estender até a parte inferior do canvas. Sujeitos com sangria, rails e fundos são todos bem-vindos.
  • Uma regra de cortesia suave: evite posicionar texto crítico e pequeno legível (uma linha de URL, uma linha legal, uma legenda secundária) exatamente no centro da faixa inferior de ~80px onde a linha de legenda fica — a sobreposição entraria em conflito. Imagens grandes / cards / conteúdo ambiente sob as legendas é aceitável; o estilo da legenda foi projetado para ser lido sobre o conteúdo.
  • Não há portão automático de exclusão (a antiga verificação captions.mjs keepout está aposentada). O controle de qualidade da snapshot de finalização julga a legibilidade da legenda sobre o conteúdo visualmente.

Quando as legendas estão desabilitadas: liberdade de posicionamento idêntica — a camada de sobreposição simplesmente não existe.

Por que essas duas regras são uma única doutrina

O modelo diz que o rail atua na frente e um embed é uma palavra rara composta atrás do sujeito — ambas são camadas adicionadas a uma filmagem que permanece intocada. A lei de sobreposição diz que a linha de legenda é uma camada composta por cima de todo o filme, não uma faixa recortada do layout. Portanto, tanto no pipeline de legendagem quanto no pipeline de vídeo de lançamento, as legendas são uma sobreposição que você adiciona, não uma zona que você reserva:

  • Mantenha o quadro completo; centralize no centro verdadeiro; deixe o conteúdo chegar às bordas.
  • Faça o rail (ou a pequena linha de legenda sobreposta) carregar as palavras textuais.
  • Promova uma palavra a embed apenas em um pico genuíno — escasso, espaçado, nunca duas ao mesmo tempo.
  • Não reserve nada; julgue a legibilidade das legendas sobre o conteúdo visualmente, não por um portão de exclusão.

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

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

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

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]

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

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 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

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

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

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

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

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]

Habilidades Relacionadas