Communitygithub.com

hyperframes(影片合成工具)

HyperFrames 從 HTML 渲染影片,解析度與畫面率可調整,並支援可搜尋的動畫執行時間與框架擁有的媒體播放。

hyperframes(影片合成工具) 是什麼?

HyperFrames 是一個從 HTML 建立影片合成的工具。它的核心概念是「合成(composition)」——一個 HTML 檔案,其 DOM 元素透過 `data-*` 屬性宣告時間點,動畫執行時間可搜尋,媒體播放由框架控制。此技能是 HyperFrames 生態系的主要進入點,專為 AI 代理(如 Claude Code)設計,用於引導影片創作流程。它透過狀態優先表判斷應執行哪個動作:若偵測到現有 Remotion 專案,則引導至移植工作流程;若存在現有 HyperFrames 專案,則執行特定操作或編輯。對於全新創作,它會先進行意圖訪談以了解使用者的需求,然後根據目標交付物(如簡報、解釋影片或動態圖形)路由至對應的工作流程(例如 `/slideshow`、`/faceless-explainer`、`/motion-graphics`)。路由完成後,會安裝必要的工作流程技能(如 `/hyperframes-core` 用於合成結構、`/hyperframes-animation` 用於動畫規則、`/hyperframes-creative` 用於設計規劃)。此技能旨在讓 AI 代理能自動化處理創作初期的複雜決策,確保專案從明確的意圖摘要(`BRIEF.md`)開始,而不是反覆猜測。

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

在你喜歡的 AI 中提問

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

說明文件

HyperFrames 進入點

HyperFrames 從 HTML 渲染影片——一個合成(composition)即是一個 HTML 檔案,其 DOM 透過 data-* 屬性宣告時間點,動畫執行時間可搜尋,媒體播放由框架擁有。完整的創作合約位於 /hyperframes-core;在撰寫合成 HTML 之前,請先閱讀該文件。

1. 從專案狀態開始

套用第一個符合的列;不要評估較低順序的狀態列:

狀態動作
明確地將現有 Remotion 原始碼移植到 HyperFrames讀取 references/routes/remotion-to-hyperframes.md,然後直接路由至該工作流程。跳過意圖層。
對現有 HyperFrames 專案執行特定操作:檢查、診斷、驗證、預覽、渲染、發布或批次渲染僅執行該操作。跳過意圖和工作流程路由;載入 /hyperframes-cli 及任何必要的領域技能。
對現有專案執行特定編輯進行編輯。不要執行意圖層。
BRIEF.md 存在讀取 workflow 和 flow。執行該工作流程;flow: companion 始終在 /general-video 中執行。不詢問任何簡報問題。
無簡報,但 hyperframes.json 或 STORYBOARD.md 存在從專案檔案和記錄的偏好設定恢復。從現有工件推斷所屬的工作流程。如果無法唯一確定,則只問一個路由專用問題;不要執行意圖訪談。
全新創作執行意圖層——references/intent-interview.md——然後使用第 2 節的表格路由一次。

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

保持專案的 CLI 最新

一個被初始化的專案會在 package.json 的腳本中鎖定 hyperframes@<版本>,以確保渲染結果可重現;該鎖定不會自行更新,而使用舊版 CLI 進行鎖定運行時也不會顯示警告。當恢復一個腳本中帶有鎖定的專案時,請在執行第一個影響渲染的命令之前探測一次:

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

該探測是唯讀的,會報告鎖定版本與最新發行版的比較;請保留明確的 .——在較舊的 CLI 版本中,裸露的 --project 後接另一個旗標會將該旗標作為目錄值消耗。當它報告專案落後時——或者任何 CLI 輸出已經顯示(stderr 通知 此專案鎖定 hyperframes@…(最新 …),或者在鎖定腳本的 --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從 Pull Request 參考解釋 GitHub Pull Request 或程式碼變更/pr-to-video
8從 URL 或特定網站的簡報市場推廣或展示一個網站、產品網站、應用程式或公司/product-launch-video
9使用自創視覺效果解釋一個主題、文章或筆記,沒有產品或網站捕捉/faceless-explainer
10任何其他自訂影片或合成/general-video

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

解決常見歧義

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

3. 只路由一次,然後離開

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

4. 安裝並進入工作流程

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

npx hyperframes skills update <工作流程名稱>

使用裸名稱,不要加 /。如果命令失敗,請顯示錯誤;不要從記憶中重建工作流程。關於安裝的所有其他事項——核心與懶加載的區分、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
初始化、檢查、驗證、快照、比較、批次渲染、Studio、渲染、發布或診斷/hyperframes-cli
註冊表區塊和元件/hyperframes-registry
Figma 資產、令牌、元件或故事板影格,作為重建的動畫/figma

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

創作者請求所需領域
“剪輯這段素材”、硬剪輯、修剪、拼接、重新排序或使用來源範圍/general-video + /hyperframes-core;核心擁有 data-start、data-duration、data-media-start 和軌道佈局。
在此處放大、推近/推遠、平滑多狀態縮放或重新構圖、Ken Burns 效果或攝影機移動/general-video + /hyperframes-core + /hyperframes-keyframes;動畫內部視覺/裁切包裝器,而不是定時剪輯。
匹配剪輯或甩鏡攝影機轉場/general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry;在手動創作之前搜尋/安裝一個轉場基元。
淡入、淡出、交叉淡出、軌道增益/音量、自動化、閃避/剪輯或音效/general-video + /hyperframes-core + /hyperframes-audio;核心放置剪輯,音訊混合放置軌道。
結合剪輯與攝影機運動或混音的畫面和聲音編輯/general-video + /hyperframes-core + /hyperframes-keyframes(當有視覺運動時)+ /hyperframes-audio(當聲音被淡入淡出、混合、閃避、自動化或處理時)。
來源或生成媒體,或預處理不支援的速度斜坡/中間素材凍結/media-use;僅限來源/生成/預處理,永遠不會進行放置軌道混合。

固定的 data-playback-rate 對於畫面和音高保留的聲音是渲染安全的。它不會使來源速度斜坡成為可關鍵幀的;請預處理斜坡。 對於可複製的編輯合約,請載入 /hyperframes-core → references/creator-editing-recipes.md。

關於攝影媒體外觀或行為的廣泛反饋也會路由到 /media-use,即使用戶從未提到「調色」或「效果」

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

embedded-captions

>

faceless-explainer

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.

figma

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.

general-video

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

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.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

相關技能