# David Haz 推出 Canvas UI 支援網頁渲染
> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)
> 原作者：shadcn (@shadcn) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥 · 日期：2026-07-24
> 原始來源：https://x.com/shadcn/status/2080259921816220118
## 中文摘要
David Haz 推出 Canvas UI 支援網頁渲染。
**核心架構與技術特點**
Canvas UI 是一套運用實驗性 [html-in-canvas](https://chromestatus.com/feature/5162535032373248) API 所打造的開源組件庫，打破過去網頁特效與 DOM 互動的限制。
- 運作原理：WebGL 效果能夠即時讀取並重繪真實的 DOM，同時保持文字可選取、連結可點擊，讓整個頁面化為能被火焰、流體與玻璃特效即時扭曲的紋理。
- 降級機制：在不支援 html-in-canvas 的瀏覽器中，組件會自動降級為純 WebGL 覆蓋層（overlay），確保每位訪客都能正常瀏覽網頁。
- 瀏覽器支援：完整體驗目前需要 Chrome 或 Edge 140 以上版本，並手動啟用 `` `#enable-experimental-web-platform-features` `` 旗標。
- 專案架構：專案原始碼存放在 [GitHub 專案庫](https://github.com/DavidHDev/canvas-ui)，文件網站則採用 Next.js 16 與 Tailwind v4 建構，並部署至 Cloudflare Workers。
> 影片介紹名為 Canvas UI 的開源 HTML 畫布 UI 庫，展示豐富的動畫互動與 AI 整合功能。
**首發組件與使用方式**
發布之初即提供 24 款互動組件，並採用類似 shadcn 的複製安裝模式，讓原始碼直接進入專案中供開發者自由編輯。
- 首發組件包含：Liquid、Blaze、Glass、Shatter、VHS、Particle Reveal、Cloth、Ripple、Droplets 等。
- 框架相容性：支援 React、Vue、Svelte 以及 Vanilla TS 等多種前端環境。
- 安裝方式：透過 shadcn CLI 直接將組件原始碼加入專案中。若尚未初始化，需先執行 `` npx shadcn@latest init ``，接著執行以下指令安裝組件：
```bash
npx shadcn@latest add @canvas-ui/liquid-react
```
> 網頁畫面左側顯示名為「Canvas UI」的互動式控制面板，可調整參數即時改變右側網頁的六角形背景視覺效果。
**AI 協作整合**
Canvas UI 針對 AI 輔助開發進行深度優化，讓 AI 代理能夠輕易存取並安裝組件。
- 內建 shadcn registry 與 MCP 支援，讓 Agent 可以直接瀏覽並安裝所有組件。
- 提供「Copy for AI」功能，支援複製提示詞、已配置的程式碼、markdown 格式文件與 demo 原始碼。
- 支援一鍵在 ChatGPT、Claude 或 v0 中開啟頁面，並內建 `llms.txt`。
> 某個展示「Laser」元件安裝與匯出選項的網頁介面，使用者切換了 React、Vue、Svelte、Vanilla 等框架分頁並開啟「Copy for AI」下拉選單。
**社群回饋與已知問題**
該專案在社群中引發熱烈討論，許多開發者認為這是網頁設計的一大突破，但也點出目前的實際限制。
- 效能與相容性：部分開發者擔憂舊型裝置、行動裝置或不支援該 API 的主流瀏覽器上的效能表現與實際體驗。
- 畫面模糊問題：有使用者回報畫面（特別是位於 canvas 內部的內容）會出現模糊現象，作者 David Haz 也坦言這確實存在且目前尚無完美的解決方案。
> 網頁介面上展示多個含有動態視覺特效與互動元件的預覽方塊。
> 介面選單上列出了 React、Vue、Svelte 和 Vanilla 等前端框架或技術選項，下方帶有一個複製圖示。
> Canvas UI 文件網站中「Asciify」元件的展示與安裝說明頁面，包含功能介紹、互動展示圖片及 React 的程式碼片段。
> 網頁文件畫面呈現 API 參考（API reference）表格，列出屬性名稱、型態與預設值，左側則為選單列表。
> Canvas UI 的標題與宣傳標語「Tasteful html-in-canvas & WebGL components.」顯示在帶有藍白抽象圖形與球體裝飾的網頁介面上。
## 媒體內容
**影片介紹名為 Canvas UI 的開源 HTML 畫布 UI 庫，展示豐富的動畫互動與 AI 整合功能。**
**影片中的 Prompt 與操作**
操作步驟：
1. @00:08 瀏覽網頁佈局
2. @00:22 切換不同框架標籤（React、Vue、Svelte、Vanilla）
3. @00:27 調整粒子效果物件控制參數
4. @00:33 開啟 AI 整合複製選單
**網頁畫面左側顯示名為「Canvas UI」的互動式控制面板，可調整參數即時改變右側網頁的六角形背景視覺效果。**
**影片中的 Prompt 與操作**
操作步驟：
1. （00:01）調整左側 Tilt 參數改變背景視角
2. （00:10）向下捲動網頁檢視「How it works」功能介紹
**網頁介面上展示多個含有動態視覺特效與互動元件的預覽方塊。**
**影片中的 Prompt 與操作**
操作步驟：
1. （00:00）瀏覽網頁中的元件圖庫，預覽各種動態視覺效果
**某個展示「Laser」元件安裝與匯出選項的網頁介面，使用者切換了 React、Vue、Svelte、Vanilla 等框架分頁並開啟「Copy for AI」下拉選單。**
**影片中的 Prompt 與操作**
操作步驟：
1. （00:00）切換至 pnpm 分頁
2. （00:01）切換至 yarn 分頁
3. （00:02）切換至 bun 分頁
4. （00:02）切換至 Vue 框架分頁
5. （00:03）切換至 Svelte 框架分頁
6. （00:04）切換至 Vanilla 框架分頁
7. （00:05）點擊右上角「Copy for AI」下拉選單
8. （00:11）點擊「Copy prompt」選項
## 標籤
開源專案, Web, 其他