UI/UX

網站想做得更有動感，最麻煩往往唔係效果本身，而係效果一蓋上去，文字選取、連結點擊同原本互動就容易受影響。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 項目，價值會更明顯。

項目主頁 · GitHub

做網頁動效最麻煩嘅位，往往唔係寫出第一個 fade 或 rotate，而係當畫面同時牽涉 CSS transforms、SVG 路徑、滾動觸發同拖曳互動時，邏輯會好快分散。Anime.js 屬於 JavaScript 動畫庫，重點係用同一套 API 處理 CSS properties、SVG、DOM attributes 同 JavaScript Objects，令介面動畫、資料視覺化同品牌展示頁可以用較一致嘅方式編排。

相比只覆蓋單一動畫層的做法，Anime.js 4 的價值在於它唔止負責補間效果，仲連 timeline、stagger、Scroll Observer、SVG utilities 同 Draggable 都放入同一個工具箱。代價亦清楚：它比較適合本身已經用 JavaScript 控制互動節奏的前端項目，若果只需要極簡 hover 或過場，直接用 CSS 或 WAAPI 可能更輕。

Anime.js 通常會經 npm 納入前端項目，再按需要引入 animate、createTimeline、createDraggable 等模組；官方亦強調可按功能分開載入，方便控制 bundle size。由文件與首頁示例可見，最值得試的是把單一元素動畫、滾動同步、SVG 路徑跟隨與拖曳回彈放入同一頁，看看整體編排是否比你現有寫法更順手。

同一套 API 覆蓋 CSS、SVG、DOM attributes 同 JavaScript Objects
內建 Timeline、Stagger、Scroll Observer、Draggable，適合多步驟互動頁面
支援 modular import，有助控制前端打包體積
強項在複合型動效編排，不是追求最少抽象的微型工具

Anime.js 主打 fast、lightweight，同時保留足夠完整的動畫編排能力。對需要經常做行銷頁、產品展示、資料互動介面或設計系統微動效的團隊來說，Anime.js 吸引力不在單一特效，而在於它把原本容易四散的動畫控制集中成一條可維護的工作流。

項目主頁 · GitHub

Canvas UI 把互動介面搬上 WebGL 畫布

Anime.js 4 網頁特效的萬用引擎