Communitygithub.com

heygen-com/hyperframes

シーン間トランジションのレンダリング正しさを保証するための前提条件をまとめたドクトリンです。マスタータイムライン上でトランジションが正しく合成されるための仕組みを説明します。

hyperframes とは?

このスキルは、HyperFrames 起動ビデオにおけるシーン間のつなぎ目(シーム)のレンダリング正しさを保証するためのドクトリン(教義)です。特定のトランジション(クロスフェード、プッシュスライドなど)に依存せず、すべてのトランジションがマスタータイムライン上で正しく合成されるために必要な前提条件と仕組みを提供します。主に、アセンブルされた index.html のマスタータイムラインで、白色フラッシュ(特に暗い映像でのカットやクロスフェード時の白い眩しさ)が発生する問題の原因と対策を扱います。具体的には、#root 要素の不透明な背景(ステージ地面)の設定、インジェクターによる2つのシーンラッパーの重なり制御、最終フレームの保持、トラックのピンポン配置、そして lint クリーンな GSAP テンプレートコードのマスタータイムラインへのスタンプ方法をカバーします。このスキルは、トランジションの個別カタログではなく、その基礎となるレンダリング正しさの原則を定義しており、Claude Code や Cursor などの AI エージェントがビデオ編集のトランジション問題をデバッグする際に参照すべき必須の知識です。

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

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

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

ドキュメント

シームクラフト — シーン間トランジションのレンダリング前提条件

これは PLV シーン間シームのレンダリング正しさドクトリンです。特定のトランジションに依存せず、あらゆるトランジションが正しく合成されるための前提条件とマスタータイムラインのメカニズムを説明します。個別トランジションのカタログ(クロスフェード、プッシュスライド、ズームスルー、カットザカーブなど)はトランジションレジストリにあります。このページはそれらすべての基礎となるドクトリンです。

このドクトリンが対象とするトランジションはTier-B 対応です。2つのシーンクリップラッパー(#el-<sid>)に対する純粋な transform / opacity / filter のみを使用し、オーバーレイ用の追加 DOM やシーン間の協調は必要ありません。オーバーレイ系(千鳥ブロック、ブラインド、ライトリーク、グリッドディゾルブ、ページバーンなど)およびシェーダートランジションは後のフェーズに延期されます。

ステージ地面の前提条件(白色フラッシュガード)

いくつかのテンプレートでは、2つのラッパーの opacity の合計が 1 未満になるウィンドウが存在します(カットザカーブのミッドウィンドウカット、ズームスルーの 0.15 フロア、プレーンクロスフェードのパワーカーブディップなど)。このウィンドウの間、ラッパーの背後にあるものが透けて見えます。アセンブルされた index.html の #root に不透明な背景がない場合、レンダラーはデフォルトの白いページ上でディップを合成するため、すべてのシームで白色フラッシュが発生し、暗い映像で特に目立ちます(修正前の2回の Spotify 実行で観測済み)。 アセンブラーはステージを塗りつぶす必要があります: #root { background: var(--canvas-deep, var(--canvas, #000)) } — assemble-index.mjs はこれを出力するようになりました。このテンプレートを使用する他のコンシューマーも同じ保証を行う必要があります。

インジェクターがトランジションを適用する方法

シーン i(from)とシーン i+1(to)の間の break 境界において、インジェクターは以下の処理を行います:

  1. #el-<from> ラッパーの data-duration を duration_s だけ延長します(最終フレームを保持 — 検証済み: core/src/runtime/init.ts:1393-1410 external-slot ブランチ)。
  2. #el-<to> ラッパーの data-start を duration_s だけ早めます(オーバーラップウィンドウを作成)。
  3. すべてのクリップ data-track-index を 0/1 のピンポンに再割り当てし、2つのオーバーラップするラッパーが決して同じトラックを共有しないようにします(同一トラック上のオーバーラップは違反 — core/src/lint/rules/composition.ts)。高いトラック番号が上に合成されます。
  4. T = overlap-start のタイミングで gsap_template を window.__timelines["main"] にスタンプします。

プロトタイプレンダリング(2026-05-31)で検証済み: マスタータイムラインのラッパートゥイーンはシークされレンダリングされます(サブコンポジション自身の一時停止タイムラインとの二重シークは発生しません — ランタイムがそれらを独立して駆動します)。延長されたラッパーはシーン i の最終フレームを保持し、高いトラックのインミングラッパーがアウトゴーイングラッパーの上に合成され、ブレンドされます。

テンプレートプレースホルダー

インジェクターは各 gsap_template 行で以下のトークンを置換します:

トークン意味
__OLD__"#el-<from>" — アウトゴーイングクリップラッパーセレクター(引用符付き)
__NEW__"#el-<to>" — インミングクリップラッパーセレクター(引用符付き)
__T__オーバーラップ開始時刻(秒、マスタークロック)
__DUR__この境界の duration_s
__DX__方向性タイプの水平移動量: -1920(左)/ 1920(右)
__DY__垂直移動量: -1080(上)/ 1080(下)
__ORIGIN_OUT__ / __ORIGIN_IN__squeeze 用の transformOrigin ペア

filter / scaleX / transformOrigin はマスタータイムライン上で lint クリーンです(検証済み: core/src/lint/rules/gsap.ts はプロパティごとのホワイトリストを持たず、チェックを data-composition-id の範囲に限定しています。x/y/scale/rotation/opacity のホワイトリストは_シーンワーカー_のプロンプトルールのみであり、index.html を拘束しません)。

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

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]

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

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

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

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

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

関連スキル