Communitygithub.com

heygen-com/hyperframes

埋め込みキャプション処理におけるキャプションのオーバーレイ原則を定義します。キャプションを動画の上に重ねるオーバーレイとして扱い、予約領域を設けないルールを提供します。

hyperframes とは?

このスキルは、キャプション(字幕)を動画に追加する際の**キャプションモデル**(ドロップ/レール/エンベッド)と**オーバーレイの法則**を定義したドクトリンです。従来の「下部にキャプション用の空き領域を確保する」という考え方を廃止し、キャプションをあくまで映像の**上に重ねるレイヤー**として扱います。これにより、構図の中央(真の垂直中央)を基準にしたレイアウトが可能になり、映像のフルフレームを活用できます。主にトーキングヘッド動画や製品ローンチ動画のキャプション追加・編集時に使用し、`embedded-captions`スキルの上位に適用します。キャプションが無効な場合も同じポジショニング自由度が適用されます。

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

キャプションオーバーレイのドクトリン

オーバーレイのドクトリン — 上位の embedded-captions スキルを補完します。その上に適用されます。上位スキルに組み込まれているとは想定しないでください。

ここでは2つの考え方を組み合わせます。1つ目は、キャプションモデル — すべての話されたフレーズは drop、rail、embed のいずれかであり、embed は希少で獲得する価値のあるクライマックスであり、デフォルトではありません。2つ目は、オーバーレイの法則 — キャプション行は映像の上にオーバーレイとして合成されます。予約領域ではないため、コンテンツを上に移動させたり、「キャプションのための空き領域」としてデッドバンドを残したりすることはありません。この2つは相互に強化し合います。キャプションはオーバーレイとして配置されるため(逐語的なレールは前面、時折のエンベッドは被写体の背後)、構図はフルフレームを維持し、真の垂直中央を中心とします。

キャプションモデル — drop / rail / embed

すべての話されたフレーズは、次の3つのいずれかです(embedded-captions からそのまま引用):

意味表示方法
dropフィラー — えーと/あの、吃音、言い直し表示しない
railデフォルト — 通常の話し言葉(逐語)クリーンな下部サードの字幕、前面に、可読可能。パンチワードにはインラインの emphasis ハイライト(アクセントカラー/アクティブワードポップ)を付けることができます — レールに留まります。
embed昇格されたクライマックス — 見出しとなるビート被写体の背後に合成された大きな単語1つ(マットオクルージョン)、デザインされた入場+退場

レールがほとんどのテキストを担い、embed は希少で獲得したクライマックスです — 1ビートあたり1つ以下、隣接または同時表示不可、1ビート以上の間隔を空けます。短いクリップ → 通常はembedは1つ。長い解説動画 → セクションごとに約1つ。すべての単語をembedにするのはよくある間違いです。

これは標準モードの形状です(rail = 逐語的な下部サード、embed = 被写体の背後に合成されたクライマックス)。シネマティックモードはレールを廃止し、すべてをembedスタイルにします — 純粋な映画的用途のみに使用し、単語を読ませる必要がある解説/ナレーション動画には使用しないでください。

レール優先、embedは希少(重要なルール)

embedded-captions の非妥協ルールから引用:

  • トーキングヘッド/解説動画ではレール優先。 トランスクリプト全体をembedにしないでください — ほとんどのテキストはレールです。embedはクライマックスのみ。すべてをembedにするのがデフォルトの間違いです。
  • embedは希少かつ間隔を空ける。 1文/ビートにつき1つ以下、隣接または同時表示不可、1ビート以上の間隔、最大1つの apex。climax = ビートごとのクライマックスであり、「クリップ全体の唯一の見せ場」ではありません。

オーバーレイの法則 — キャプションは予約領域ではない

生成されたローンチ動画の構図において、キャプションが有効な場合、Finalize は小さく最小限の単語ごとのキャプション行を映像全体の上にオーバーレイレイヤーとして合成します(1行のテキスト、下部中央、キャンバス高さの約5〜8%)。これはオーバーレイであり、予約領域ではありません(product-launch-video シーンエージェントの制約#13からそのまま引用):

  • 構図の中心を真の垂直中央 — y = H / 2(横長540、縦長960)に合わせてください。キャプションの「空き領域を作る」ためにコンテンツを上に移動させないでください。構図が 0.42 × H を中心に下部にデッドバンドがあるのはバグであり、修正ではありません。
  • コンテンツはキャンバスの下端まで及んでも構いません。フルブリードの被写体、レール、背景すべて歓迎します。
  • 1つのソフトな礼儀ルール: キャプション行が配置される下部約80pxの中央範囲に、重要な小さな可読テキスト(URL行、法的表記、サブキャプション)を配置するのは避けてください — オーバーレイと競合します。キャプションの下の大きなイメージ/カード/アンビエントコンテンツは問題ありません。キャプションスキンはコンテンツの上で読めるように設計されています。
  • 機械的なキープアウトゲートはありません(古い captions.mjs keepout チェックは廃止されました)。Finalize スナップショット QA は、キャプションとコンテンツの重なりにおける可読性を視覚的に判断します。

キャプションが無効な場合: 同じポジショニングの自由度が適用されます — オーバーレイが存在しないだけです。

この2つのルールが1つのドクトリンである理由

モデルは、レールが前面に配置され、embed は被写体の背後に合成される稀な単語であると述べています — どちらも、手を加えずに出荷される映像に追加されるレイヤーです。オーバーレイの法則は、キャプション行が映像全体の上に合成されるレイヤーであり、レイアウトから切り出された帯ではないと述べています。したがって、キャプションパイプラインとローンチ動画パイプラインの両方において、キャプションは予約する領域ではなく、追加するオーバーレイです:

  • フルフレームを維持し、真の中央を中心にし、コンテンツを端まで配置します。
  • レール(または小さなオーバーレイキャプション行)に逐語的な単語を担わせます。
  • 本当のクライマックスでのみ単語をembedに昇格します — 希少で間隔を空け、同時に2つは決してありません。
  • 何も予約しません。キャプションとコンテンツの重なりにおける可読性は、キープアウトゲートではなく、視覚的に判断します。

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]

関連スキル