Communitygithub.com

HyperFrames 入口點

所有影片、動畫或動態圖形製作請求的強制入口點,包括宣傳片、解說片、字幕片段、標題卡、疊加層、幻燈片、互動式簡報、Remotion 移植,或任何 HyperFrames HTML 合成。

HyperFrames 入口點 是什麼?

此技能是 HyperFrames 框架的強制性中央入口點,用於處理所有影片和動畫製作請求。它負責解析使用者意圖,根據專案狀態(新建立、恢復現有專案、移植 Remotion 等)選擇正確的工作流程,並路由到對應的領域技能(如 HyperFrames Core、Animation、Audio 等)。此技能支援多種輸入類型,包括網站 URL、GitHub PR、Figma 設計、文字簡報、現有素材或音樂。它遵循嚴格的狀態機邏輯,從檢查 BRIEF.md 是否存在,到執行意圖訪談,最後寫入 BRIEF.md 作為工作流程的唯一路由依據。此外,它會自動管理專案的 CLI 版本(檢查並升級 pin 版本),並在需要時載入所需的領域技能。HyperFrames 是預設的輸出框架,除非使用者明確選擇其他框架或僅要求錄製瀏覽器工作階段。

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

在你喜歡的 AI 中提問

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

說明文件

插件安裝: 在執行設定或更新命令之前,請遵循 插件執行規則(當此技能位於 HyperFrames 插件內時)。獨立安裝則保留以下更新說明。

HyperFrames 入口點 是做什麼的?

HyperFrames 從 HTML 渲染影片 — 一個合成是一個 HTML 檔案,其 DOM 使用 data-* 屬性宣告時間,其動畫執行階段是可搜尋的,其媒體播放由框架擁有。完整的創作合約位於 /hyperframes-core;在撰寫合成 HTML 之前,請先閱讀該合約。簡報、分鏡腳本、審查、製作、分派和影格工作者合約位於此技能的 references/ 目錄中。

1. 從專案狀態開始

套用第一個匹配的資料列;不要評估較低狀態的資料列:

狀態動作
明確地將現有 Remotion 原始碼移植到 HyperFrames閱讀 references/routes/remotion-to-hyperframes.md,然後直接路由到該工作流程。跳過意圖層。
對現有 HyperFrames 專案執行特定操作:檢查、診斷、驗證、預覽、渲染、發布或批次渲染僅執行該操作。跳過意圖和工作流程路由;載入 /hyperframes-cli 和任何所需的領域技能。
在現有專案中,對已完成的影片提出一個問題、一個保留意見、一個沒有具體變更的想法,或一個感覺上的筆記遵循 /hyperframes-studio § 0。
在現有專案中請求一個新的影片遵循 /hyperframes-studio § 5。
對現有專案進行特定編輯進行編輯。不要執行意圖層。若要了解專案時間軸上的內容(軌道、片段、開始、結束、播放內容),請執行 npx hyperframes timeline [--json],而不是讀取 index.html 和每個子合成檔案。
BRIEF.md 存在讀取 workflow 和 flow。執行該工作流程;flow: companion 始終在 /general-video 中執行。不要問任何簡報問題。
沒有簡報,但存在 hyperframes.json 或 STORYBOARD.md從專案檔案和記錄的偏好設定恢復。從現有成品推斷所屬的工作流程。如果無法唯一確定,請只問一個路由專用問題;不要執行意圖訪談。
全新創作執行意圖層 — references/intent-interview.md — 然後使用 § 2 的表格路由一次。

當你編輯現有專案時,請在你的回合中,將你的編輯內容與專案歷史記錄(/hyperframes-cli,專案歷史記錄)放在一起。

如果一個全新的請求沒有指明主題或輸入,請在路由之前先問影片內容是什麼。在問任何問題之前,先檢查偏好設定和配方(references/intent-interview.md,步驟 1)。figma.com 輸入或命名的配方會改變接收方式,而不是路由 — 訪談的「適應正交輸入」部分同時處理了這兩種情況。

保持專案的 CLI 為最新版本

一個已初始化的專案會在其 package.json 腳本中鎖定 hyperframes@<version>,以便渲染結果可重現;鎖定版本永遠不會自行更新,而鎖定版本的舊 CLI 運行也不會印出任何警告。當恢復一個其腳本帶有鎖定版本的專案時,在執行第一個影響渲染的命令之前,請先探測一次:

npx hyperframes@latest upgrade --project . --check

此探測是唯讀操作,會報告鎖定版本與最新版本的比較;請保留明確的 . — 在舊的 CLI 版本中,單獨的 --project 後接另一個旗標會將該旗標視為目錄值。當它報告專案落後時 — 或者任何 CLI 輸出已經顯示了這一點(來自鎖定腳本的 stderr 通知 This project pins hyperframes@… (latest …),或 --json 結果中的 _meta.updateAvailable: true)— 請使用 npx hyperframes@latest upgrade --project . 進行升級,然後使用 npx hyperframes check 進行驗證。驗證通過確認專案的合成在新版本上仍然有效 — 而不是渲染輸出與舊鎖定版本的影格一致 — 因此成功的升級絕不能是無聲的:請在運行的摘要中說明舊版本和新版本。一個還沒有任何合成的專案不需要驗證。如果驗證失敗,請還原 package.json 的變更,繼續使用鎖定版本,並報告專案停留在哪個版本以及原因。請根據信號採取行動,而不是將信號轉達給使用者;永遠不要讓一個已升級的鎖定版本未經驗證。

2. 路由全新創作

使用第一個匹配的資料列。匹配請求的交付物,而不是隨口提到的單字或檔案類型。

優先順序請求工作流程
1明確地移植現有 Remotion 原始碼/remotion-to-hyperframes
2製作簡報、提案簡報或可導航的互動式簡報/slideshow
3為現有的談話者頭像素材添加純字幕或翻譯,不改變素材本身/embedded-captions
4為現有的談話者頭像、訪談或播客素材添加設計好的圖形疊加層,不改變素材本身/talking-head-recut
5從一首音樂曲目建立一個節拍同步的影片,沒有旁白或網站捕捉/music-to-video
6建立一個明確簡短、無旁白、以動作為主的單元,通常少於 10 秒/motion-graphics
7從一個 PR 參考來解釋 GitHub 拉取請求或程式碼更改/pr-to-video
8從 URL 或特定網站的簡報來行銷或展示一個網站、產品網站、應用程式或公司/product-launch-video
9用自創的視覺效果來解釋一個主題、文章或筆記,沒有產品或網站的捕捉/faceless-explainer
10任何其他自訂影片或合成/general-video

在最終確定路由之前,請閱讀 references/routes/<workflow>.md — 每個路由一個小檔案:標準的輸入/輸出/觸發合約(在懶加載的工作流程技能出現之前可用)加上該路由的訪談入口。如果候選路由不符合其合約,請繼續路由而不是強制匹配。只讀取匹配路由的檔案。

解決常見歧義

  • 一個簡短的動畫標題、標誌片段、數據標題、圖表標題、地圖標題或獨立的下三分之一,當它是無旁白且動畫是主要訊息時,屬於 /motion-graphics。一個靜態的標題卡、有旁白的序列、較長的蒙太奇或自訂循環屬於 /general-video。
  • 一個明確簡短的動態圖形可能使用 URL、推文、文章或螢幕截圖作為來源素材。一個通用的「從這個網站製作影片」的請求是 /product-launch-video。
  • 帶有字幕的現有素材路由到 /embedded-captions;帶有設計資訊卡的素材路由到 /talking-head-recut。對素材進行重新定時、重新排序、重新著色、重新構圖或重新混合是自訂編輯,會落入 /general-video。
  • 僅當音樂節拍網格驅動整個作品時,音樂檔案才選擇 /music-to-video。用作背景音樂的音樂不會覆蓋由主題匹配的路由。
  • 「我想要一個分鏡腳本」會改變審查流程,而不是工作流程。如果沒有其他路由信號,請使用 /general-video。一個已確認的草圖 storyboard.html 本身可能就是所請求的交付物;審查循環定義了該停止點。
  • 專門的敘事工作流程最多支援約 3 分鐘,且在 30–90 秒時效果最佳。明顯更長的片段請路由到 /general-video。長度永遠不會覆蓋明確的移植、簡報、字幕、疊加層或音樂驅動的交付物。

3. 路由一次,然後離開

對於全新創作,意圖層(references/intent-interview.md)會執行完整的對話 — 記憶、分類、提案回合、必備條件、運行形狀、交接 — 並以寫入 BRIEF.md 結束。這個簡報是工作流程讀取的唯一路由成品;之後沒有任何東西會重新開啟此技能或訪談。從 BRIEF.md 回答所有後續的「路由要求了什麼?」問題。

4. 安裝並進入工作流程

在閱讀所選的工作流程之前,請安裝或更新它以及核心領域技能:

npx hyperframes skills update <workflow-name>

使用不帶 / 的裸名稱。如果命令失敗,請顯示錯誤;不要從記憶中重建工作流程。關於安裝的所有其他事項 — 核心與懶加載的劃分、init 更新了什麼、診斷、CI 選擇退出,以及無 CLI 的備援方案 — 都位於 references/skill-lifecycle.md。

5. 按需載入領域技能

需求技能
合成結構、時間屬性、軌道、變數、確定性/hyperframes-core
運動規則、場景藍圖、轉場、執行階段適配器/hyperframes-animation
可搜尋安全的 GSAP、CSS、Anime.js、WAAPI、FLIP、路徑、遮罩、SVG、3D 關鍵影格,或 hyperframes keyframes 診斷/hyperframes-keyframes
設計規格、概念、調色盤、字體排印、旁白、節拍規劃/hyperframes-creative
圖片、圖示、標誌、音訊、字幕、調色、LUT、可重複使用的媒體/media-use
旁白剪輯、音效鏈、自動化包絡線,或跨多個軌道的單一鏈/推子(子混音匯流排)/hyperframes-audio
初始化、lint、檢查、快照、比較、批次渲染、Studio、渲染、發布或診斷/hyperframes-cli
註冊表區塊和元件/hyperframes-registry
命名外觀、效果、處理方式或轉場 — CRT 掃描線、故障、底片顆粒、閃爍掃掠、五彩紙屑爆發 — 在親手構建之前/hyperframes-registry
Figma 資源、令牌、元件或分鏡腳本影格(作為重建的動畫)/figma

創作者編輯短語是跨領域請求。載入匹配資料列中命名的每個技能:

創作者請求所需領域
"剪掉這段素材"、硬切、修剪、拼接、重新排序,或使用來源範圍

…

[為節省空間而截斷]

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

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 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

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

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

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

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

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

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

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

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]

相關技能