inspira-ui_skill

Overview

This skill provides 120+ production-ready Vue/Nuxt animated components built with TailwindCSS v4, motion-v, GSAP, and Three.js. It speeds up building animated landing pages, interactive backgrounds, 3D visualizations, and UI micro-interactions with TypeScript-friendly patterns. Components are copy-paste ready, responsive, and optimized for Nuxt/Vue 3 projects.

How this skill works

Inspect the project for required dependencies and CSS variable setup, then copy components into your components/ui folder and import them explicitly. The skill documents required packages (three, ogl, motion-v, tw-animate-css), CSS variables (OkLch color setup), client-only wrappers for WebGL, and TypeScript prop interfaces to avoid common runtime and build errors. It also flags critical pitfalls like accessibility color bugs and missing CSS imports.

When to use it

• Building animated landing pages or hero sections with motion-v and GSAP
• Adding 3D visualizations or interactive backgrounds using Three.js or OGL
• Creating marketing or portfolio sites that need copy-paste animated components
• Integrating responsive, TypeScript-first Vue 3 or Nuxt 4 components quickly
• Troubleshooting setup errors for Tailwind v4, motion-v, or WebGL components

Best practices

• Always use interface-based props with TypeScript instead of object defineProps syntax
• Include explicit Vue imports even if Nuxt auto-imports to avoid silent failures
• Wrap Three.js or WebGL components in ClientOnly when using Nuxt to prevent SSR errors
• Add required CSS imports in main.css: tailwindcss and tw-animate-css to enable animations
• Clean up WebGL resources (cancelAnimationFrame, dispose renderer) in onUnmounted to prevent memory leaks

Example use cases

• Hero section with AuroraBackground, motion-v entrance animations, and ShimmerButton
• Interactive globe or icon cloud using Three.js inside a ClientOnly wrapper
• Fluid cursor or WebGL particle background for immersive portfolio sites
• Text effects like morphing text or glitch for marketing headlines
• Animated buttons and special effects (confetti, neon borders) for product pages