Communitygithub.com

heygen-com/hyperframes

Doctrine de superposition pour le workflow de sous-titres intégrés — le MODÈLE de sous-titres (drop / rail / embed) et la règle selon laquelle les sous-titres sont une SURCOUCHE composée sur le film, jamais une bande réservée en bas que l'on décale le contenu pour éviter.

Qu'est-ce que hyperframes ?

Ce skill définit une doctrine de superposition pour le workflow de sous-titres intégrés dans les agents de scène vidéo (comme ceux de product-launch-video et embedded-captions). Il combine deux idées : le modèle de sous-titres (drop / rail / embed) et la loi de superposition. Selon le modèle, chaque phrase parlée est soit ignorée (drop), affichée en bas au premier plan (rail), ou promue en un mot-clé rare derrière le sujet (embed). La loi de superposition stipule que la ligne de sous-titres est une couche ajoutée par-dessus le film, sans réserver de bande inférieure vide. Cela permet de centrer la composition sur le vrai centre vertical et d'utiliser tout le cadre. Le skill s'applique PAR-DESSUS embedded-captions et est utile pour les créateurs de vidéos explicatives, de lancement ou de talking-head, en évitant les erreurs courantes comme tout embedder ou décaler le contenu pour les sous-titres.

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

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Doctrine de superposition des sous-titres

Doctrine de superposition — complète le skill amont embedded-captions. S'applique PAR-DESSUS ; ne pas s'attendre à ce qu'elle soit intégrée dans le skill amont.

Deux idées se combinent ici. D'abord, le modèle de sous-titres — chaque phrase parlée est drop, rail ou embed, et embed est le pic rare et mérité, pas le défaut. Ensuite, la loi de superposition — une ligne de sous-titres est composée SUR le film en tant que surcouche ; elle n'est PAS une zone réservée, donc vous ne décalez jamais le contenu vers le haut ou ne laissez pas une bande morte pour "faire de la place". Les deux se renforcent mutuellement : parce que les sous-titres se superposent (le rail textuel devant, l'occasionnel embed derrière le sujet), la composition conserve son cadre complet et se centre sur le vrai centre vertical.

Le modèle de sous-titres — drop / rail / embed

Chaque phrase parlée est l'une des trois choses suivantes (textuellement de embedded-captions) :

QuoiComment c'est affiché
dropremplissage — euh, bégaiements, auto-correctionspas affiché
raille défaut — contenu parlé ordinaire (textuel)sous-titre propre en bas, devant, lisible. Un mot percutant peut obtenir un surlignage emphasis en ligne (couleur d'accent / pop de mot actif) — il reste sur le rail.
embedun pic promu — le temps fortun grand mot composé derrière le sujet (occlusion mate), entrée + sortie conçues

Le rail porte la majeure partie du texte ; embed est le pic rare et mérité — ≤1 par temps fort, jamais deux adjacents/co-visibles, espacés d'au moins un temps fort. Un clip court → généralement un embed ; une longue explication → ~un par section. Tout embedder est l'erreur courante.

C'est la forme du mode Standard (rail = le bas tiers textuel ; embed = le climax composé derrière le sujet). Le mode Cinématique supprime le rail et met tout en style embed — à utiliser uniquement pour des demandes purement cinématiques, jamais pour une explication / voix-off où les mots doivent être lus.

Rail d'abord, embed rare (les règles porteuses)

Citer des non-négociables de embedded-captions :

  • Rail d'abord pour talking-head / explication. N'embeddez pas la transcription entière — la plupart du texte est le rail ; n'embeddez que les pics. Tout embedder est l'erreur par défaut.
  • Embed est rare + espacé. ≤1 embed par phrase/temps fort, jamais deux adjacents ou co-visibles, ≥ un temps fort d'écart, au plus un apex. climax = pic par temps fort, pas "le seul point fort de tout le clip."

La loi de superposition — les sous-titres ne sont PAS une bande réservée

Dans une composition de lancement générée, quand les sous-titres sont activés, finalize composite une petite ligne de sous-titres mot par mot minimale en tant que couche de superposition SUR tout le film (une seule ligne de texte, centrée en bas, environ les ~5-8 % inférieurs de la hauteur du canevas). C'est une surcouche, pas une zone réservée (textuellement de la contrainte #13 de l'agent de scène product-launch-video) :

  • Centrez la composition sur le VRAI centre vertical — y = H / 2 (paysage 540, portrait 960). Ne décalez pas le contenu vers le haut pour "faire de la place" aux sous-titres ; une composition centrée à 0,42 × H avec une bande morte en bas est le bug, pas la correction.
  • Le contenu peut s'étendre jusqu'au bas du canevas. Les sujets en plein écran, les rails et les arrière-plans sont tous les bienvenus.
  • Une règle de courtoisie souple : évitez de placer du texte critique et petit (une ligne d'URL, une ligne juridique, un sous-titre) exactement dans la zone centrale des ~80 px en bas où se trouve la ligne de sous-titres — la surcouche entrerait en conflit. Les grandes images / cartes / contenus ambiants sous les sous-titres conviennent ; l'habillage des sous-titres est conçu pour être lu sur du contenu.
  • Il n'y a pas de porte de verrouillage machine (l'ancienne vérification captions.mjs keepout est retirée). L'assurance qualité de finalize snapshot juge la lisibilité des sous-titres sur le contenu visuellement.

Quand les sous-titres sont désactivés : liberté de positionnement identique — la surcouche n'existe tout simplement pas.

Pourquoi ces deux règles forment une seule doctrine

Le modèle dit que le rail se trouve devant et qu'un embed est un mot rare composé derrière le sujet — les deux sont des couches ajoutées à une vidéo qui reste intacte. La loi de superposition dit que la ligne de sous-titres est une couche composée sur tout le film, pas une bande découpée dans la mise en page. Ainsi, dans les deux pipelines (sous-titrage et vidéo de lancement), les sous-titres sont une surcouche que vous ajoutez, pas une zone que vous réservez :

  • Gardez le cadre complet ; centrez sur le vrai centre ; laissez le contenu aller jusqu'aux bords.
  • Faites porter les mots textuels par le rail (ou la petite ligne de sous-titres en superposition).
  • Ne promouvez un mot en embed qu'à un pic véritable — rare, espacé, jamais deux à la fois.
  • Ne réservez rien ; jugez la lisibilité des sous-titres sur le contenu visuellement, pas par une porte de verrouillage.

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 associés