hyperframes-registry
將 HyperFrames 區塊和元件添加到影片中
將動畫區塊和視覺元件添加到影片合成需要知道精確的檔案路徑、連接屬性以及時間軸整合。此技能提供引導式工作流程和實際範例，幫助安裝、連接和自訂 HyperFrames 登錄項目。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「hyperframes-registry」。 將 grain-overlay 元件添加到我的影片
預期結果:
要新增 grain-overlay：執行 `hyperframes add grain-overlay`。開啟 `compositions/components/grain-overlay.html`，將 HTML div 複製到你的舞台，貼上 CSS keyframes，並將 class 新增到你主合成的 style 區塊中。顆粒效果會透過 CSS @keyframes 自動播放動畫。
正在使用「hyperframes-registry」。 在 5s 開始連接 flowchart 區塊
預期結果:
要連接 flowchart 區塊：新增一個 div，包含 `data-composition-src="compositions/flowchart.html"`、`data-composition-id="flowchart"`、`data-start="5"`、`data-duration="12"`、`data-track-index="1"`，以及你的畫布尺寸（例如 1920x1080）。
安全審計
安全All 174 static findings are false positives. The skill uses markdown code blocks containing CLI command examples (hyperframes add, lint, preview). Hardcoded URLs point to legitimate HyperFrames GitHub registry and official CDNs. No command injection, data exfiltration, or malicious patterns detected. This is a legitimate open-source AI skill for video rendering composition authoring.
風險因素
⚙️ 外部命令 (8)
偵測到的模式
品質評分
你能建構什麼
將動態圖表添加到簡報影片中
添加 data-chart 區塊以在商業簡報影片中顯示動態長條圖和折線圖。使用 CSS 將圖表定位在特定的螢幕區域。
為標題文字添加視覺效果
安裝 shimmer-sweep 元件，為品牌影片中的標題文字添加光線掃過效果。
建立多場景影片轉場效果
安裝 grid-pixelate-wipe 元件，建立影片場景之間的動態網格轉場效果。
試試這些提示
使用 hyperframes add 將 {block_name} 區塊安裝到我的 HyperFrames 專案中。將 {component_name} 元件新增到我的合成中以建立 {effect_type} 效果。將 data-chart 區塊連接到我的 index.html，使其在 {time}s 開始出現，持續 {duration}s，位於軌道 {index} 上。顯示 HyperFrames 登錄中所有可用的區塊和元件。我想要為我的影片添加 {filter_type} 效果。最佳實務
- 連接後執行 hyperframes lint，以在預覽前發現結構問題
- 將區塊尺寸（data-width、data-height）與你的合成畫布匹配，以獲得正確的縮放比例
- 閱讀已安裝元件檔案中的註解標頭，以了解可自訂的值，如顏色和時間
避免
- 不要手動複製區塊 HTML 檔案而不使用 hyperframes add - 會跳過來自 hyperframes.json 的路徑重新對應
- 如果你打算從登錄更新，請避免直接修改已安裝的區塊檔案 - 改用 CSS 覆蓋來進行自訂
- 連接區塊時不要省略 data-composition-id 屬性 - 執行階段使用此屬性來定位合成