# vue-animation-components

**Repository Path**: YYYWork/vue-animation-components

## Basic Information

- **Project Name**: vue-animation-components
- **Description**: 基于vue-bits组件进行前端设计的组件库，目前主要包含一些vue-bits中component分类下的组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: https://gitee.com/YYYWork/vue-animation-components
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-06-14
- **Last Updated**: 2026-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Animation Components

Vue 3 动画/交互组件库，基于 Composition API + TypeScript，遵循 vue-bits.dev 极简创意设计哲学。

## 技术栈

| 依赖 | 版本 | 用途 |
|------|------|------|
| Vue | ^3.3 | Composition API + `<script setup>` + TypeScript |
| Tailwind CSS | ^3 | 样式工具类 |
| GSAP | ^3 | 高性能动画引擎 |
| motion-v | ^11 | Vue 动画库 |
| Lenis | ^1 | 平滑滚动 |
| gl-matrix | ^3 | WebGL2 数学运算 |

## 组件列表

- **CountUp** — 弹簧物理数字计数器
- **AnimatedContent** — 滚动触发 GSAP 位移/缩放动画
- **FadeContent** — 滚动淡入（CSS Transition）
- **Magnet** — 鼠标磁性跟随
- **AnimatedList** — 滚动列表动画 + 键盘导航
- **GlassIcons** — 玻璃态图标网格
- **GlassSurface** — 高级 SVG 滤镜玻璃容器
- **TiltedCard** — 3D 倾斜卡片
- **SpotlightCard** — 光晕卡片
- **Dock** — macOS 风格 Dock 栏
- **Folder** — macOS 风格文件夹
- **PillNav** — 药丸导航
- **StaggeredMenu** — 侧边交错菜单
- **RollingGallery** — 3D 圆柱画廊
- **Stack** — 卡牌堆叠
- **InfiniteMenu** — 3D 球形菜单
- **CardSwap** — 3D 卡片轮换
- **ProfileCard** — 3D 倾斜资料卡
- **ScrollStack** — 滚动卡片堆叠
- **Stepper** — 分步向导

## 设计理念

本项目遵循 [vue-bits.dev](https://vue-bits.dev) 极简创意设计哲学，核心原则包括：玻璃态、3D 透视、微交互、非对称布局。所有组件从零编写，不依赖 vue-bits npm 包，但遵循其设计语言。

## 无障碍

所有组件均响应 `prefers-reduced-motion` 媒体查询，在用户开启减少动效设置时自动跳过动画。