Vue Bits - 免费开源、优雅高效的 Vue 3 动效组件库，大名鼎鼎的 React Bits 的官方移植版

国外爆火的 React UI 动效组件库 React Bits 的 Vue 3 官方移植版，可以快速实现优雅的按钮交互或是复杂的 3D 效果。

Vue Bits 介绍

在介绍

Vue Bits

React Bits

Splash Cursor

“最艺术的 UI 库”

“年度 10 大 React 工具”

而今天介绍的 Vue Bits 是由 React Bits 的原作者用一周时间基于 Vue 3 完成了移植，动画效果和使用方式与 React 版完全一致，可以轻松实现惊艳动效，节省大量时间和精力。

技术特性

Vue Bits 的核心优势在于其丰富多样的动画组件和高度优化的性能表现：

• 丰富的动画组件

  ：有超过 80 个精心设计的动画组件，涵盖按钮、菜单、卡片、文本效果等多个类别，动画效果优雅惊艳，可以满足各种场景需求；

• 双主题支持

  ：所有组件都支持 CSS 和

  Tailwind

  一键切换，可以适应不同的开发偏好和项目配置；

• TypeScript 支持

  ：直接完全由 TypeScript 开发；

• 性能优化

  ：这些动画组件都经过优化，减少不必要的 DOM 操作和重绘，才让动画如此优雅流畅；

• 响应式设计

  ：所有组件都支持响应式特性，在电脑、手机或者平板设备上都是一样的表现。

大神毕竟是大神，和我们自己写的粗糙动画代码不同，Vue Bits 是用位运算进行状态管理，通过操作二进制位来实现状态的存储和检查，相比传统的数组或对象操作，

内存占用更低，执行速度更快

开发上手使用

安装和使用

Vue Bits 是用 jsrepo CLI 工具进行安装和管理，我也是第一次用这个工具，首先全局安装管理工具：

npm i -g jsrepo

然后就可以拉取任意组件，例如我需要一个渐变按钮组件：

npx jsrepo add vue-bits/components/GradientButton

然后就可以在 Vue 页面中使用，实现了一个带动画效果的登录按钮：

<template> <GradientButton colorFrom="#ff9920" colorTo="#7928ca"> 立即登录 </GradientButton> </template> <script setup> import GradientButton from 'vue-bits/components/GradientButton'; </script>

酷炫动画效果

实现火爆视频的彩色墨水喷溅的光标效果

Splash Cursor

<template> <SplashCursor> <div class=“main-container”>鼠标在这上面晃和点击看效果</div> </SplashCursor> </template> <script setup> import SplashCursor from 'vue-bits/components/SplashCursor'; </script>

鼠标所到之处拖出彩色墨渍，像水波一样扩散，逼格瞬间提高几十倍。

Text Scramble 文字效果

<template> <TextScramble :text="message" :speed="0.5" @completed="onTextComplete" /> </template> <script setup> import TextScramble from 'vue-bits/components/TextScramble'; import { ref } from 'vue'; const message = ref('队长，是我，别开枪！'); const onTextComplete = () => { console.log('监听文字动画已完成'); }; </script>

这个动画会让文字像

黑客终端

免费开源说明

Vue Bits 是一个免费开源的 JS 动画库，项目采用 MIT 开源协议以及公共领域条件许可（即

Commons Clause License Condition v1.0

公共领域条件许可

不能把 Vue Bits 拿来出售、重新许可为别的协议或这重新发布为别的项目