Communitygithub.com

heygen-com/hyperframes

GATEWAY — 在組合任何 HyperFrames 動畫或影片之前,必須優先載入此技能。這是一套高階運動法則,讓多場景影片感覺像是連續的單一鏡頭移動,而非獨立動畫投影片的疊加。詳細說明了向量法則、影片主流、載體元素、因果運動、接縫閘門、禁止閒置晃動、高潮前的靜止,以及持續運動路徑。並指向低階技術技能。這些規則優先於通用/上游的運動指南。

hyperframes 是什麼?

heygen-com/hyperframes 是 HyperFrames 動畫系統的一套進階運動法則,作為一個閘道器,所有動畫開發都必須先參考此技能。它的核心目的是解決多場景影片中最常見的問題:當場景獨立創作時,觀眾視線的動量會在每個剪輯點中斷,導致影片顯得斷斷續續。此技能定義了一套從向量法則、接縫法則到持續運動效能的完整規則體系,確保每個場景的進場與退場在軸向、方向、速度與相位上完全匹配,形成無縫的連續鏡頭移動感。此技能支援所有 HyperFrames 平台,並指向一系列低階實作技能,如 `cut-the-curve`(接縫過渡目錄)、`oversized-cursor`(遊標引導動作)與 `seam-craft`(接縫渲染機制)。實作流程包含撰寫向量分類帳、執行接縫標記腳本、驗證接縫閘門,以及遵守禁止閒置晃動、因果運動鏈、過渡詞彙表等規則,這些規則優先於任何通用或上游的運動指南。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/HEAD/.agents/skills/motion-doctrine

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

運動法則(閘道器)

在創作任何動畫之前,請先閱讀此文。它決定了每個接縫處發生什麼事,以及每個場景如何表現;技術技能則負責實作。這些規則優先於通用/上游的運動指南。此技能旨在防止的失敗:場景孤立創作——視線的動量在每個剪輯點死亡,且場景在進場與退場之間原地晃動。

路徑圖

決策(此技能)實作技能
接縫過渡選擇 + 參數 + 程式碼cut-the-curve §1–5(目錄)
文字/元素進場級聯cut-the-curve §6(瀑布式進場)
場景內群組重新定位(無剪輯)cut-the-curve §7(微調曲線)
遊標引導的動作/場景啟動/變形觸發oversized-cursor
接縫渲染機制/白色閃光防護seam-craft
產品發布/解說/字幕工作在該上游技能的基礎上疊加 text-beat-economics、brand-faithful、captions-overlay

創作順序:向量分類帳 (ledger.json) → 從中標記主要接縫 (scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → 為每個階段選擇持續運動路徑 → 載體與原因 → 建構組合 → 驗證 (scripts/seam-gate.mjs)。 只有 Tier-A 的變形/匹配剪輯才需手動創作;標記過的接縫透過建構方式即可通過閘門。


第一部分 — 接縫法則

向量法則

場景 A 的退場方式決定了場景 B 的進場方式:相同的軸向、相同的方向、匹配的速度,並且在兩側的運動中間進行剪輯。

  1. 軸向 — X 維持 X,Y 維持 Y,Z 維持 Z。絕不在剪輯點交換軸向。
  2. 方向 — 絕不鏡像反轉。在 Z 軸上,方向等於縮放變化的正負號:放大 = 推進(攝影機向前),縮小 = 拉遠(攝影機向後)。一個退縮的退場接著一個從小到大的進場是鏡像向量——這是最常見的違規,因為從小到大的進場是預設的元素入口方式。
  3. 速度 — 進場的初始速度 ≈ 退場的最終速度,透過鏡像的緩動曲線達成(退場使用 power4.in + 進場使用 power4.out,距離與持續時間相同;進場方在假想路徑的 ≥50% 處開始)。實作機制詳見 cut-the-curve。
  4. 相位 — 剪輯點落在兩側的運動中間。在剪輯前靜止下來,或在剪輯後從靜止開始,都是一個死拍。

主流

每個影片選擇一個主導方向(系統預設為:向左)。每個一般接縫都使用此方向。其他向量是保留的——使用它們意味著某種意義:

向量意義
主流(向左)「下一個節拍」——中性的向前推進
向上提升——結論或揭示超越先前的內容
Z 軸向前(縮放穿透)深入同一個想法
Z 軸向後(反向縮放)抵達——某個更大的事物降臨
縮放爆發(向外爆炸)離開一個世界——一個平面衝向攝影機
  • 絕不連續在相反方向執行接縫——來回擺動會被解讀為錯誤。
  • 方向變更需要一個可見的原因(點擊/彈跳/撞擊)或一個章節邊界。

向量分類帳

在創作任何主要時間軸之前,將其寫入專案根目錄下的 ledger.json(schema:references/seam-gate.md)。每個接縫一行:剪輯時間、退場與進場向量(軸向 + 有正負號的方向;Z 軸行需攜帶縮放正負號)、選擇器、技術。退場與進場必須匹配;若某行不匹配,修正計畫,而非調整緩動曲線。驗證器會在進行任何運行時取樣之前,靜態地檢查列的一致性。

載體

眼睛追隨的是物體,而非抽象概念。最強的接縫會在剪輯點上,以匹配的位置和速度,傳遞一個具體的載體:一個正在移動中的遊標、一個縮小/停靠到下一個版面的容器、一個飛入其精確位置的標記、一個瀑布式剪輯的文字群。若無自然載體,則由場景主角來承擔(部分移動 + 早期淡出,進場時處於半空中)。絕不使用交叉淡出——它根本沒有載體。

因果運動

鏈結動作,使每個移動都能被上一個移動明顯觸發:點擊 → 擠壓 → 釋放彈簧 → 飛行 → 撞擊 → 反彈 → 揭示。

  • 效果從觸發的那一幀開始——在同一時間軸位置,絕非「不久之後」。
  • 反應的規模與隱含的質量成正比:大元素反彈較慢,小元素反彈較快。
  • 一個「力」是允許改變方向的許可;無原因的翻轉就是來回擺動。

接縫閘門(建構閘門——執行驗證器,回傳值為 0 否則接縫未完成)

node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html  # 生成
node <SKILL_DIR>/scripts/seam-gate.mjs verify --ledger ledger.json --project .  # 驗證

此腳本(用法 + 分類帳 schema:references/seam-gate.md)為每個接縫數值化地強制執行:分類帳列一致性、退場時仍在移動、進場時處於半空中(絕非從靜止開始)、測量方向 = 分類帳方向、進場/退場速度匹配(WARN)、零重疊(每幀僅一側可見——剪輯不是溶解)、Z 軸正負號規則(d(scale)/dt 在兩側具有相同正負號;進場場景自身的進入動畫也會被掃描是否有正負號衝突),以及包含祖先縮放的載體矩形連續性。在創作分類帳時,使用 seam-gate.mjs probe --t <cut> 來找出每個接縫真正的載體選擇器。

腳本無法檢查的規則——仍需由你負責:

  1. 編輯會重新打開接縫。 對場景首尾約 1 秒範圍內的任何更改(包括為了配合新的配音而重新計時)都會使該邊界的稽核失效——請重新執行驗證器。
  2. 音訊是時鐘。 根據配音的真實文字時間戳記來重新計時場景;絕不要為了符合時間槽而加快朗讀速度。配音重新生成會重新打開其接縫。
  3. 剪輯閘門陷阱(導致零重疊 FAIL 的常見原因):一個 data-start 早於其進場補間動畫的剪輯,會在初始不透明度下解除隱藏——請將初始值設為 autoAlpha: 0並且將 data-start 設為剪輯時間,絕不能更早。

第二部分 — 表現(場景持續演出)

禁止閒置晃動

禁止使用閒置的正弦循環(呼吸、漂浮、漂移、發光脈動)作為持續運動——它們傳達的資訊是「影片在等待」。一個場景在進場完成後還有數秒空白,是規劃上的錯誤:增加故事內容,而非晃動。進場與退場之間的每個階段都由以下其中一條路徑所擁有(在計畫中命名該路徑):

路徑內容
分階段揭示保留部分內容;在敘述節拍時將其呈現——框架持續獲得新資訊(適用於有 ≥2 個內容群組的場景)
有目的的鏡頭運動一個有規劃的縮放+平移路徑:建立全景 → 移動 → 到達主體
序列化 UI 生命產品隨時間演變:進度前進、高亮步驟、計數器跳動
動畫序列元素演出一個節拍:卡片歸檔成堆、項目被拖曳、結果組合而成
遊標引導的動作一個超大型遊標引導視線到觸發點;其「點擊」觸發下一個節拍(oversized-cursor)

測試:在任何一秒暫停——必須有意義非凡的事物處於移動中(一個揭示正在落地、鏡頭正在移動、UI 正在執行敘述所說的內容)。

高潮前的靜止

安排一個 0.3–0.75 秒的暫停,介於主要動作與其結果之間——這是戲劇性的逗號。直接從動作跳到結果的場景會失去此效果。

計時意圖

  • 單一進場 ≤ 約 800 毫秒;較長的鋪陳 = 多元素交錯,而非一個緩慢的元素。
  • 退場 ≈ 進場時間的 75%。例外:cut-the-curve 會反轉此比例(進場約為退場時間的 127%)。
  • 總交錯時間 ≤ 500 毫秒;若有 8 個以上元素,則縮短每個項目的延遲,或僅交錯前幾個元素。
  • 禁止使用的緩動曲線:bounce.out / elastic.out。進場的超調 back.out(1.4–1.7) 是可以的。
  • 相似的元素共享一個緩動曲線+持續時間的意圖——絕不為每個元素使用獨特的組合。

過渡詞彙表

每個影片僅使用 2–3 種場景間過渡並重複使用;預設的邊界是沿主流方向的 cut-the-curve。手寫的共享元素變形(intent: morph)不計入預算內。


反模式

不要這樣做應該這樣做
孤立地創作每個場景的進場先撰寫向量分類帳
在場景之間使用交叉淡出沿主流方向使用 cut-the-curve
退場完成,然後場景才改變在兩側的運動中間進行剪輯
剪輯後進場從靜止開始在假想路徑的 ≥50% 處進場
反向縮放退場 → 從小到大進場(或推入 → 過度縮小返回)匹配縮放速度的正負號(接縫閘門規則 7)
進場場景自身在 Z 軸接縫交接下的彈出式開場動畫保持其開場幀已組合好,或匹配正負號
使用閒置晃動/呼吸/漂浮來填充時間指定一個持續運動路徑;或增加故事內容
無原因的方向翻轉使用一個「力」,或保持主流方向
將保留向量當作多樣性使用預設使用主流方向;只在有意義時才使用保留向量
反應發生在其原因之後幾幀在同一幀觸發
動作直接跳到結果安排高潮前的靜止(0.3–0.75 秒)

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

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

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.

相關技能