inspira-ui

用途

Inspira UI 用于在 Vue 3 或 Nuxt 4 项目中快速构建带动画与视觉特效的界面。根据资料，它适合以下场景：

带动画效果的着陆页，包含 hero 区块、用户评价与各类效果
需要 3D 可视化与交互元素的现代 Web 应用
具有吸睛背景与文字动画的营销站点
含图片画廊、轮播与展示效果的展示型站点
含自定义光标、特殊效果与粒子系统的交互体验
需要生产可用动画组件的 Vue 3 或 Nuxt 4 项目

主要能力

提供 120+ 个可复用动画组件，采用复制粘贴方式使用，而非传统 npm 库
完整 TypeScript 支持，基于 Vue 3 Composition API
使用 TailwindCSS v4 与 OkLch 色彩空间
响应式设计并针对移动端优化
免费且开源，采用 MIT 许可证
组件涵盖背景效果（Aurora、Cosmic Portal、Particles、Neural Background）、文字动画（Morphing Text、Glitch、Hyper Text、Sparkles Text）、3D 可视化（Globe、3D Carousel、Icon Cloud、World Map）、交互光标（Fluid Cursor、Tailed Cursor、Smooth Cursor）、动画按钮（Shimmer、Ripple、Rainbow、Gradient）与特殊效果（Confetti、Meteors、Neon Border、Glow Border）等类别

使用方式

安装核心依赖（命令中保留原始内容）：

# Required for all components
bun add -d clsx tailwind-merge class-variance-authority tw-animate-css
bun add @vueuse/core motion-v

# Optional: For 3D components (Globe, Cosmic Portal, etc.)
bun add three @types/three

# Optional: For WebGL components (Fluid Cursor, Neural Background, etc.)
bun add ogl

创建 CN 工具函数 lib/utils.ts：

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

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

随后需在主 CSS 中配置 CSS 变量，可参考 references/SETUP.md 中的完整 OkLch 配置。运行 ./scripts/verify-setup.sh 验证环境，再从 inspira-ui.com/components 浏览并复制所需组件到 components/ui/ 目录。

资料还给出了若干使用模式，例如：着陆页中组合 AuroraBackground、motion-v 的 Motion 与 ShimmerButton；props 使用 TypeScript interface 语法并通过 withDefaults 定义默认值；显式导入 Vue 与 @vueuse/core 的 API；WebGL 组件在 onUnmounted 中清理动画帧与 renderer；Nuxt 中 3D 组件用 ClientOnly 包裹。

适用场景与限制

适用于 Vue 3 / Nuxt 4 项目中的动画界面、3D 可视化与交互特效开发，并强调生产可用。资料同时列出需要注意的限制与陷阱：

安装涉及 6 个以上包，包含 three、ogl 等依赖树较大的 3D 库，建议在安装前遵循供应链安全实践，如禁用 post-install 脚本、设置冷却期、安装前审计（可使用 socket 相关工具），并可通过 dependency-upgrade 技能获取完整安全配置
原始文档存在无障碍缺陷：--destructive-foreground 与 --destructive 颜色相同导致文字不可见，资料给出了修正值
main.css 中必须包含 @import "tailwindcss" 与 @import "tw-animate-css"，后者常被遗漏
props 应使用 interface 语法而非对象语法
Nuxt 中 Three.js 组件不加 ClientOnly 会在 SSR 阶段失败
建议使用 as const 对象而非 TypeScript enum

资料称该技能平均可节省约 65% 的 token，并可预防 13+ 类常见问题。

关于收费、价格、具体平台支持范围等进一步信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景与限制