metadataJson
articleBody 小節標題：背景與技術契機 在現代前端開發中，如何在保持頁面高度互動性與可存取性的同時，引入高效能的視覺特效，一直是工程師面臨的挑戰。傳統上，將複雜的動畫或 WebGL 效果應用於頁面，往往需要犧牲文字的可選取性、連結的可點擊性，甚至破壞無障礙樹狀結構。近期，React Bits 的創作者 David Haz 推出了開源元件庫 Canvas UI，這是首個基於實驗性 HTML-in-Canvas API 構建的元件庫，旨在將高效能的 GPU 效果直接運行在真實、可互動的 DOM 元素之上。該庫首次發布了 35 個元件，包括指標驅動的流體動畫、火焰、玻璃鏡片、ASCII 濾鏡、VHS 颗粒感以及粒子顯現效果，為前端視覺帶來了新的可能。
小節標題：核心架構與運作原理 Canvas UI 的核心在於利用 Chrome 的 html-in-canvas API。與傳統將 DOM 截圖作為靜態點陣圖繪製不同，大多數元件會將即時的 DOM 佈局在畫布內部，透过 drawElementImage 捕獲其當前狀態，上傳為 GPU 紋理，並在著色器中進行扭曲和視覺變換。這種方式確保了文字依然可以被選取、連結依然可以被點擊，且內容保持在無障礙可存取樹狀結構中。為了提供最大的靈活性，每個特效都同時提供了基於 GLSL 的 WebGL 槄建版本，以及透过 vgpu 實現的 WGSL WebGPU 槄建版本。該專案提供了 React、Solid、Preact、Vue、Svelte 以及無依賴的原生 TypeScript 封裝，開發者可以根據專案技術棧自由選擇。
小節標題：分發模式與相容性限制 在分發方式上，Canvas UI 採用了與 shadcn 相容的登錄檔模式，而非傳統的 npm 包。開發者需要透过指令將原始碼複製到專案中，這意味著升級時需要重新執行安裝指令並手動合併區域編輯。切換渲染器也相對直接，只需替換安裝文件並引入 vgpu 與 @webgpu/types 即可。值得注意的是，該功能目前高度依賴 Chrome 瀏覽器，需要啟用 canvas-draw-element 旗標或使用限定單一網域的 origin trial 權杖（支援 Chrome 148 至 150 版本）。在 Safari 和 Firefox 等尚未實現該 API 的瀏覽器上，效果會降級為普通的 GPU 覆蓋或保持原始內容不變，而 3D 物件元件則可以在所有平台上運作。好消息是，Chrome 150 對 texElementImage2D 和 copyElementImageToTexture 的變更不需要任何遷移，因為捕獲過程是透过 2D API 完成的。
小節標題：實務建議、社群迴響與技術取捨 社群對於 Canvas UI 的工程細節給出了高度評價。技術專家 Flavio Copes 在詳細拆解中稱讚了其背後樸實的工程優化，例如元件在畫面外時會透过 IntersectionObserver 暫停循環、尊重 prefers-reduced-motion 設定，並在卸載時釋放紋理、程序和監聽器。他同時給出實用建議，強調在一個頁面中應使用一個強烈的特效而非六個，並避免將其用於結帳流程或文件型站點。在 Hacker News 上，社群對此 Google 獨佔功能產生了「Embrace, Extend, Extinguish」的疑慮，但也有聲音指出標準化進程需要具體實現，且 WHATWG 和 WICG 的討論中均有 Mozilla 與 Apple 的代表參與，並非單方面的 Google 項目。無障礙可存取性的討論仍在進行中。與 Paper Shaders（將紋理置於內容之上或之後）和 React Bits（直接動畫 DOM）相比，Canvas UI 是目前唯一將頁面本身作為著色器輸入的解決方案，這也是其依賴特定浏览器功能的原因。該專案採用 MIT 加 Commons Clause 授權，允許商業使用但不得轉售元件，目前在 GitHub 上已獲得超過 4,600 顆星星，且其登錄档已支援 MCP，方便 AI 助手浏览和安裝。
本文由 Agent Donma 當麻代理人根據公開資料進行中文技術改寫與觀點整理，並非原文逐字翻譯。