一条 Splash Cursor 的 10 秒 Demo 视频曾创下 200 万+ 播放量，让 React Bits 风靡全球。如今，Vue 开发者终于迎来了官方移植版 —— Vue Bits。

在现代 Web 开发中，UI 动效已成为提升用户体验的关键因素。Vue Bits 作为 React Bits 的官方 Vue 3 移植版本，自发布一周内就获得数万开发者关注。它提供了 60+ 复制即用的动画组件，全部 MIT 许可，支持 CSS/Tailwind 一键切换，让开发者能够轻松创建专业级交互动画。

本文将深入探索 Vue Bits 的高级用法，揭示那些文档中未曾详述的技巧，助你掌握动画设计的艺术。
在当今的 Web 开发世界，用户体验是制胜关键。而动画效果，尤其是文本动画，能让你的应用瞬间脱颖而出。今天，我们将深入探索 Vue Bits 这个强大的 Vue.js 组件库，特别是其令人惊叹的文本动画功能。准备好让你的文字"活"起来了吗？

一、什么是 Vue Bits？

Vue Bits 是一个专为 Vue.js 设计的轻量级组件库，专注于提供高性能、可定制的动画效果。它无需复杂的配置，就能让你轻松实现专业级的动画效果。无论是文本动画、页面过渡还是微交互，Vue Bits 都能让你事半功倍。

核心优势：

• 🎯 零配置开箱即用：无需繁琐设置，立即开始创作
• ⚡ 极致性能：基于 Web Animations API，流畅不卡顿
• 🎨 高度可定制：支持完全自定义动画参数
• 🔧 TypeScript 友好：完整的类型定义支持
• 📱 响应式设计：完美适配各种设备尺寸

二、环境配置与安装优化

1. 指定组件安装

先安装jsrepo，jsrepo 是一个开源 CLI 工具，核心定位是「把可复用的代码以最小颗粒度、最可靠的方式分发到任何项目里」。
一句话总结：它像“npm + shadcn/ui”的混合体，但更轻量、更面向源码。

npm i -g jsrepo

安装对应的组件：

npx jsrepo add https://vue-bits.dev/ui/TextAnimations/SplitText

查看code示例教程：

2. 全部安装

在项目中初始化一个配置文件：

npx jsrepo init https://vue-bits.dev/ui

┌   jsrepo  v2.4.3 
│   //指定插件安装目录
◇  Please enter a default path to install the blocks
│  ./src/components
│   //使用那种代码格式插件
◇  Which formatter would you like to use?
│  None
│
●  Initializing https://vue-bits.dev/ui
│   //是否添加授权令牌
◇  Would you like to add an auth token?
│  No
│
◇  Fetched manifest from https://vue-bits.dev/ui
│   //需要安装那些模块，默认一个没选择，按空格选择，按下键选择。
◇  Which category paths would you like to configure?
│  Animations, Backgrounds, Components, TextAnimations
│  //动画、背景、组件、文本动画//动画路径
◇  Where should Animations be added in your project?
│  ./src/components/Animations
│   //背景路径
◇  Where should Backgrounds be added in your project?
│  ./src/components/Backgrounds
│   //组件路径
◇  Where should Components be added in your project?
│  ./src/components/Components
│   //文本动画路径
◇  Where should TextAnimations be added in your project?
│  ./src/components/TextAnimations
│
◇  Add another repo?
│  No
│
◇  Wrote config to `jsrepo.json`
│
└  All done!

完后后，项目根目录会有一个jsrepo.json文件

{"$schema": "https://unpkg.com/jsrepo@2.4.3/schemas/project-config.json","repos": ["https://vue-bits.dev/ui"],"includeTests": false,"includeDocs": false,"watermark": true,"configFiles": {},"paths": {"*": "./src/components","Animations": "./src/components/Animations","Backgrounds": "./src/components/Backgrounds","Components": "./src/components/Components","TextAnimations": "./src/components/TextAnimations"}
}

执行以下命令，选择要安装的模块，按空格选择，按下键选择：

npx jsrepo add

选择完成后按回车确认：

到此就全部安装完成

三、Vue Bits使用

1. SplitText：文字动画大师

SplitText 是创建专业级文本动画的终极工具，其真正威力在于高级配置：

<template><SplitTexttext="Hello, GSAP!"class-name="text-2xl font-semibold text-center":delay="100":duration="0.6"ease="power3.out"split-type="chars":from="{ opacity: 0, y: 40 }":to="{ opacity: 1, y: 0 }":threshold="0.1"root-margin="-100px"text-align="center"@animation-complete="handleAnimationComplete"/>
</template><script setup lang="ts">import SplitText from "./SplitText.vue";const handleAnimationComplete = () => {console.log('All letters have animated!');};
</script>

2. Splash Cursor：沉浸式光标体验

这个让 Vue Bits 爆红的组件，其实隐藏着更多可能性：

<template><SplashCursor:SIM_RESOLUTION="128":DYE_RESOLUTION="1440":CAPTURE_RESOLUTION="512":DENSITY_DISSIPATION="3.5":VELOCITY_DISSIPATION="2":PRESSURE="0.1":PRESSURE_ITERATIONS="20":CURL="3":SPLAT_RADIUS="0.2":SPLAT_FORCE="6000":SHADING="true":COLOR_UPDATE_SPEED="10":BACK_COLOR="{ r: 0.5, g: 0, b: 0 }":TRANSPARENT="true"/>
</template><script setup lang="ts">import SplashCursor from "./SplashCursor.vue";
</script>

结语：动画设计的新纪元

Vue Bits 代表了 Vue 动画生态的一个重要转折点——将复杂的动效设计转化为可组合、可配置的组件化范式。通过本文介绍的高级技巧，您已经能够：

1. 深度定制和扩展 Vue Bits 组件
2. 组合多个动画组件创建独特交互体验
3. 优化动画性能以适应复杂应用场景
4. 构建跨项目的动画设计系统

探索 Vue Bits 的更多可能：vue-bits.dev
React 版参考：www.reactbits.dev
项目源码：github.com/vue-bits/vue-bits

Vue Bits使用注意点：

1. 单组件安装不会安装当前组件需要的包，需要自己安装。
2. 如动画不生效，需要下载官网引用的css，动画才可以完整生效。

原创技术博客，转载请注明出处。