懶人包
- Folia 是開源音樂播放器（GitHub
chthollyphile/folia-major，AGPL-3.0），主打全螢幕歌詞動畫。2026-10-26 查到 9,424 顆星，最新穩定版是 2026-10-23 的 v0.7.22。- 內建 15 種歌詞動畫模式，從大字疊層、斜排字帶、像素花火到 three.js 的 3D 場景都有。我在本機把 15 種全部跑過，截圖時頁面 JS 錯誤數是 0。
- 不用帳號也能看動畫：專案自帶
dev-probe.html探針頁，用合成的逐字歌詞驅動單一模式。npm ci --ignore-scripts裝 1171 個套件花 7 分鐘，Vite 1.7 秒就開好。- 每個模式是
src/components/visualizer/底下一個資料夾，registry.tsx用import.meta.glob自動收進來。渲染技術依模式分成 DOM 加 framer-motion、PixiJS 與 three.js 三類。- 自己聽歌直接裝 Releases 的安裝包就好，Windows、Mac、Linux 都有。AGPL 加上非官方音源 API，不適合放進公司產品。
Threads 上有一則貼文寫「在陸抖發現一個屌的音樂播放器，重點 windows Mac 都能用」，4.0K 讚、247 次轉發，但貼文沒寫軟體名稱。我從預覽圖的大字疊層歌詞找到它是開源專案 Folia，接著把原始碼 clone 下來，在本機把 15 種歌詞動畫全部跑了一遍。這篇整理它是什麼、動畫長怎樣、怎麼在本機跑，以及原始碼怎麼組織這 15 種模式。
Folia 是什麼？
Folia 是一台以歌詞動畫為主角的音樂播放器。GitHub 上的專案描述是「专注于绚丽的歌词动画效果的本地音乐/navidrome/第三方多平台在线音乐播放器」，README 形容它的歌詞是「如同文字PV般的丰富视觉效果」。
| 項目 | 內容（2026-10-26 查） |
|---|---|
| Repo | chthollyphile/folia-major |
| 授權 | AGPL-3.0 |
| 星數 | 9,424 stars、996 forks |
| 建立時間 | 2025-11-28 |
| 最新穩定版 | v0.7.22（2026-10-23），另有更新的 alpha 預覽版 |
| 技術 | TypeScript、React 19、Electron 43、Vite 8 |
| 形態 | Windows／macOS／Linux 桌面版、Node.js Web 版、行動裝置走 PWA |
| 音源 | 網易雲、酷狗、QQ 音樂、Navidrome、本機音樂；桌面版另可接波點、YouTube Music、Spotify、汽水 |
| 歌詞格式 | .lrc、.vtt、.ttml、.qrc、.yrc、.krc |
一般播放器的歌詞是一行行往上滾的清單。Folia 把每一句歌詞當成一個排版畫面，字的大小、位置、出場方式都跟著逐字時間軸走。錄下來的畫面本身就像一支歌詞 MV，這也是 Threads 那則貼文的預覽圖一眼就能認出來的原因。
15 種歌詞動畫長怎樣？
下圖是我在本機跑出來的 15 種模式，每格都是同一個探針頁換 vis 參數，跑 6 秒後截圖。截圖裡的句子是 repo 測試檔 dev/probes/visualizerMemory.probe.tsx 內建的合成句（例如「迷失在无边际这幽深的森林」），不是任何歌曲的歌詞。
模式的中文名以原始碼 src/i18n/locales/zh-CN.ts 為準，下表的畫面說明是我依截圖寫的，不是官方描述：
| 模式 | 代號 | 截圖裡看到的畫面 | 渲染方式 |
|---|---|---|---|
| 流光 | classic | 逐字發光滑入，是預設模式 | DOM／Canvas 2D |
| 心象 | cadenza | 單字錯落排列，重點字放大 | DOM／Canvas 2D |
| 云阶 | partita | 字詞分成階梯排列 | DOM／Canvas 2D |
| 浮名 | fume | 超大字疊成好幾層，溢出畫面邊緣，搭配高亮色塊 | DOM／Canvas 2D |
| 莫奈 | monet | 側邊資訊卡加上歌詞列表 | DOM／Canvas 2D |
| 群唱 | cappella | 對話泡泡式的多人合唱 | DOM／Canvas 2D |
| 倾诉 | tilt | 字級大小與傾斜角度逐字變化 | DOM／Canvas 2D |
| 回环 | claddagh | 斜向延伸的文字帶 | DOM／Canvas 2D |
| 镜台 | diorama | 歌詞周圍漂浮線框與點雲的 3D 形體 | three.js |
| 时计 | pendolo | 齒輪錶盤背景 | DOM／Canvas 2D |
| 商籁 | sonnet | 字散布在框線構圖裡 | PixiJS |
| 凝彩 | tempera | 只露出重點字，兩側遮罩 | PixiJS |
| 绘光 | lumiere | 光束與暗場聚光 | PixiJS |
| 花火 | hanabi | 彩色像素與霓虹方塊，字以傾斜磚塊出場 | PixiJS |
| 静止 | still | 純文字列表，不做動畫 | DOM／Canvas 2D |
diorama 引入 three.js，hanabi、lumiere、sonnet、tempera 引入 PixiJS，其餘十個模式用 DOM 或 Canvas 2D 加上 framer-motion。
最有代表性的是浮名（fume）。一句歌詞拆成好幾層大字，最上層的字放大到超出畫面，當下唱到的字用色塊標出來：
花火（hanabi）是 PixiJS 畫的，字被做成傾斜的磚塊，周圍是彩色像素方塊：
镜台（diorama）是唯一用 three.js 的模式，歌詞旁邊漂著線框和點雲組成的立體形狀：
15 張單張截圖整理成畫廊頁放在 html.yanchen.app/folia-lyrics，可以一張張放大看。
不用音樂帳號，怎麼在本機看到這些動畫？
正式的播放器要登入音源帳號才有歌可放。我只想看動畫本身，所以改用專案自帶的探針頁 dev-probe.html。它的 visualizerMemory 探針會產生合成的中文逐字歌詞，直接驅動單一歌詞動畫模式，不需要帳號，也不打任何後端 API。
前置需求是 Node.js 24 以上（package.json 寫 "node": ">=24.0.0"），我用的是 v24.11.1。
git clone --depth 1 https://github.com/chthollyphile/folia-major.git
cd folia-major
npm ci --ignore-scripts
npx vite --port 3000--ignore-scripts 讓 npm 不執行套件的 lifecycle 腳本，只跑 Web 版的話用不到 Electron 的安裝步驟。實際結果：
| 步驟 | 結果 |
|---|---|
npm ci --ignore-scripts | 1171 個套件，約 7 分鐘，exit 0 |
npx vite --port 3000 | Vite 8.3.1，1.7 秒 ready |
| 本機 clone 的 commit | 1f6d0f4（2026-10-23） |
vis 換成表格裡的代號就是另一種模式：
http://localhost:3000/dev-probe.html?probe=visualizerMemory&vis=fume&cjk=1&speed=1&lines=40&start=7&meta=1| 參數 | 作用 |
|---|---|
vis | 要看的模式代號，例如 fume、hanabi、diorama |
cjk=1 | 用中文合成句，每個字用 Intl.Segmenter 切開後各自給時間 |
lines=40 | 合成 40 句歌詞 |
start=7 | 從第 7 秒開始播 |
speed=1 | 時間軸速度 |
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
const errors = [];
page.on('pageerror', e => errors.push(e.message));
for (const mode of modes) {
const url = `http://localhost:3000/dev-probe.html?probe=visualizerMemory&vis=${mode}&cjk=1&speed=1&lines=40&start=7&meta=1`;
await page.goto(url, { waitUntil: 'networkidle', timeout: 90000 });
await page.waitForTimeout(6000);
await page.screenshot({ path: `shots/folia-${mode}.png` });
console.log('shot', mode);
}
console.log('pageerrors', errors.length);實際輸出是 15 行 shot <mode>，最後一行 pageerrors 0，15 種模式都沒有頁面 JS 錯誤。
15 種歌詞動畫在原始碼裡怎麼組織？
所有模式都在 src/components/visualizer/ 底下，一個模式一個資料夾。以浮名為例，fume/ 有 18 個檔，入口 entry.tsx、參數 tuning.ts、鏡頭 fumeCamera.ts、舞台 fumeStage.ts、渲染元件 VisualizerFume.tsx 各自分開。
模式不需要手動註冊。registry.tsx 第 15 行用 Vite 的 glob import 把所有資料夾的入口一次收進來：
import.meta.glob('./*/entry.tsx', { eager: true })每個 entry.tsx 預設匯出一份 defineVisualizer({...})，裡面有模式代號、排序、i18n 名稱、預覽種子、背景設定、渲染函式，以及設定面板與快捷控制。渲染元件用 React.lazy 包起來，沒選到的模式不會先載入。
registry 收集完會跟 src/types/visualizerModes.ts 的 BUILTIN_VISUALIZER_MODES 清單比對，那份清單剛好是 15 個代號。資料夾和清單對不上就直接丟錯，多一個或少一個模式在開發階段就會被抓到。啟動比較慢的模式可以用 useFirstFrameDrawn() 等第一格畫完再顯示。
整條執行路徑是：
VisualizerRenderer → registry.tsx → backgrounds → applyVisualizerTuning → VisualizerBackdrop → 各模式 renderer想學「逐字時間軸驅動排版動畫」，這個結構可以直接參考：新增一種模式只要加一個資料夾和一個代號，探針頁就能單獨測它，不必接整台播放器。
自己聽歌要裝哪個版本？
只是要用，直接到 GitHub Releases 下載安裝包，不用自己 build。v0.7.22 提供的檔案有：
| 平台 | 檔案 |
|---|---|
| Windows | Folia-Setup-0.7.22.exe |
| macOS（Apple Silicon／Intel） | Folia-0.7.22-arm64.dmg、Folia-0.7.22-x64.dmg（另有 .zip） |
| Linux | .deb、.rpm、.tar.gz |
folia-major-bin、Flatpak、Docker，以及把 Web 版部署到 Vercel 或 Cloudflare 的做法。手機沒有原生 App，走 PWA，Android 有社群移植版。
10 月 GitHub 上也出現一批以它為基礎的專案，例如 Folia-Android、LX Music 加 Folia 歌詞、KinaraMusic、Folia-Plain、波點音源模組，還有給 AI agent 用的 folia-control-super skill。
授權與限制有哪些？
- AGPL-3.0：修改後對外提供服務就要公開原始碼。加上 README 寫明「请勿将其用于商业盈利用途」，以及音源走的是非官方 API，它適合個人使用與學習，不適合放進公司產品。
- 我只測了動畫本身：截圖全部來自探針頁的合成句。真實音源、登入帳號後的播放、AI 配色主題都沒測，因為需要音樂帳號和 API key。
- 桌面版沒有實裝：這次跑的是 Web 版 dev server，Electron 桌面版的效能和音源整合沒有驗證。
- 版本變動快：v0.7.22 之後已經有 alpha 預覽版，模式數量和參數以你下載當下的版本為準。
延伸資源
- 原始碼：github.com/chthollyphile/folia-major
- 15 種模式畫廊：html.yanchen.app/folia-lyrics
- 找到這個專案的 Threads 貼文：threads.com/share/BAERup6VQc
- 想讓 Claude 用對動畫術語，可以看動畫詞彙 skill 這篇
FAQ
Folia 是免費的嗎？
是。Folia 以 AGPL-3.0 開源，GitHub Releases 上的安裝包可以免費下載。README 寫明僅供個人學習、技術交流與非營利測試使用。
Folia 支援哪些平台？
桌面版有 Windows、macOS（Apple Silicon 與 Intel）、Linux。另有可自架的 Node.js Web 版，手機走 PWA，Android 有社群移植版。
沒有網易雲或 QQ 音樂帳號能用嗎？
可以播本機音樂或接自架的 Navidrome。只想看歌詞動畫的話，可以照本文用原始碼的 dev-probe.html 探針頁，它用合成歌詞驅動，不需要任何帳號。
Folia 有幾種歌詞動畫？
v0.7.22 內建 15 種：流光、心象、云阶、浮名、莫奈、群唱、倾诉、回环、镜台、时计、商籁、凝彩、绘光、花火、静止。清單定義在 src/types/visualizerModes.ts。