做创意首屏时，前端总会遇到一个取舍：普通 DOM 足够稳，也方便做可访问性；但一旦想要流体、玻璃折射或粒子效果，就很容易把整块页面做成不方便交互的画布。
Canvas UI 想解决的就是这件事。它不是让你用 Canvas 重写页面，而是在真实 HTML 的上方叠一层 GPU 特效。文字仍能选，链接和按钮仍能点；支持能力不足的浏览器，也可以回到普通 HTML 的保底路径。官方文档 对这种渐进增强的定位很明确。
使用方式也很像 shadcn：不是装进一个黑盒依赖，而是把组件源码复制进自己的项目。React 版可以这样开始：
npx shadcn@latest init
npx shadcn@latest add @canvas-ui/liquid-react
随后用 Liquid 包住首屏内容即可。官方目前为 React、Vue、Svelte、Solid、Preact 和原生 TypeScript 都提供了组件版本；默认有 WebGL 构建，也有 WebGPU 构建可选。安装指南
真正要注意的是效果分级。Liquid、Glass、VHS 这类需要把 live DOM 绘进 Canvas、再给着色器扭曲的组件，依赖 Chrome 的实验性 html-in-canvas 能力：本地需开启 chrome://flags/#canvas-draw-element，生产环境则要为自己的域名配置 Origin Trial。其他浏览器不会得到同样的扭曲画面，但内容会以普通 HTML 显示。另一类纯 3D / 着色器对象效果不依赖这项实验能力，浏览器路径更一致。项目 README
所以它最适合放在首屏、活动页、作品集或互动专题的一小块区域：让视觉服务于叙事，而不是盖住内容。上线前只要守住三条底线：关掉特效后依然能读、能点、能完成操作；低端设备、长页面和“减少动态效果”系统设置都实际测一遍；许可证是 MIT + Commons Clause，可免费用于自己的商业项目，但不能把组件本身或移植版单独打包售卖。许可证说明
一句话：Canvas UI 是给创意加分的积木，值得先在一个关键区域试起来；它不是每一页都该默认装上的基础设施。