一條 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，動畫才可以完整生效。

原創技術博客，轉載請注明出處。