Vue Bits
Overview
Vue Bits（https://vue-bits.dev，GitHub: DavidHDev/vue-bits）是一个开源的 Vue 3 动画 UI 组件库，是 React Bits 的官方 Vue 移植版。它提供 130+ 个高质量、可交互、通过 props 高度可定制的动画组件，分为四大类：文字动画（Text Animations）、动效（Animations）、UI 组件（Components）、背景（Backgrounds）。所有组件基于 Vue 3 Composition API（<script setup lang="ts">）+ TypeScript 编写，样式混用 Tailwind 与 scoped CSS（文字/UI 组件多用 Tailwind，WebGL 背景类多用 scoped CSS），依赖极简（多数动画基于 WebGL/ogl、three、gsap、matter-js、lenis 等按需引入）。
适用边界（必须先判断技术栈）
本技能只适用于 Vue 3 项目。使用前先确认目标项目的技术栈：
- ✅ 适用：Vue 3、Nuxt（3+）项目。
- ❌ 不适用：React 项目 → 应改用 React Bits（https://reactbits.dev），不要套用本技能。
- ❌ 不适用：Svelte / Angular / 纯原生 JS / 其他框架项目。
若用户目标是非 Vue 项目，不要套用本技能的组件、安装命令或代码结构，改为告知对应的正确方案（React 用 reactbits.dev）。
When to Use
- 用户需要为 Vue 3 / Nuxt 项目添加动画背景（极光、粒子、光束、网格、水波等）、文字动画（打字、故障、渐变、滚动显现）、交互动效（磁吸、光标特效、图片轨迹）或炫酷 UI 组件（无限菜单、弹性滑块、卡片翻转、3D 画廊）。
- 用户提到 vue-bits、动画组件库、背景特效、文字动效等关键词。
- 用户在 Vue 语境下提到 React Bits（想要「React Bits 那种效果的 Vue 版本」——Vue Bits 正是 React Bits 的官方 Vue 移植版）。
- 需要快速落地视觉方案，避免从零编写 Canvas/WebGL 动画。
Workflow
1. 确认需求与选型
- 根据用户要的效果，在
references/component-catalog.md中查找匹配的组件（按「文字动画 / 动效 / UI 组件 / 背景」四类检索）。 - 定位到组件后，访问其文档页
https://vue-bits.dev/<category-slug>/<component-slug>查看实时可交互 Demo 与完整 props 列表（URL 采用 kebab-case，如https://vue-bits.dev/backgrounds/aurora、https://vue-bits.dev/text-animations/glitch-text）。 - 若需查看完整源码，从 GitHub 获取：
https://raw.githubusercontent.com/DavidHDev/vue-bits/main/src/content/<Category>/<Component>/<Component>.vue。
2. 安装组件
Vue Bits 通过 jsrepo 或 shadcn CLI 把组件源码直接安装进用户项目（不是 npm 包）。安装命令见 references/installation.md。
核心命令（以 aurora 为例，{slug} 为组件 kebab-case 名）：
# jsrepo 方式（推荐）
npx jsrepo init https://vue-bits.dev/r # 首次：初始化 registry
npx jsrepo add https://vue-bits.dev/r/aurora.json # 安装组件
# shadcn 方式
npx shadcn@latest add https://vue-bits.dev/r/aurora.json
包管理器 runner 对应关系：npm→npx、pnpm→pnpm dlx、yarn→yarn dlx、bun→bunx --bun。
3. 集成与使用
- 安装后组件会落在项目
src/components/下（以<ComponentName>.vue命名）。 - 按需在页面中
import并使用，通过 props 定制（props 是每个组件的核心定制手段，见references/component-anatomy.md）。 - 若手动复制源码，须确保项目已配置 Tailwind CSS，并按组件实际依赖补装
ogl/three/gsap/matter-js等（依赖映射见references/component-anatomy.md）。
Resources
references/component-catalog.md— 130+ 组件的完整分类目录（四大类、每个组件的 slug 与用途）。references/installation.md— 详细的安装步骤、Tailwind 配置、环境要求、jsrepo/shadcn 命令与包管理器矩阵。references/component-anatomy.md— 组件代码结构、props 定义范式、依赖映射与编码约定。
