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 # Opt...