用途:为 React 项目提供可直接复用的动画组件,覆盖背景、文字、按钮与交互元素,减少从零编写动画的成本。
主要能力:Magic UI 提供 150+ TypeScript 组件,基于 Tailwind CSS 与 Framer Motion,并与 shadcn/ui 集成,支持复制粘贴或 CLI 安装(如 npx shadcn@latest add https://magicui.design/r/animated-beam)。React Bits 提供 90+ 组件,依赖极少,涵盖文字动画(BlurText、CountUp、SpinningText)、交互元素(MagicButton、Magnet、Dock、Stepper)、背景(Aurora、Plasma、Particles,部分使用 WebGL)与列表布局。
必要用法:Magic UI 组件依赖 motion(npm install motion)与 cn() 工具函数;React Bits 以手动复制为主,按需安装 framer-motion 或 ogl。两者可与 shadcn/ui、React Router、Framer Motion 组合使用。性能方面建议使用 CSS 遮罩、按设备降低粒子或方块数量、对重组件使用 React.lazy,并在低端设备或减少动画偏好下降低负载。
限制:资料未提供各组件数量以外的具体清单、官方收费与价格、平台支持范围、兼容版本或效果承诺,这些内容暂未提供,需以官方文档为准。