免費
Solenne · 16:9
由此 Skill 渲染
一個免費的 HyperFrames 區塊，做 8 秒的液態玻璃介面。兩張霧面通知卡在流動的極光著色器上緩緩飄入：一張顯示進行中、最後完成的任務，另一張是帶著輸入中圓點、Reply 和 Mark Read 按鈕的訊息，角落放上你的 Logo。文字、狀態訊息和 Logo 都在 HTML 裡修改。
更新於 2026年11月3日
你將得到
- 一支 8 秒、1920×1080 的 MP4，帶動態極光背景
- 兩張霧面通知卡，分別呈現進度和回覆狀態
- 角落放上你的 Logo
適合
- App 上市和新功能揭曉
- 帶有現代作業系統質感的產品影片
- 主題演講簡報的背景
不適合
- 素色或品牌色背景
- 很長的訊息
關於此 Skill
你只需說
/liquid-glass-notification 幫 Solenne 做液態玻璃通知：一張「Sunset scene」卡把客廳燈光調暗，最後顯示「Evening wind-down is on」；另一張是 Ines 傳來的訊息，請你把臥室調暖一點。
液態玻璃是當今作業系統的樣貌：霧面、會折射、充滿生命力。液態玻璃通知把你產品的通知換上這種風格，放在流動的極光上，讓一則更新、一筆訂單或一則訊息看起來既原生又高級。
運作方式
- 提出需求：告訴助手第一張卡在做什麼、完成時顯示什麼、第二張卡的訊息內容，以及你的 Logo。
- 填入：它把你的文案和顏色寫進區塊的變數，文字長度盡量貼近版面原本設計的長度。
- 算繪：它用
npx hyperframes render算繪一版草稿，檢查幾格畫面，再算繪出最終的 MP4。 - 重複使用：變數都放在一個小小的 JSON 檔裡，下一個版本再算繪一次就好。
小訣竅
- 用白色 Logo；它會放在色彩繽紛的背景上。
- 進度卡寫成正在發生的事。
- 每張卡只放一行短短的文字。
- 這個區塊沒有變數：助手會照著 SKILL.md，直接在 HTML 裡修改文字和數字。
開源
這是 HyperFrames registry 裡的一個區塊，由 HeyGen 和 HyperFrames 貢獻者製作（heygen-com/hyperframes），以 Apache License 2.0 開源。下載內容包含區塊和它的素材，以及一份由 Reelity 撰寫的 SKILL.md，讓你的助手知道怎麼填寫和算繪；HyperFrames 本身從 npm 執行。
開始前需要準備
- 你需提供
- 兩則簡短的通知文字、一個完成狀態和一個白色 Logo。
- 依賴
- Node.js 22 或更新版本——必要 · FFmpeg——必要
- 外部費用
- 沒有。HyperFrames 免費開源，在你自己的電腦上算繪。
- 最近測試
- v1.0.0 —
使用者評價
還沒有評價。安裝這個 Skill，成為第一個評分的人。
常見問題
極光的顏色可以改嗎？
著色器的顏色寫在程式碼裡，助手可以幫你調成品牌配色。
玻璃效果是真的，還是一張圖？
是真的：它用液態玻璃函式庫即時算繪，會折射後方流動的背景。
為什麼免費？
這是 HeyGen 和 HyperFrames 貢獻者做的開源 HyperFrames 區塊。我們原樣上架，附上 SKILL.md 讓你的助手直接上手，範例是用我們自家品牌 Solenne 做的。
