Canvas UI：让网页拥有游戏级动画效果，AI 一句指令就能装组件

📝

Canvas UI 是 AI 友好的视觉组件库——Particle Reveal/Liquid/Glass/Blaze 等 GPU 级效果组件化，shadcn 源码模式 + MCP 支持，告诉 Claude "Add liquid effect to my hero section" 它就能自动找组件安装。支持 React/Vue/Svelte/Solid/Preact。

数据来源：Hardy417 公众号文章（2026-08-07）。项目地址：https://github.com/DavidHDev/canvas-ui

Canvas UI 的目标很简单：让普通前端开发者也能快速构建带 Canvas / WebGL 级视觉效果的现代 UI。官方定位 “Creative components, in a new dimension”——不是帮你写后台管理系统，而是帮你打造产品官网、营销页面、创意交互、高端 Landing Page。

一个组件，让网页像游戏一样动起来

Particle Reveal（粒子揭示）：文字先聚成粒子再逐渐显现，适合首页标题、品牌展示
Liquid（液体流动）：以前要 WebGL + Shader + Three.js + GLSL 整套技术栈，现在直接组件化
Glass（玻璃拟态）：iOS 毛玻璃、Vision Pro 风格，高级 SaaS 官网标配
Blaze（火焰）、Ripple（波纹）、VHS（复古 CRT）……

这些以前只是视觉实验，现在都变成了可复用组件。

最像 shadcn/ui 的地方：复制代码，而不是安装包

1	npx shadcn@latest add @canvas-ui/particle-reveal-react

组件源码直接复制进你的项目，想改动画、调参数都自己动手，不依赖第三方更新。

最大亮点：AI 时代也能直接调用

shadcn Registry + MCP 支持：AI Agent 可以浏览组件、查看文档、自动安装
告诉 Claude “Add liquid effect to my hero section”，AI 直接找到组件并安装
未来 UI 工作流：描述效果 → AI 查找组件 → 自动安装 → 生成页面

框架无关

React、Vue、Svelte、Solid、Preact、Vanilla TypeScript——同一套效果多端复用，团队不用因技术栈不同重新开发动画。

和 Three.js 的区别

Three.js 是底层 3D 引擎，要自己建模型、写 Shader、控制渲染；Canvas UI 是高级视觉组件，拿来就用——像从手写 CSS 按钮进化到 UI 组件，降低的是使用门槛。

趋势

前端路径：jQuery → React/Vue → 组件化 → AI 生成代码 → 下一阶段可能是视觉能力组件化。高级动画从 WebGL 工程师专属，变成组件、甚至一句 AI 指令。AI 编程普及下，可组合、可调用、视觉化、AI 友好的组件库，很可能成为下一代前端基础设施。