国外疯传的 React UI 动效组件库!Vue3 版正式发布!

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

"React 版在 Twitter 上被疯狂安利,现在 Vue 开发者终于等到了!"

🔥 1 周 3 万星,它到底火在哪?

过去一个月,如果你刷过 Twitter / X,大概率见过 React Bits

  • 一条「Splash Cursor」10Demo 视频,播放量破 200 万
  • 开发者 @syskey_dmg 直呼**「最艺术的 UI 库」**;
  • @gregberge_ 把它列入**「年度 10 大 React 工具」**。

核心卖点一句话:90+ 个复制即用的动画组件,全部 MIT 免费,支持 CSS / Tailwind 一键切换

✅ Vue 3 官方移植版来了!名字就叫 Vue Bits

作者亲自下场,用 一周时间 完成了 Vue 3 的 1:1 移植。

  • 60+ 组件先行上线,每周同步新增
  • 技术栈:Vue 3 + TypeScript + Tailwind
  • 使用方式与 React 版保持一致,零学习成本。

🚀 3 步把动画搬进你的 Nuxt / Vue 项目

  • 安装 CLI(一次即可)
bash 复制代码
npm i -g jsrepo
  • 拉取任意组件
bash 复制代码
npx jsrepo add vue-bits/components/GradientButton
  • 直接 <template> 使用
html 复制代码
<GradientButton colorFrom="#ff0080" colorTo="#7928ca">
   Get Started
</GradientButton>

不需要额外依赖,不需要复杂配置,复制即用。

先睹为快:5 个必玩特效

  • Splash Cursor
    鼠标所到之处拖出彩色墨渍,像水波一样扩散,瞬间提升页面质感。
  • Text Scramble
    字符像黑客终端般高速随机重组,最后定格成你想要的文案,吸睛指数爆表。
  • Profile Card
    3D 卡片沿椭圆轨道自动旋转,滑入滑出带惯性,科技感满满。
  • Hyperspeed Background
    赛博隧道式穿梭背景,滚动页面时产生无限透视拉伸,沉浸感极强。
  • Infinite Menu
    圆形按钮点击后弹性分裂成多个子项,黏连变形再聚合,萌且丝滑。

📦 与 React 版差异速查

维度 React Bits Vue Bits
核心框架 React 18 Vue 3
组件数量 90+ 60+(持续同步)
安装方式 jsrepo add reactbits/... jsrepo add vue-bits/...
主题切换 CSS ↔ Tailwind 一键 完全一致

📣 社区声音

"从 Reac t 切到 Nuxt ,最舍不得的就是 React Bits。现在 Vue Bits 来了,完美衔接!"

------ @littlesticks(Nuxt 核心团队成员)
"做 SaaS 落地页,UI 动效 1 小时搞定。感谢开源!"

------ @makwanadeepam

🏁 立即体验

把酷炫动画带进你的下一个项目,只需要一次复制粘贴。

Star 收藏,永远不迷路!

相关推荐
gAlAxy...2 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁2 小时前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web
会飞的小妖2 小时前
个人博客系统(十一、前端-简短的配置)
前端
念念不忘 必有回响4 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL4 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟6 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据6 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
fruge7 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有7 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
sean8 小时前
开发一个自己的 claude code
前端·后端·ai编程