hyperframes
用 HTML 寫內容，輸出成影片。為 agent 設計。
★ 7.7 萬27 個 skill授權 Apache-2.0最近更新 2026-11-02
到 GitHub 看專案/hyperframes-cli依工作分類的 HyperFrames CLI：建立骨架、檢查、看畫面、編輯時間軸、預覽、本機或雲端渲染、發佈、專案歷史，並說明如何讀 JSON 與從建置或渲染失敗中復原。做檔案140 萬/hyperframes製作、編輯、動畫或渲染任何 HyperFrames（HTML 渲染成影片）影片之前先讀。涵蓋發表影片、解說、音樂影片、圖表、地圖、直式短片、標題卡、字幕與疊圖。內含渲染規範與工作流程。做檔案130 萬/media-use為 HyperFrames 影片取得或製作任何媒體：音樂、音效、圖片、圖示、logo、旁白、虛擬人物與生成影片、逐字稿、去背、調色。可用 HeyGen 或免費本機工具，並可混音已放置的音訊。做檔案120 萬/hyperframes-registry約 450 個現成的 HyperFrames block 與元件，以可編輯原始碼安裝：轉場、疊圖、標題、動態文字、字幕、圖表、地圖疊圖、3D、鏡頭運動。手工做任何有名稱的視覺效果之前先用它。動畫與介面手感110 萬/remotion-to-hyperframes把既有的影片程式或素材帶進 HyperFrames，並逐格對照原始版本驗證。以 Remotion 為主，也支援 Motion Canvas、Lottie、Three.js、p5.js、canvas、純 HTML/CSS 動畫，以及 Manim、After Effects 或 Blender 的渲染結果。做檔案55.5 萬/slideshow建立可現場簡報的 HyperFrames 投影片：投影片、分段顯示、分支熱點，以及附講者備忘稿的簡報者模式，由 `hyperframes present` 提供；或把既有頁面轉成投影片。使用者要簡報而非渲染影片時使用。做檔案46.2 萬/figma把 Figma 帶進 HyperFrames 影片：渲染素材、品牌 token、元件、重建為動態的分鏡畫面、shader 與連接器輔助的動態。使用者貼 figma.com 連結，或要用 Figma 設計、畫面、logo 或品牌時使用。視覺與設計37.5 萬/canopy-part-title樹葉掃過畫面並分開，露出標題。HyperFrames block，1920×1080，12 秒，11 個變數。動畫與介面手感1.1 萬/code-slice-hero一片拼貼的標題表面在掃過的景深場下逐格翻轉，露出後方標題。HyperFrames block，1920×1080，8 秒，18 個變數。動畫與介面手感1.1 萬/cuboid-carousel一串倒角長方體隨行進波運動，作為內容輪播。HyperFrames block，1920×1080，約 6.67 秒，40 個變數。動畫與介面手感1.1 萬/frost-sequence-camera-orbit環繞的鏡頭跟著冰製標誌碎裂，重組成兩段文字，然後淡出。HyperFrames block，1920×1080，22.5 秒，216 個變數。動畫與介面手感1.1 萬/glass-shard-title玻璃碎片穿過霧氣飛入，拼成標題。HyperFrames block，1920×1080，12.16 秒，19 個變數。動畫與介面手感1.1 萬/orbit-card單張功能卡片依核准的 Blender 鏡頭運動，繞著點狀球體旋轉。HyperFrames block，1920×1080，10 秒，4 個變數。動畫與介面手感1.1 萬/wireframe-portal-title線框傳送門爆開，標題穿過，然後字母換成第二句話。HyperFrames block，1920×1080，8 秒，9 個變數。動畫與介面手感1.1 萬/captions-overlayHyperFrames 影片字幕的疊加準則：字幕模型（drop / rail / embed），以及字幕是疊在影片上的 overlay，不是為了避開而預留的底部色帶。為談話影片或發表影片加字幕時載入。動畫與介面手感/captions-overlay-skillsHyperFrames 影片字幕的疊加準則：字幕模型（drop / rail / embed），以及字幕是疊在影片上的 overlay，不是為了避開而預留的底部色帶。為談話影片或發表影片加字幕時載入。動畫與介面手感/changelog-video把每週的 changelog .md 做成完成的品牌 changelog 影片（正方形 1080、約 45 到 60 秒、Annie 旁白、動態品牌背景、模擬 UI 視覺化、低調字幕）。使用者提供 changelog 摘要 markdown 並要每週影片時使用。做檔案/changelog-video-skills把每週的 changelog .md 做成完成的品牌 changelog 影片（正方形 1080、約 45 到 60 秒、Annie 旁白、動態品牌背景、模擬 UI 視覺化、低調字幕）。使用者提供 changelog 摘要 markdown 並要每週影片時使用。做檔案/cut-the-curve技巧目錄：五種速度對齊的轉場接縫（zoom-through、INVERSE zoom-through、cut-the-curve、waterfall cut、rack-focus blur-cut），加上兩種場景內技巧：waterfall ENTRY 與 nudge curve。動畫與介面手感/cut-the-curve-skills技巧目錄：五種速度對齊的轉場接縫（zoom-through、INVERSE zoom-through、cut-the-curve、waterfall cut、rack-focus blur-cut），加上兩種場景內技巧：waterfall ENTRY 與 nudge curve。動畫與介面手感/motion-doctrineGATEWAY：組合任何 HyperFrames 動畫或影片之前先載入。高層次的動態法則，讓多場景影片像一個連續的鏡頭運動，而不是一疊各自動畫的投影片。動畫與介面手感/motion-doctrine-skillsGATEWAY：組合任何 HyperFrames 動畫或影片之前先載入。高層次的動態法則，讓多場景影片像一個連續的鏡頭運動，而不是一疊各自動畫的投影片。動畫與介面手感/oversized-cursorHyperFrames 發表影片用的特大 macOS 游標技巧（品牌風格）。場景含游標或以指標引導的動作、開始 UI 場景、用點擊觸發轉變、轉場或打字，或場景看起來靜態呆板時載入。動畫與介面手感/oversized-cursor-skillsHyperFrames 發表影片用的特大 macOS 游標技巧（品牌風格）。場景含游標或以指標引導的動作、開始 UI 場景、用點擊觸發轉變、轉場或打字，或場景看起來靜態呆板時載入。動畫與介面手感/reverse-any-video把任何影片檔重建成可編輯的 HyperFrames 專案：動態圖形、談話影片、實拍或 AI 生成的素材。量測並觀看影片、重建每一層，再逐格對照原始影片檢查渲染結果。做檔案/seam-craftHyperFrames 發表影片場景間接縫的渲染正確性準則：讓轉場在主時間軸上正確合成的前提。組裝主時間軸或 index.html，或剪接與淡入淡出處出現白閃時載入。動畫與介面手感/seam-craft-skillsHyperFrames 發表影片場景間接縫的渲染正確性準則：讓轉場在主時間軸上正確合成的前提。組裝主時間軸或 index.html，或剪接與淡入淡出處出現白閃時載入。動畫與介面手感沒有符合的 skill