Communitygithub.com

heygen-com/hyperframes

Überlagerungsrichtlinie für den Arbeitsablauf mit eingebetteten Untertiteln – das Untertitel-Modell (Drop / Rail / Embed) und die Regel, dass Untertitel eine Überlagerung (Overlay) sind, die über dem Film liegt, niemals ein reservierter unterer Streifen.

Was ist hyperframes?

Diese Skill-Definition beschreibt die „Captions Overlay Doctrine“, eine ergänzende Richtlinie für den bestehenden Skill `embedded-captions`. Sie kombiniert zwei Kernkonzepte: erstens das Untertitel-Modell mit den Kategorien Drop, Rail und Embed, wobei Embed der seltene und bewusst eingesetzte Höhepunkt ist und nicht der Standard. Zweitens das Overlay-Prinzip: Untertitel werden als Überlagerung auf dem gesamten Film platziert – es gibt keinen reservierten unteren Rand, der den Inhalt nach oben verschiebt. Dadurch bleibt die Komposition im vollen Bildausschnitt zentriert (horizontale Mitte y = H/2). Die Richtlinie richtet sich an Entwickler und KI-Agenten, die mit Talking-Head-Videos, Erklärvideos oder Produkt-Launch-Videos arbeiten. Sie unterstützt die Plattformen des `embedded-captions`-Skills und baut logisch darauf auf, indem sie die nicht verhandelbaren Regeln des Untertitel-Modells zitiert und die ausrangierte Keep-Out-Zone (constraint #13) ersetzt. Praktisch wird die Doktrin angewendet, wenn Untertitel hinzugefügt werden, wenn entschieden wird, ob ein Wort fallen gelassen, als Rail oder als Embed dargestellt wird, oder wenn das Layout einer Komposition mit Untertiteln erstellt wird – es wird niemals ein Freiraum reserviert. Die Dokumentation schreibt vor, dass die Rail den Großteil des Textes trägt und nur an echten Höhepunkten (scarce & spaced) ein Embed verwendet wird. Die Arbeit mit dieser Doktrin stellt sicher, dass Untertitel visuell lesbar bleiben, ohne das Layout zu beeinträchtigen, und die Legibilität von Inhalt-über-Untertitel visuell beurteilt wird.

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Captions-Overlay-Doktrin

Overlay-Doktrin – ergänzt den übergeordneten Skill embedded-captions. Wird OBEN DRAUF angewendet; nicht erwarten, dass sie in den übergeordneten Skill eingearbeitet ist.

Zwei Ideen verbinden sich hier. Erstens das Untertitel-Modell – jeder gesprochene Satz ist drop, rail oder embed, und embed ist der seltene, verdiente Höhepunkt, nicht der Standard. Zweitens das Overlay-Gesetz – eine Untertitelzeile wird als Overlay OBEN AUF dem Film zusammengesetzt; sie ist KEINE reservierte Zone, daher verschiebst du niemals den Inhalt nach oben oder lässt einen toten Streifen, um „Platz“ dafür zu schaffen. Beides verstärkt sich gegenseitig: Da Untertitel als Overlay aufliegen (die wörtliche Rail vorne, der gelegentliche Embed hinter dem Motiv), behält die Komposition ihren vollen Bildausschnitt und zentriert auf der wahren vertikalen Mitte.

Das Untertitel-Modell – drop / rail / embed

Jeder gesprochene Satz ist eines von drei Dingen (wörtlich aus embedded-captions):

WasWie es dargestellt wird
dropFüllwörter – äh/öh, Stottern, Selbstkorrekturennicht gezeigt
railder Standard – normaler gesprochener Inhalt (wörtlich)sauberer unterer Drittel-Untertitel, davor, lesbar. Ein Punch-Wort kann eine inline emphasis-Hervorhebung erhalten (Akzentfarbe / aktives Wort-Pop) – es bleibt auf der Rail.
embedein gehobener Höhepunkt – der Schlagzeilen-Beatein großes Wort hinter dem Motiv (Matte-Okklusion), gestalteter Ein- und Ausgang

Die Rail trägt den Großteil des Textes; embed ist der seltene, verdiente Höhepunkt – ≤1 pro Beat, niemals zwei benachbarte/gleichzeitig sichtbare, mindestens einen Beat Abstand. Ein kurzer Clip → normalerweise ein Embed; ein langer Erklärfilm → etwa eines pro Abschnitt. Jedes Wort zu embedden ist der häufigste Fehler.

Dies ist die Standard-Modus-Form (Rail = die wörtliche untere Drittel-Zeile; Embed = der Höhepunkt hinter dem Motiv). Der Cinematic-Modus wirft die Rail weg und macht alles Embed-artig – nur für rein-kinematografische Anfragen verwenden, niemals für Erklärfilme / Voiceover, wo die Worte lesbar sein müssen.

Rail zuerst, Embed sparsam (die tragenden Regeln)

Zitiert aus den unverhandelbaren Regeln von embedded-captions:

  • Rail zuerst für Talking-Head / Erklärfilm. Nicht das ganze Transkript embedden – der meiste Text ist Rail; nur Höhepunkte embedden. Alles zu embedden ist der Standardfehler.
  • Embed ist sparsam + mit Abstand. ≤1 Embed pro Satz/Beat, niemals zwei benachbarte oder gleichzeitig sichtbare, ≥ ein Beat Abstand, höchstens ein apex. Höhepunkt = Höhepunkt pro Beat, nicht „der einzelne Payoff des gesamten Clips.“

Das Overlay-Gesetz – Untertitel sind KEINE reservierte Zone

In einer generierten Launch-Komposition, wenn Untertitel aktiviert sind, erzeugt Finalize eine kleine, minimale Wort-für-Wort-Untertitelzeile als Overlay-Ebene OBEN AUF dem gesamten Film (eine einzelne Textzeile, unten zentriert, etwa die unteren ~5-8 % der Leinwandhöhe). Sie ist ein Overlay, keine reservierte Zone (wörtlich aus Constraint #13 des Product-Launch-Video-Szenenagenten):

  • Zentriere die Komposition auf der WAHREN vertikalen Mitte – y = H / 2 (Querformat 540, Hochformat 960). Verschiebe den Inhalt nicht nach oben, um „Platz“ für Untertitel zu schaffen; eine Komposition, die bei 0,42 × H zentriert ist und einen toten unteren Streifen hat, ist der Fehler, nicht die Lösung.
  • Der Inhalt darf bis zum unteren Leinwandrand reichen. Vollflächige Motive, Rails und Hintergründe sind alle willkommen.
  • Eine weiche Höflichkeitsregel: Vermeide es, kritischen kleinen lesbaren Text (eine URL-Zeile, eine rechtliche Zeile, einen Unter-Untertitel) genau im unteren ~80px mittleren Bereich zu platzieren, wo die Untertitelzeile sitzt – das Overlay würde mit ihm kämpfen. Große Bilder / Karten / umgebender Inhalt unter den Untertiteln ist in Ordnung; das Untertitel-Skin ist dafür ausgelegt, über Inhalten gelesen zu werden.
  • Es gibt kein maschinelles Keep-Out-Gate (der alte Check captions.mjs keepout ist ausgemustert). Die Finalize-Snapshot-QA beurteilt die Lesbarkeit von Untertiteln über Inhalt visuell.

Wenn Untertitel deaktiviert sind: identische Positionierungsfreiheit – das Overlay existiert einfach nicht.

Warum diese beiden Regeln eine Doktrin sind

Das Modell besagt, dass die Rail davor liegt und ein Embed ein seltenes Wort ist, das hinter dem Motiv zusammengesetzt wird – beides sind Ebenen, die zu unbearbeitetem Filmmaterial hinzugefügt werden. Das Overlay-Gesetz besagt, dass die Untertitelzeile eine Ebene ist, die oben auf dem gesamten Film zusammengesetzt wird, kein aus dem Layout herausgeschnittener Streifen. Also sowohl in der Untertitel-Pipeline als auch in der Launch-Video-Pipeline sind Untertitel ein Overlay, das du hinzufügst, keine Zone, die du reservierst:

  • Behalte den vollen Bildausschnitt; zentriere auf der wahren Mitte; lasse den Inhalt bis zu den Rändern laufen.
  • Lass die Rail (oder die kleine Overlay-Untertitelzeile) die wörtlichen Worte tragen.
  • Befördere ein Wort nur an einem echten Höhepunkt zu einem Embed – sparsam, mit Abstand, niemals zwei gleichzeitig.
  • Reserviere nichts; beurteile die Lesbarkeit von Untertiteln über Inhalt visuell, nicht durch ein Keep-Out-Gate.

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]

Verwandte Skills