skillfed

inspira-ui

Inspira UI provides over 120 copy-paste animated components designed for Vue 3 and Nuxt 4 projects. Built with TailwindCSS v4, motion-v, GSAP, and Three.js, it covers hero sections, 3D effects, text animations, interactive cursors, and particle systems—all production-tested and MIT-licensed.

Inspira UI delivers 120+ pre-built animated components for Vue and Nuxt applications.

AI-generated summary based on this skill's SKILL.md

196 29 MIT updated by secondsky

Install

secondsky/claude-skills/inspira-ui · repository language: TypeScript

git clone https://github.com/secondsky/claude-skills
cp -r claude-skills/plugins/inspira-ui/skills/inspira-ui ~/.claude/skills/inspira-ui
npx skillfed install secondsky/claude-skills/inspira-ui

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

What is inspira-ui and what components does it offer?

Inspira UI provides over 120 copy-paste animated components designed for Vue 3 and Nuxt 4 projects. Built with TailwindCSS v4, motion-v, GSAP, and Three.js, it covers hero sections, 3D effects, text animations, interactive cursors, and particle systems—all production-tested and MIT-licensed.

Can I use inspira-ui as a vue animated components library?

Yes. Inspira UI is a comprehensive animated components library for Vue 3 and Nuxt 4. It provides pre-built, copy-paste components including hero sections, shimmer buttons, morphing text, particle effects, and interactive backgrounds—ready for modern web projects without additional setup.

How do I set up 3D effects and particle animations in Vue?

Inspira UI integrates Three.js and GSAP for 3D effects and particle animations in Vue applications. The library includes pre-built components for 3D globes, icon clouds, aurora backgrounds, and particle systems. All components are copy-paste ready with TailwindCSS v4 styling included.

How do I resolve TailwindCSS v4 and motion-v integration errors?

Inspira UI handles TailwindCSS v4 and motion-v integration out of the box. All 120+ components are built and tested with both frameworks, eliminating common compatibility issues. Simply copy the components into your project and they work immediately with your existing TailwindCSS v4 setup.

What animated effects can I build for landing pages with inspira-ui?

Inspira UI provides production-ready components for animated landing pages including hero sections with parallax effects, neon border buttons, shimmer effects, morphing text animations, fluid cursors, confetti effects, and aurora backgrounds—all designed to create engaging, interactive landing page experiences.

Does inspira-ui support WebGL cursors and interactive backgrounds?

Yes. Inspira UI includes components for fluid WebGL cursors and interactive background animations. These effects are built with Three.js and GSAP, providing smooth, performant interactions for modern web applications while maintaining compatibility with Vue 3 and Nuxt 4.

SKILL.md

rendered from the published skill — quoted content, verbatim

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

(truncated - see the full file via the links below)

Read as markdown · JSON record · Browse the source repository

File tree — 7 files
plugins/inspira-ui/skills/inspira-ui/SKILL.md
plugins/inspira-ui/skills/inspira-ui/references/CODE_PATTERNS.md
plugins/inspira-ui/skills/inspira-ui/references/SETUP.md
plugins/inspira-ui/skills/inspira-ui/references/TROUBLESHOOTING.md
plugins/inspira-ui/skills/inspira-ui/references/components-list.md
plugins/inspira-ui/skills/inspira-ui/scripts/setup-inspira.sh
plugins/inspira-ui/skills/inspira-ui/scripts/verify-setup.sh

Related skills

Tags

motion-library webgl-effects component-kit visual-effects interactive-ui 3d-graphics css-animation developer-experience ready-to-use