名称: inspira-ui 描述: 120+个Vue/Nuxt动画组件，使用TailwindCSS v4、motion-v、GSAP、Three.js。适用于英雄区段、3D效果、交互式背景，或遇到设置、CSS变量、motion-v集成错误。许可证: MIT 允许工具: [“bash”, “read”, “glob”, “grep”] 元数据: 版本: 2.0.0 最后验证: 2025-11-16 生产测试: true 令牌节省: ~65% 预防错误: 13+ 关键词: - vue - nuxt - vue 3 - nuxt 4 - inspira ui - 动画组件 - tailwindcss v4 - motion-v - three.js - ogl - webgl - 极光背景 - 闪烁按钮 - 变形文本 - 3d 地球 - 流体光标 - 彩纸 - 霓虹边框 - 图标云 - 翻转卡片

灵感UI - 动画Vue/Nuxt组件库

灵感UI是一个包含120+个可复用动画组件的集合，基于TailwindCSS v4、motion-v、GSAP和Three.js开发，旨在帮助更快地构建美观的Vue和Nuxt应用程序。

何时使用此技能

使用灵感UI当构建：

动画落地页面 带有英雄区段、推荐和效果
现代网页应用 需要3D可视化和交互元素
营销网站 带有引人注目的背景和文本动画
作品集网站 带有图片库、轮播和展示效果
交互式体验 带有自定义光标、特效和粒子系统
Vue 3或Nuxt 4项目 需要生产就绪的动画组件

关键好处:

120+个复制粘贴组件（非传统npm库）
完整的TypeScript支持，使用Vue 3组合API
TailwindCSS v4，带有OkLch色彩空间
响应式和移动优化
免费和开源（MIT许可证）

快速开始

1. 安装核心依赖

# 所有组件必需
bun add -d clsx tailwind-merge class-variance-authority tw-animate-css
bun add @vueuse/core motion-v

# 可选：用于3D组件（地球、宇宙门户等）
bun add three @types/three

# 可选：用于WebGL组件（流体光标、神经背景等）
bun add ogl

2. 设置CN实用工具

创建 lib/utils.ts:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. 配置CSS变量

添加到你的 main.css。查看 references/SETUP.md 获取完整的CSS配置和OkLch颜色。

4. 验证设置

./scripts/verify-setup.sh

5. 复制组件

浏览 inspira-ui.com/components，复制所需内容到 components/ui/。

组件选择工作流程

你需要什么类型的效果？

背景效果 → 极光、宇宙门户、粒子、神经背景
- 查看：references/components-list.md#backgrounds
文本动画 → 变形文本、故障、超文本、火花文本
- 查看：references/components-list.md#text-animations
3D可视化 → 地球、3D轮播、图标云、世界地图
- 依赖：bun add three @types/three
- 查看：references/components-list.md#visualization
交互式光标 → 流体光标、尾随光标、平滑光标
- 依赖：bun add ogl（用于WebGL光标）
- 查看：references/components-list.md#cursors
动画按钮 → 闪烁、涟漪、彩虹、渐变
- 无额外依赖
- 查看：references/components-list.md#buttons
特效 → 彩纸、流星、霓虹边框、发光边框
- 查看：references/components-list.md#special-effects

获取完整实现细节（属性、完整代码、安装）：获取 https://inspira-ui.com/docs/llms-full.txt - 为LLM优化的文档，带有结构化属性表格和工作代码示例。

核心使用模式

模式1：动画落地页面

<template>
  <AuroraBackground>
    <Motion
      :initial="{ opacity: 0, y: 40, filter: 'blur(10px)' }"
      :while-in-view="{ opacity: 1, y: 0, filter: 'blur(0px)' }"
      :transition="{ delay: 0.3, duration: 0.8, ease: 'easeInOut' }"
      class="relative flex flex-col items-center gap-4 px-4"
    >
      <div class="text-center text-3xl font-bold md:text-7xl">
        你的惊人标题
      </div>
      <ShimmerButton>开始使用</ShimmerButton>
    </Motion>
  </AuroraBackground>
</template>

<script setup lang="ts">
import { Motion } from "motion-v";
import AuroraBackground from "~/components/ui/AuroraBackground.vue";
import ShimmerButton from "~/components/ui/ShimmerButton.vue";
</script>

模式2：带TypeScript接口的属性

<script setup lang="ts">
// 始终使用基于接口的属性
interface Props {
  title: string;
  count?: number;
  variant?: "primary" | "secondary";
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
  variant: "primary",
});
</script>

模式3：显式导入（对Vue.js兼容性至关重要）

<script setup lang="ts">
// 即使有Nuxt自动导入，也始终包含显式导入
import { ref, onMounted, computed } from "vue";
import { useWindowSize } from "@vueuse/core";

const { width } = useWindowSize();
</script>

模式4：WebGL组件清理

<script setup lang="ts">
import { onUnmounted } from "vue";

let animationFrame: number;
let renderer: any;

onUnmounted(() => {
  // 关键：清理WebGL资源以防止内存泄漏
  if (animationFrame) cancelAnimationFrame(animationFrame);
  if (renderer) renderer.dispose();
});
</script>

模式5：仅客户端包装器（Nuxt）

<template>
  <ClientOnly>
    <FluidCursor />
  </ClientOnly>
</template>

关键陷阱要避免

1. 无障碍性错误（关键）

原始灵感UI文档将 --destructive-foreground 设置为与 --destructive 相同的颜色，导致文本不可见。使用修正值：

:root {
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0); /* 修正 */
}

2. 缺少CSS导入

/* 在main.css中必需 */
@import "tailwindcss";
@import "tw-animate-css";  /* 常被忘记！ */

3. 错误的属性语法

// 不要：对象语法
const props = defineProps({ title: { type: String } });

// 做：接口语法
interface Props { title: string; }
const props = defineProps<Props>();

4. 没有ClientOnly的Three.js（Nuxt）

<!-- 错误：SSR期间会失败 -->
<GithubGlobe :markers="markers" />

<!-- 正确 -->
<ClientOnly>
  <GithubGlobe :markers="markers" />
</ClientOnly>

5. 使用枚举而非 `as const`

// 不要：TypeScript枚举
enum ButtonVariant { Primary = "primary" }

// 做：as const 对象
const ButtonVariants = { Primary: "primary" } as const;

令牌效率

平均令牌节省: ~65%

无技能：~15k令牌（设置试错）
有技能：~5k令牌（直接实现）

预防错误: 13+个常见问题，包括：

关键无障碍性错误（destructive-foreground）
TailwindCSS v4 CSS变量配置错误
缺少 @import "tw-animate-css"
Motion-V设置问题
Three.js/OGL没有ClientOnly
属性用对象语法而非接口类型
缺少显式导入

详细文档

完整设置和所有CSS变量: references/SETUP.md

所有120+组件和依赖: references/components-list.md

常见问题排除: references/TROUBLESHOOTING.md

TypeScript模式和约定: references/CODE_PATTERNS.md

关键词

框架: Vue, Vue 3, Nuxt, Nuxt 4, 组合API, script setup

样式: TailwindCSS v4, OkLch, CSS变量, 深色模式

动画: motion-v, GSAP, Three.js, WebGL, OGL, canvas

组件: 极光背景, 闪烁按钮, 变形文本, 3D地球, 流体光标, 彩纸, 霓虹边框, 图标云, 翻转卡片, 粒子

用例: 落地页面, 英雄区段, 动画背景, 交互式UI, 营销网站, 作品集, 3D网站

解决的问题: Vue动画, Nuxt动画, 动画组件, 3D效果, 粒子效果, 现代UI效果

资源

官方文档: https://inspira-ui.com/docs
为LLM优化的文档: https://inspira-ui.com/docs/llms-full.txt（完整属性、代码示例、安装）
组件画廊: https://inspira-ui.com/components
GitHub仓库: https://github.com/unovue/inspira-ui
Discord社区: https://discord.gg/Xbh5DwJRc9

生产状态: ✅ 生产就绪 令牌效率: ✅ ~65%节省 错误预防: ✅ 13+个常见问题预防 最后更新: 2025-11-12

灵感UI动画组件库 inspira-ui

灵感UI - 动画Vue/Nuxt组件库

目录

何时使用此技能

快速开始

1. 安装核心依赖

2. 设置CN实用工具

3. 配置CSS变量

4. 验证设置

5. 复制组件

组件选择工作流程

核心使用模式

模式1：动画落地页面

模式2：带TypeScript接口的属性

模式3：显式导入（对Vue.js兼容性至关重要）

模式4：WebGL组件清理

模式5：仅客户端包装器（Nuxt）

关键陷阱要避免

1. 无障碍性错误（关键）

2. 缺少CSS导入

3. 错误的属性语法

4. 没有ClientOnly的Three.js（Nuxt）

5. 使用枚举而非 `as const`

令牌效率

详细文档

关键词

资源

灵感UI - 动画Vue/Nuxt组件库

目录

何时使用此技能

快速开始

1. 安装核心依赖

2. 设置CN实用工具

3. 配置CSS变量

4. 验证设置

5. 复制组件

组件选择工作流程

核心使用模式

模式1：动画落地页面

模式2：带TypeScript接口的属性

模式3：显式导入（对Vue.js兼容性至关重要）

模式4：WebGL组件清理

模式5：仅客户端包装器（Nuxt）

关键陷阱要避免

1. 无障碍性错误（关键）

2. 缺少CSS导入

3. 错误的属性语法

4. 没有ClientOnly的Three.js（Nuxt）

5. 使用枚举而非 as const

令牌效率

详细文档

关键词

资源

5. 使用枚举而非 `as const`