不用自己寫 Shader，也能做出液體、玻璃與粒子效果！Canvas UI 讓網頁特效一行指令就能裝上

以前想在網站加入液體流動、玻璃折射、粒子散開或火焰燃燒等效果，通常需要自己研究 WebGL、GLSL Shader、Three.js，還得處理效能、滑鼠互動與瀏覽器相容性。

光是讓一段文字產生水波效果，就可能需要寫上大量程式碼。

但現在，一個名為 Canvas UI 的開源元件庫，正試圖把這些原本只有創意開發者才能完成的效果，變成可以直接複製到專案中的 UI 元件。

開發者只要選擇特效、執行一行指令，就能把液體、玻璃、火焰、粒子甚至 VHS 故障效果放進自己的網站裡。

Canvas UI 可以讓 WebGL 直接作用在真正的 HTML 元素上，讓文字、按鈕與圖片在保有互動功能的同時，能被火焰、液體與玻璃效果即時扭曲。

一、Canvas UI 是什麼？

Canvas UI 是一套開源的 Canvas 與 WebGL 網頁元件庫，不需要從頭建立 Shader安裝一套龐大的動畫框架，只要找到想使用的效果，再透過 Shadcn CLI 將元件原始碼加入專案，就能直接開始修改。

目前官方提供超過 25 種視覺元件，包括：

• Liquid：滑鼠驅動的液體流動效果
• Glass：跟隨游標移動的玻璃折射鏡片
• Blaze：火花、煙霧與熱浪扭曲效果
• Particle Reveal：讓畫面由粒子重新聚合成清晰介面
• Shatter：把 HTML 畫面打碎成漂浮的 3D 玻璃碎片
• Ripple：點擊畫面時產生水波折射
• Frost：游標經過時融化的結霜玻璃
• VHS：類比錄影帶雜訊、色彩偏移與畫面撕裂效果

除此之外，還有雨滴、布料、雲霧、像素化、放大鏡、雷射揭露與 3D 粒子模型等不同效果。

二、真正特別的地方：WebGL 可以直接影響 HTML

一般的 WebGL 動畫通常會被放在獨立的 Canvas 畫布裡。

畫布裡的內容雖然可以做出非常自由的視覺效果，卻不是一般的 HTML 元素。裡面的文字通常無法直接選取，按鈕也不一定具有原生的點擊與無障礙功能。

Canvas UI 則大量使用一項仍在實驗階段的 HTML-in-Canvas API。

這項技術能讓 Canvas 讀取並繪製即時的 DOM 內容，再把整個網頁介面轉換成 WebGL Shader 可以取樣與扭曲的材質。

簡單來說，網頁上的標題、圖片與按鈕依然是真正的 HTML：

• 文字仍然可以被選取
• 連結仍然可以點擊
• 按鈕仍然具有互動功能
• 畫面上方可以疊加即時 WebGL 效果

過去開發者可能需要先將 DOM 截圖，再把圖片放進 Canvas 裡處理；現在則可以直接讓 Shader 作用在正在運作的網頁介面上。

這也是為什麼 Canvas UI 能做出玻璃折射文字、液體扭曲介面，以及把整個網站碎裂成 3D 玻璃等效果。

三、一行指令，就能把特效放進專案

Canvas UI 採用與 Shadcn 相容的 Registry 機制。

以 Asciify 效果為例，只需要在專案中執行：

npx shadcn@latest add @canvas-ui/asciify-react

元件原始碼就會被加入專案中的 components/canvasui 資料夾。

這種方式和傳統安裝 npm 套件不同。

Canvas UI 並不是把元件封裝在一個無法修改的依賴套件裡，而是直接把完整程式碼複製到你的專案。

因此開發者可以：

• 查看完整實作方式
• 修改 Shader 與動畫參數
• 調整顏色、速度與互動範圍
• 移除不需要的程式碼
• 自行管理與鎖定版本

四、不只支援 React，六種前端環境都能使用

雖然安裝方式看起來很像 React 元件庫，但 Canvas UI 並不只支援 React。目前每一個效果都提供六種版本：

• React
• Solid
• Preact
• Vue
• Svelte
• Vanilla TypeScript

不同版本使用相同的核心引擎與參數設定，開發者只需要選擇自己使用的框架即可。

五、也能直接叫 AI 幫你安裝元件

Canvas UI 另一個值得注意的設計，是它從一開始就考慮到 AI Agent 的使用方式。

由於 Canvas UI 採用 Shadcn 相容的 Registry，開發者可以透過 Shadcn MCP Server，讓 Claude Code 等 AI 程式工具讀取元件清單、查看元件資訊，並直接安裝到專案裡。

完成 MCP 設定後，開發者可以直接對 AI 說：

幫我的首頁 Hero Section 加入 Liquid 效果。

AI 就能查詢 Canvas UI Registry、找到對應元件並執行安裝。

這代表未來使用 UI 元件庫時，開發者可能連官方文件都不需要逐頁查找。

只要描述想要的畫面，AI Agent 就能協助選擇元件、加入程式碼，再根據網站的設計繼續修改參數。

六、Canvas UI 適合拿來做什麼？

Canvas UI 最適合的並不是每一個網站，而是需要強烈視覺記憶點的頁面。

1. 產品 Landing Page

SaaS、AI 工具或創意產品，可以在首頁首屏加入 Liquid、Glass 或 Particle Reveal，讓產品發表頁更有動態感。

2. 個人作品集

設計師、創意開發者與 3D 藝術家的作品集，可以利用 Shatter、Cloth 或 Dithered Object 展示技術能力。

3. 品牌活動網站

音樂活動、遊戲、電影與科技品牌，可以使用 VHS、Glitch、Laser 或 Blaze 建立更強烈的視覺氛圍。

4. 圖片與文字互動

Glass、Magnify 與 Asciify 可以讓使用者透過滑鼠探索畫面，適合用在作品展示、產品細節與互動式故事。

5. AI 生成網站

對使用 Claude Code、Cursor 或其他 AI Coding Agent 的開發者而言，Canvas UI 的 Registry 與 MCP 架構，能讓 AI 更容易搜尋並加入複雜的視覺元件。

不過，這類效果最好集中使用在首頁主視覺、作品展示或特定互動區塊。

如果整個網站到處都是液體、粒子與玻璃動畫，反而可能讓內容難以閱讀，也會分散使用者注意力。

七、目前最大的限制：瀏覽器支援仍在實驗階段

Canvas UI 最完整的 HTML-in-Canvas 體驗，目前仍依賴實驗性的瀏覽器功能。

根據專案文件，完整功能需要使用 Chrome 或 Edge 140 以上版本，並開啟 canvas-draw-element 實驗 Flag；正式網站則可以申請 Origin Trial Token。

如果使用者的瀏覽器不支援這項技術，Canvas UI 會自動降級。

HTML 內容仍然會以一般網頁元素顯示，而可以獨立運作的部分，則繼續以 WebGL Overlay 的方式呈現，因此不會讓整個頁面直接失效。

像 Liquid、Glass、Ripple、Blaze 與 Clouds 等效果，在其他現代瀏覽器中仍能以純 WebGL 疊加的方式運作，但直接扭曲即時 DOM 的完整體驗可能有所差異。

所以現階段比較適合把 Canvas UI 視為：

一套能逐步增強網頁體驗的創意元件，而不是網站核心功能必須依賴的技術。

八、特效這麼多，會不會拖慢網站？

Canvas UI 的動畫主要透過 GPU 與 WebGL 運算，而且執行在 React Render Cycle 之外，避免每一幀動畫都造成 React 元件重新渲染。

元件只會在掛載時初始化，離開畫面後會暫停，卸載時也會清理相關資源；同時支援使用者作業系統中的 Reduced Motion 偏好設定。

不過，WebGL 特效依然會使用 GPU 資源。

如果同一個頁面同時放入大量 3D 模型、液體模擬與粒子效果，行動裝置或較舊的電腦仍可能出現效能問題。

實際使用時，建議：

1. 一個畫面只保留一個主要 WebGL 特效
2. 避免在長頁面中重複加入大型動畫
3. 同時測試桌面與行動裝置
4. 保留靜態或簡化版的備用視覺
5. 不要讓效果影響文字閱讀與按鈕操作

真正好的網頁特效，不是讓使用者注意到技術有多複雜，而是讓內容呈現得更有記憶點。

資料來源

• Canvas UI 官方網站
  https://canvasui.dev/
• Canvas UI 官方文件
  https://canvasui.dev/docs
• Canvas UI 元件列表
  https://canvasui.dev/components
• Canvas UI Playground
  https://canvasui.dev/playground
• Canvas UI MCP Server 說明
  https://canvasui.dev/docs/mcp
• Canvas UI GitHub 開源專案
  https://github.com/DavidHDev/canvas-ui
• Google Chrome Developers｜HTML-in-Canvas API 官方說明
  https://developer.chrome.com/blog/html-in-canvas-origin-trial?hl=zh-TW
• Chrome Platform Status｜HTML-in-Canvas API 開發狀態
  https://chromestatus.com/feature/5172548013916160