inspira-ui

# Inspira UI - Animated Vue/Nuxt Component Library

Inspira UI is a collection of 120+ reusable, animated components powered by TailwindCSS v4, motion-v, GSAP, and Three.js — crafted to help ship beautiful Vue and Nuxt applications faster.

## Table of Contents

- [When to Use](#when-to-use-this-skill)
- [Quick Start](#quick-start)
- [Component Selection](#component-selection-workflow)
- [Core Patterns](#core-usage-patterns)
- [Critical Pitfalls](#critical-pitfalls-to-avoid)
- [Detailed References](#detailed-documentation)

## When to Use This Skill

Use Inspira UI when building:
- **Animated landing pages** with hero sections, testimonials, and effects
- **Modern web applications** requiring 3D visualizations and interactive elements
- **Marketing sites** with eye-catching backgrounds and text animations
- **Portfolio sites** with image galleries, carousels, and showcase effects
- **Interactive experiences** with custom cursors, special effects, and particle systems
- **Vue 3 or Nuxt 4 projects** requiring production-ready animated components

**Key Benefits**:
- 120+ copy-paste components (not a traditional npm library)
- Full TypeScript support with Vue 3 Composition API
- TailwindCSS v4 with OkLch color space
- Responsive and mobile-optimized
- Free and open source (MIT license)

## Quick Start

### 1. Install Core Dependencies

```bash
# 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
```

### 2. Setup CN Utility

Create `lib/utils.ts`:

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

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

### 3. Configure CSS Variables

Add to your `main.css`. See [references/SETUP.md](reference