先说结论:它没有为了特效把网页变成一张死图

传统 canvas 特效最棘手的地方,是一旦把文字、按钮和卡片全部画进像素,浏览器原生的文本选择、链接、语义和辅助技术能力就很容易丢失。Canvas UI 的卖点恰好相反:主要内容仍然是 DOM,文字可以选择、链接可以点击,实验性的 html-in-canvas API 把这块真实 HTML 交给 WebGL 读取和重绘,于是液体、玻璃、燃烧、碎裂等 shader 可以扭曲界面,同时保留底层内容。

这给中文视觉创作者一个很好的拆解角度:不要只录“鼠标一划,页面像水一样散开”,而要把 DOM、canvas 和 shader 三层分别画出来。组件又通过 shadcn-compatible registry 直接把源码复制进项目,React、Vue、Svelte 或 vanilla 用户拿到的不是封闭播放器,而是可修改的实现。对于需要快速做活动页、作品集或品牌 hero 的团队,这比从空白 WebGL 场景搭一整套交互更容易试验。

上生产前要同时做兼容、克制和许可测试

最小验证不该只在开发者的高端电脑录屏。先挑一个效果包住 hero,在 Chrome/Edge、Safari、Firefox 和一台安卓中端机上分别记录视觉差异、帧率、GPU 占用、首屏时间和滚动手感;再关闭动画、只用键盘、开启系统 reduced motion,确认文字、焦点与主要行动按钮仍然可用。WebGL overlay 回退没有报错,只能证明页面没有直接坏掉,不能证明品牌表达、可访问性或电量消耗已经合格。

设计上也要主动限量。Liquid、Glass、Shatter 和 VHS 同时堆叠会迅速吞掉阅读层级;更稳的用法是只把一个效果当作入口记忆点,正文区域恢复静态排版,并为低性能或减少动态偏好的用户提供明确关闭路径。独立介绍文章可以作为交叉观察,但性能结论必须来自自己的设备和页面,不能把项目 README 的描述当成第三方 benchmark。

许可更不能省略。仓库文件写的是自定义 “MIT + Commons Clause”,允许把组件用于应用、网站和商业产品,却禁止把组件自身、合集或移植版本拿去销售、再许可或重新分发。这和一句“MIT 开源组件库,随便打包卖”不是同一件事。给客户做网站通常落在许可证明确允许的产品使用场景;把组件改名后做成付费模板库、组件市场包或跨框架移植版出售,则可能触碰限制。正式商业项目应保存许可证文本、标记修改并让负责人按具体分发方式复核。