120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.
Generates animated Vue/Nuxt components with TailwindCSS v4, motion-v, GSAP, and Three.js for landing pages and interactive UIs.
npx claudepluginhub secondsky/claude-skillsThis skill is limited to using the following tools:
references/CODE_PATTERNS.mdreferences/SETUP.mdreferences/TROUBLESHOOTING.mdreferences/components-list.mdscripts/setup-inspira.shscripts/verify-setup.shInspira 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.
Use Inspira UI when building:
Key Benefits:
# 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
Create lib/utils.ts:
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Add to your main.css. See references/SETUP.md for complete CSS configuration with OkLch colors.
./scripts/verify-setup.sh
Browse inspira-ui.com/components, copy what you need into components/ui/.
What type of effect do you need?
Background Effects → Aurora, Cosmic Portal, Particles, Neural Background
Text Animations → Morphing Text, Glitch, Hyper Text, Sparkles Text
3D Visualizations → Globe, 3D Carousel, Icon Cloud, World Map
bun add three @types/threeInteractive Cursors → Fluid Cursor, Tailed Cursor, Smooth Cursor
bun add ogl (for WebGL cursors)Animated Buttons → Shimmer, Ripple, Rainbow, Gradient
Special Effects → Confetti, Meteors, Neon Border, Glow Border
For complete implementation details (props, full code, installation): Fetch https://inspira-ui.com/docs/llms-full.txt - LLM-optimized documentation with structured props tables and working code examples.
<template>
<AuroraBackground>
<Motion
:initial="{ opacity: 0, y: 40, filter: 'blur(10px)' }"
:while-in-view="{ opacity: 1, y: 0, filter: 'blur(0px)' }"
:transition="{ delay: 0.3, duration: 0.8, ease: 'easeInOut' }"
class="relative flex flex-col items-center gap-4 px-4"
>
<div class="text-center text-3xl font-bold md:text-7xl">
Your amazing headline
</div>
<ShimmerButton>Get Started</ShimmerButton>
</Motion>
</AuroraBackground>
</template>
<script setup lang="ts">
import { Motion } from "motion-v";
import AuroraBackground from "~/components/ui/AuroraBackground.vue";
import ShimmerButton from "~/components/ui/ShimmerButton.vue";
</script>
<script setup lang="ts">
// ALWAYS use interface-based props
interface Props {
title: string;
count?: number;
variant?: "primary" | "secondary";
}
const props = withDefaults(defineProps<Props>(), {
count: 0,
variant: "primary",
});
</script>
<script setup lang="ts">
// ALWAYS include explicit imports even with Nuxt auto-imports
import { ref, onMounted, computed } from "vue";
import { useWindowSize } from "@vueuse/core";
const { width } = useWindowSize();
</script>
<script setup lang="ts">
import { onUnmounted } from "vue";
let animationFrame: number;
let renderer: any;
onUnmounted(() => {
// CRITICAL: Clean up WebGL resources to prevent memory leaks
if (animationFrame) cancelAnimationFrame(animationFrame);
if (renderer) renderer.dispose();
});
</script>
<template>
<ClientOnly>
<FluidCursor />
</ClientOnly>
</template>
The original Inspira UI docs have --destructive-foreground set to the same color as --destructive, making text invisible. Use the corrected value:
:root {
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0); /* CORRECTED */
}
/* REQUIRED in main.css */
@import "tailwindcss";
@import "tw-animate-css"; /* Often forgotten! */
// DON'T: Object syntax
const props = defineProps({ title: { type: String } });
// DO: Interface syntax
interface Props { title: string; }
const props = defineProps<Props>();
<!-- WRONG: Will fail during SSR -->
<GithubGlobe :markers="markers" />
<!-- CORRECT -->
<ClientOnly>
<GithubGlobe :markers="markers" />
</ClientOnly>
as const// DON'T: TypeScript enums
enum ButtonVariant { Primary = "primary" }
// DO: as const objects
const ButtonVariants = { Primary: "primary" } as const;
Average Token Savings: ~65%
Errors Prevented: 13+ common issues including:
@import "tw-animate-css"For complete setup with all CSS variables: references/SETUP.md
For all 120+ components with dependencies: references/components-list.md
For troubleshooting common issues: references/TROUBLESHOOTING.md
For TypeScript patterns and conventions: references/CODE_PATTERNS.md
Frameworks: Vue, Vue 3, Nuxt, Nuxt 4, Composition API, script setup
Styling: TailwindCSS v4, OkLch, CSS variables, dark mode
Animation: motion-v, GSAP, Three.js, WebGL, OGL, canvas
Components: aurora background, shimmer button, morphing text, 3D globe, fluid cursor, confetti, neon border, icon cloud, flip card, particles
Use Cases: landing pages, hero sections, animated backgrounds, interactive UI, marketing sites, portfolios, 3D websites
Problems Solved: Vue animations, Nuxt animations, animated components, 3D effects, particle effects, modern UI effects
Production Status: ✅ Production-Ready Token Efficiency: ✅ ~65% savings Error Prevention: ✅ 13+ common issues prevented Last Updated: 2025-11-12
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.