網站想做得更有動感，最麻煩往往唔係效果本身，而係效果一蓋上去，文字選取、連結點擊同原本互動就容易受影響。canvas-ui 針對的正是這個位置：它屬於開源 UI 元件庫，用 html-in-canvas 同 WebGL 把流體模擬、shader effects 同 3D scenes 疊加到現有介面之上，重點是盡量保留 live DOM 的互動性。
它吸引人的地方，不止是畫面夠華麗，而是部署方式相對直接。元件可在 React、Solid、Preact、Vue、Svelte 同 vanilla TypeScript 使用，官方提供 Docs、Components 同 Playground，亦支援透過 shadcn CLI 拉入完整原始碼，代碼會直接落到你的項目，之後可自行改 props、樣式甚至拆開重寫，唔需要長期綁死某個套件版本。
取捨同樣寫得很清楚。依賴 live HTML redraw 的元件，要用到實驗性 HTML-in-canvas API，現時主要在 Chrome 配合 flag 才能完整啟用；去到其他瀏覽器，內容會退回一般 HTML 顯示，而部分效果仍可作為純 WebGL overlay 繼續運作。換句話說，它比較適合重視前端體驗、願意接受瀏覽器能力分層的品牌網站、作品展示頁，或者想在既有介面上加入視覺層次的互動項目。
- 提供約 33 個元件，涵蓋 Blaze、Liquid Glass、Particle Reveal、VHS 等效果
- 同一套元件邏輯對應多個前端框架，方便跨技術棧重用
- 以 GPU 上的 WebGL 動畫為核心，減少主執行緒長時間負擔
- 可配合 shadcn MCP server，讓支援 MCP 的 assistant 直接查閱與安裝元件
運行策略：能用 WebGL 的效果盡量放到 GPU，瀏覽器不支援完整能力時再優雅降級。這令 canvas-ui 比一般只做靜態裝飾的元件庫更進取，但也代表它未必適合每一個企業後台或追求一致瀏覽器表現的介面；放在重視體驗展示的 UI/UX 項目，價值會更明顯。