一個訂閱,解鎖全部高階影片 Skill。隨時取消。檢視方案
Aurelle · 9:16

由此 Skill 渲染

正在播放卡 v1.0.0

一張 Spotify 風格的正在播放卡,帶你的封面、曲名和會動的進度條,直接疊在直式影片上。

暫無評分 0 次下載
格式
短影片 · 9:16
時長
0:05

免費 註冊帳戶即可免費使用

登入後下載

把這段話貼上給你的 Agent。它會在需要時連線 CLI,然後安裝 Skill。

一個免費的 HyperFrames 區塊,做 5 秒的 9:16 疊加畫面。一張霧面音樂卡升起,上面是大大的方形封面、曲名、演出者和一條往前跑的進度條,然後淡出。曲名、演出者和封面都在 HTML 裡修改;背景是透明的,方便疊加。

更新於 2026年11月3日

你將得到

  • 一段 5 秒、1080×1920、透明背景的卡片疊加畫面
  • 封面、曲名、演出者和動態進度條
  • 疊到你影片上的操作說明

適合

  • 活動主題曲和歌單
  • Podcast 和音樂宣傳
  • 限時動態和 Reels

不適合

  • 橫式影片
  • 長篇音樂影片

關於此 Skill

你只需說

/spotify-card 幫 Aurelle 的活動主題曲「Wear the Light」做一張正在播放卡,用手鍊疊戴照當封面,疊在我們的手鍊鏡頭上。

音樂卡一出現,大家馬上知道「這是配樂」。正在播放卡把你的活動主題曲、歌單或 Podcast 單集放在一張乾淨的動態卡片上,配上你的封面,讓直式影片能標註或宣傳這段聲音。

運作方式

  1. 提出需求:告訴助手曲名、演出者、封面圖,以及要疊在哪個鏡頭上。
  2. 填入:它把你的文案和顏色寫進區塊的變數,文字長度盡量貼近版面原本設計的長度。
  3. 算繪:它用 npx hyperframes render 算繪一版草稿,檢查幾格畫面,再算繪出最終的 MP4。
  4. 重複使用:變數都放在一個小小的 JSON 檔裡,下一個版本再算繪一次就好。

小訣竅

  • 用寬度至少 800 px 的方形封面。
  • 曲名只用幾個字,它會放得很大。
  • 卡片是透明背景,請帶 Alpha 通道算繪,再疊到你自己的影片或照片上;SKILL.md 裡有這兩道指令。
  • 我們的範例把平台 Logo 換成單純的「Now playing」標籤。

開源

這是 HyperFrames registry 裡的一個區塊,由 HeyGen 和 HyperFrames 貢獻者製作(heygen-com/hyperframes),以 Apache License 2.0 開源。下載內容包含區塊和它的素材,以及一份由 Reelity 撰寫的 SKILL.md,讓你的助手知道怎麼填寫和算繪;HyperFrames 本身從 npm 執行。

開始前需要準備

你需提供
一個曲名或單集名稱、演出者、一張方形封面,以及要疊上去的鏡頭。
依賴
Node.js 22 或更新版本——必要 · FFmpeg——必要
外部費用
沒有。HyperFrames 免費開源,在你自己的電腦上算繪。
最近測試
v1.0.0 —

使用者評價

還沒有評價。安裝這個 Skill,成為第一個評分的人。

常見問題

可以改顏色嗎?

可以。卡片和文字的顏色都是 HTML 裡的純 CSS。

會出現 Spotify 的 Logo 嗎?

原始套件保留了原本的小 Logo;我們的範例換成「Now playing」標籤,你的助手也能照做。

為什麼免費?

這是 HeyGen 和 HyperFrames 貢獻者做的開源 HyperFrames 區塊。我們原樣上架,附上 SKILL.md 讓你的助手直接上手,範例是用我們自家品牌 Aurelle 做的。

相關指南

How to add a now-playing music card to a vertical videoA music card tells viewers what they are hearing and where to find it. How to add a Spotify-style now-playing card with your artwork, free, with the Now Playing Card block.

相似 Skill

檢視全部