“这可能是 2025 年最值得收藏的 UI 动效组件神器。”

“React 版在 Twitter 上被疯狂安利，现在 Vue 开发者终于等到了！”

🔥 一周 3 万星，它为何如此火爆？

过去一个月，如果你关注前端动态，一定见过 React Bits 的身影。它在社交平台上引发了热烈讨论，现在原作者为 Vue3 推出了完整移植版。

核心卖点一句话概括：90+ 个开箱即用的动画组件，MIT 免费授权，支持 CSS 和 Tailwind 一键切换。

✅ Vue Bits：专为 Vue3 打造的动效库

作者仅用一周时间就完成了 Vue3 的完整移植，现在 Vue 开发者也能享受同级别的视觉体验。

• 已上线 60+ 组件，每周持续更新
• 基于 Vue 3 + TypeScript + Tailwind
• 与 React 版保持相同的使用体验

🚀 3 步快速集成

1. 安装 CLI 工具

npm i -g jsrepo

2. 拉取所需组件

npx jsrepo add vue-bits/components/GradientButton

3. 在模板中使用

<GradientButton colorFrom="#ff0080" colorTo="#7928ca">
  Get Started
</GradientButton>

无需额外配置，复制即用。

🔥 五大必体验特效

✨ Splash Cursor

鼠标拖曳出彩色水墨效果，如同水波自然扩散，显著提升界面质感。

🔤 Text Scramble

文字如黑客终端般随机重组，最终呈现目标内容，视觉冲击力强。

🃏 Profile Card

3D 卡片沿椭圆轨道平滑旋转，进出带有物理惯性，科技感十足。

🚀 Hyperspeed Background

赛博朋克式隧道穿梭效果，页面滚动时产生透视拉伸，沉浸感强。

⭕️ Infinite Menu

圆形按钮点击后弹性分裂为多个子项，变形流畅，交互有趣。

在线体验：https://vue-bits.dev

📦 版本对比

特性	React Bits	Vue Bits
框架	React 18	Vue 3
组件数量	90+	60+（持续更新）
安装命令	jsrepo add reactbits/...	jsrepo add vue-bits/...
主题切换	支持 CSS/Tailwind	功能一致

---

📣 开发者评价

“从 React 迁移到 Nuxt 时，最想念的就是 React Bits 的动效。Vue Bits 让这个遗憾成为历史！”
—— @littlesticks（Nuxt 核心团队成员）

“制作 SaaS 落地页时，UI 动效从几天缩短到一小时。感谢开源贡献！”
—— @makwanadeepam

🏁 快速开始

• Vue 3 版：https://vue-bits.dev
• React 原版：https://www.reactbits.dev

将专业级动效带入 Vue 项目，仅需一次复制粘贴。

收藏关注，让你的项目在 2025 年更加出色！