Communitygithub.com

heygen-com/hyperframes

Doctrina de superposición para el flujo de trabajo de subtítulos incrustados: el modelo de subtítulos (eliminar/carril/incrustar) y la regla de que los subtítulos son una superposición compuesta sobre la película, nunca una banda inferior reservada que desplaza el contenido hacia arriba.

¿Qué es hyperframes?

Esta habilidad define una doctrina fundamental para el manejo de subtítulos en videos, combinando dos conceptos clave: el modelo de subtítulos (eliminar, carril, incrustar) y la ley de superposición. El modelo clasifica cada frase hablada como 'eliminar' (relleno que no se muestra), 'carril' (contenido predeterminado mostrado como subtítulo en la parte inferior) o 'incrustar' (una palabra destacada y escasa compuesta detrás del sujeto). La ley de superposición establece que los subtítulos son una capa añadida sobre el video, no una banda reservada, por lo que nunca se debe desplazar el contenido hacia arriba para dejar espacio. Juntas, estas reglas garantizan que la composición mantenga el cuadro completo centrado en el centro vertical real, evitando el error común de reservar una banda inferior muerta. La doctrina se aplica sobre la habilidad 'embedded-captions' y es compatible con flujos de trabajo de captions como los de las agentes de lanzamiento de video.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Doctrina de superposición de subtítulos

Doctrina de superposición — complementa la habilidad embedded-captions ascendente. Se aplica SOBRE ella; no esperes que esté integrada en la habilidad ascendente.

Dos ideas se combinan aquí. Primero, el modelo de subtítulos — cada frase hablada es eliminar, carril o incrustar, y incrustar es el pico escaso y ganado, no el predeterminado. Segundo, la ley de superposición — una línea de subtítulos se compone SOBRE la película como una superposición; NO es una zona reservada, por lo que nunca desplazas el contenido hacia arriba ni dejas una banda muerta para "hacer espacio" para ella. Las dos se refuerzan mutuamente: debido a que los subtítulos se colocan como una superposición (el carril textual al frente, la ocasional incrustación detrás del sujeto), la composición mantiene su cuadro completo y se centra en el centro vertical real.

El modelo de subtítulos — eliminar / carril / incrustar

Cada frase hablada es una de tres cosas (textual de embedded-captions):

QuéCómo se muestra
eliminarrelleno — um/eh, tartamudeos, autocorreccionesno se muestra
carrilel predeterminado — contenido hablado ordinario (textual)subtítulo limpio en el tercio inferior, al frente, legible. Una palabra destacada puede obtener un resaltado énfasis en línea (color de acento / resalte de palabra activa) — permanece en el carril.
incrustarun pico promocionado — el latido del titularuna palabra grande compuesta detrás del sujeto (oclusión mate), entrada + salida diseñadas

El carril lleva la mayor parte del texto; incrustar es el pico escaso y ganado — ≤1 por latido, nunca dos adyacentes/co-visibles, con una separación de al menos un latido. Un clip corto → generalmente una incrustación; una explicación larga → ~una por sección. Incrustar cada palabra es el error común.

Esta es la forma del modo Estándar (carril = el tercio inferior textual; incrustar = el clímax compuesto detrás del sujeto). El modo Cinematográfico elimina el carril y hace que todo sea de estilo incrustación — úsalo solo para solicitudes puramente cinematográficas, nunca para explicaciones / voces en off donde las palabras deben leerse.

Primero el carril, incrustar escaso (las reglas que soportan la carga)

Citado de los no negociables de embedded-captions:

  • Primero el carril para cabezas parlantes / explicaciones. No incrustes toda la transcripción — la mayor parte del texto es el carril; incrusta solo los picos. Incrustarlo todo es el error predeterminado.
  • Incrustar es escaso y espaciado. ≤1 incrustación por oración/latido, nunca dos adyacentes o co-visibles, con una separación de al menos un latido, como máximo un ápice. clímax = pico por latido, no "el único momento culminante de todo el clip".

La ley de superposición — los subtítulos NO son una banda reservada

En una composición de lanzamiento generada, cuando los subtítulos están habilitados, finalize composites una línea de subtítulos pequeña y mínima palabra por palabra como una capa de superposición SOBRE toda la película (una sola línea de texto, centrada en la parte inferior, aproximadamente el ~5-8% inferior de la altura del lienzo). Es una superposición, no una zona reservada (textual de la restricción #13 del agente de escena de video de lanzamiento de producto):

  • Centra la composición en el centro vertical REAL — y = H / 2 (paisaje 540, retrato 960). No desplaces el contenido hacia arriba para "hacer espacio" para los subtítulos; una composición centrada en 0.42 × H con una banda inferior muerta es el error, no la solución.
  • El contenido puede extenderse hasta la parte inferior del lienzo. Los sujetos a sangrado completo, carriles y fondos son bienvenidos.
  • Una regla de cortesía suave: evita colocar texto crítico pequeño legible (una línea de URL, una línea legal, un subtítulo secundario) exactamente en el tramo central inferior de ~80px donde se encuentra la línea de subtítulos — la superposición competiría con él. Las imágenes grandes / tarjetas / contenido ambiental debajo de los subtítulos está bien; la piel del subtítulo está diseñada para leerse sobre el contenido.
  • No hay una compuerta de exclusión automática (la antigua verificación captions.mjs keepout está retirada). El control de calidad de la instantánea de finalización juzga la legibilidad de los subtítulos sobre el contenido visualmente.

Cuando los subtítulos están deshabilitados: libertad de posicionamiento idéntica — la superposición simplemente no existe.

Por qué estas dos reglas son una sola doctrina

El modelo dice que el carril va al frente y una incrustación es una palabra rara compuesta detrás del sujeto — ambas son capas añadidas a una grabación que se envía intacta. La ley de superposición dice que la línea de subtítulos es una capa compuesta sobre toda la película, no una banda tallada en el diseño. Así que tanto en el pipeline de subtitulado como en el pipeline de video de lanzamiento, los subtítulos son una superposición que se añade, no una zona que se reserva:

  • Mantén el cuadro completo; centra en el centro real; deja que el contenido llegue hasta los bordes.
  • Haz que el carril (o la pequeña línea de superposición de subtítulos) lleve las palabras textuales.
  • Promociona una palabra a incrustación solo en un pico genuino — escaso, espaciado, nunca dos a la vez.
  • No reserves nada; juzga la legibilidad de los subtítulos sobre el contenido visualmente, no por una compuerta de exclusión.

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]

Skills relacionados