Inspira UI 是一款专为 Vue 3 和 Nuxt 开发者打造的开源动画组件库，结合了 Tailwind CSS 和 @vueuse/motion，旨在帮助开发者快速构建高质量、视觉吸引力强的现代网站。([DEV Community][1])

🚀 核心亮点

• Vue 3 & Nuxt 原生支持：深度集成 Vue 3 响应式系统和 Nuxt SSR 能力，适用于 SPA 和 SSR 项目。 ([GitHub][2])

• 丰富的动画组件：内置多种动效，如悬浮卡片、流体渐变、3D 地球旋转等，轻松实现炫酷交互。

• 高度可定制：每个组件都支持自定义样式和动画效果，满足不同项目的设计需求。

• 轻量高性能：组件库经过优化，确保快速加载和流畅运行，即使在移动设备上也能提供出色的用户体验。 ([Kelen][3])

• 开源社区驱动：完全开源，欢迎社区贡献和反馈，持续迭代更新。

🎨 特色组件示例

• 输入框悬浮效果：鼠标悬停时触发渐变边框或阴影，提升用户交互体验。 ([Kelen][3])

• 上传组件动效：文件上传时展示动态动画，区别于传统上传组件。 ([Kelen][3])

• 滚动触发背景动画：根据用户滚动操作触发动态背景动画，使页面更具活力。 ([Kelen][3])

• LOGO 发光特效：通过渐变颜色和动态光效，使品牌 LOGO 更加醒目。 ([Kelen][3])

• GitHub 地球仪特效：提供 3D 地球模型组件，鼠标悬停时触发旋转和放大效果，营造沉浸式视觉体验。 ([Kelen][3])

🛠️ 快速上手指南

1. 创建 Vue 3 项目：

   npm create vite@latest my-vue-app -- --template vue-ts
   cd my-vue-app
   npm install
   

2. 安装 Tailwind CSS：

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

在 tailwind.config.js 中添加内容路径：

module.exports = {
  content: ["./src/**/*.{html,js,vue,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. 安装 Inspira UI 及相关依赖：

   npm install -D @inspira-ui/plugins clsx tailwind-merge class-variance-authority tailwindcss-animate
   npm install @vueuse/core @vueuse/motion
   

4. 配置项目别名（可选）：

   在 vite.config.ts 中添加：

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import path from "path";
   
   export default defineConfig({
     plugins: [vue()],
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "src"),
       },
     },
   });
   

在 tsconfig.json 中添加：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

🌐 资源链接

• 官方网站：https://inspira-ui.com/

• GitHub 仓库：https://github.com/unovue/inspira-ui([GitHub][2])

如果你希望在 Vue 3 或 Nuxt 项目中快速实现炫酷的动画效果，Inspira UI 是一个值得尝试的组件库。欢迎访问其官方网站或 GitHub 仓库，了解更多信息并参与社区贡献。