Canvas UI：第一次看到火焰从按钮底下窜出来，我以为在看录屏

前阵子刷到有人把 Codex 界面整成了初音未来，我第一反应是：这不就是给网页套层皮嘛，假截图贴上去骗眼睛。直到我在 canvasui.dev 上划过鼠标——火焰真的从一段文字底下窜上去，玻璃镜片跟着光标折射下面那个还能点的按钮，整页像被火烤化了一层。我才意识到，它动的是你真实的 DOM，不是贴图。

Canvas UI 的实时特效演示

这个项目叫 Canvas UI，作者 DavidHDev，协议是 MIT + Commons Clause。它干的事很邪门也很酷：把 WebGL 特效（火焰、流体、玻璃、碎裂、VHS 噪点……）直接盖在你真实、可交互的界面之上。

它大半建立在 Chrome 一个实验性能力 HTML-in-canvas 上。简单说，这个 API 允许 WebGL 去读取并重绘你活的 DOM：文字还能选中、链接还能点，但整页变成了一张可以被火、流体、玻璃实时扭曲的纹理。不支持的地方也不摆烂——组件会优雅退化成纯 WebGL 覆盖层，所以每个访客都能拿到一个能用的页面，而不是白屏。这点我挺欣赏，很多"炫技库"一到老浏览器就白给。

怎么把它跑起来

它走的是 shadcn 那套"复制而非安装"的路子——组件源码通过 registry 直接落进你项目，不装 npm 包、不用锁版本，源码是你自己的。

# 没用过 shadcn 就先 init 一次
npx shadcn@latest init

# 加一个 Liquid 组件（React 版）
npx shadcn@latest add @canvas-ui/liquid-react

把 liquid 换成任意组件名，把 react 换成 solid / preact / vue / svelte / vanilla，源码就落到你项目的 components/canvasui/ 里，随你改。我翻它文档时特别注意了：每个组件都是 self-contained、带类型化 props、有合理默认值，基本零配置上手。

一个诚实的提醒：想看到完整的"DOM 实时扭曲"魔法，目前得是 Chrome / Edge 140+ 且开 chrome://flags/#canvas-draw-element 开关（生产环境可用 origin trial token）。其余浏览器会退化成 WebGL 覆盖层——功能不丢，只是少了那层"页面被烤化"的错觉。

我拿它干什么最顺手

25+ 个组件还在涨：Liquid、Blaze、Glass、Shatter、VHS、Particle Reveal、Laser、Clouds、Bubble、Droplets、Magnify、Grid、Ripple、Frost……名字听着就像在给界面下咒。

对我来说最实用的场景就一个：给首屏和卡片加一点"活"的东西。比如想让标题伴随粒子揭开，就上 particle-reveal：

import { ParticleReveal } from "@/components/canvasui/ParticleReveal";

export function Hero() {
  return <ParticleReveal>把你的标题放这里</ParticleReveal>;
}

一行包裹，文字先化成一堆细颗粒、再在光标周围聚回清晰的 UI。落地页、作品集这种"靠视觉冲击力留人"的地方，它几乎是无脑上。

另一个让我觉得"这作者懂"的点：registry 讲 shadcn 协议，所以任何接了 shadcn MCP 的 AI 助手（Claude Code / Cursor 之类）都能自己逛库、读文档、装组件。一句话的事——"Add a particle reveal effect to my hero section"，它自己就跑命令装好了。

几个让我皱眉的地方

不是吹，是实打实的顾虑，写之前你该知道：

生产环境要谨慎：它长在实验性 API 上，浏览器支持还在演进。今天炫，明天 Chrome 一改行为你可能得跟着改。适合锦上添花，别拿它承载核心交互。
Chrome / Edge 优先：Safari、Firefox 主力用户暂时吃不到那层 DOM 扭曲魔法，只能看 WebGL 覆盖层版。
Commons Clause：个人和商业项目免费，但不能拿组件本身去卖或再分发（无论单独、打包还是移植）。自己用随便，做主题商店卖就踩线了。
升级靠 re-run：源码进你仓库，不像 npm 包统一升级。出了新版本得再跑一次安装命令拉，或者你就守着自己那份改。

和站里工具能搭上

调特效颜色时，站里的颜色转换能帮你把取到的色值在 HEX / RGB / HSL 之间快速互转，直接填进组件的 color prop，少开一次取色器。

一句话收尾

Canvas UI 不是又一个 UI 组件库，它是把"界面本身变成可塑材质"这种思路的现成实现。最打动我的三点是：真实 DOM 仍可选中可点、优雅降级不白屏、复制即用不绑架版本。实验性 API 撑起来的魔法意味着它现在最适合当视觉放大器，而不是地基。

官方没放演示视频，但官网每个组件都是实时运行的 demo——上面那张 gif 就是 Liquid 效果的实录。Star 一下，挑个 Blaze 或 Glass，给你那块灰扑扑的首屏来点"活"的。