$ show unovue/inspira-ui
Inspira UI is a curated collection of beautifully designed, copy-paste-ready Vue/Nuxt UI components, inspired by Aceternity UI and Magic UI. The repository serves both as a component library and a documentation/demo site built with Nuxt 4, Tailwind CSS v4, and a rich ecosystem of animation and WebGL libraries (motion-v, Three.js, OGL, GSAP). The architecture is a standard Nuxt application with i18n (English, French, Chinese), content management via @nuxt/content, and a custom registry system that generates component metadata for CLI installation. Key entry points include the Nuxt configuration (nuxt.config.ts), the app configuration (app.config.ts) for UI theming, and the registry build script (scripts/build-registry.mts) that crawls component files and produces Zod-validated schemas. The primary data flow is static: markdown documentation files in content/ are rendered alongside live interactive playgrounds that allow users to tweak component props via DialKit config panels. External dependencies are heavy but modern, including motion-v for spring animations, Three.js/OGL for WebGL effects, canvas-confetti for particle effects, and @vueuse/core for utilities. The codebase demonstrates consistent patterns (barrel exports, cn() class merging, shader-based backgrounds, context injection for compound components) and a strong emphasis on visual polish and developer experience.
The LLM identified 5 files worth highlighting for reuse:
A reusable base component that renders arbitrary HTML content into a WebGL shader canvas using a fallback snapshot capture. It is the foundation for a family of shader effects (HtmlLiquid, HtmlBlaze, HtmlAscii, etc.) and can be extracted to apply custom GLSL shaders to any DOM element with minimal modification.
A sophisticated WebGL grid component with infinite scrolling, disposal management, event handling, and post-processing shaders. It demonstrates advanced OGL usage, custom shader compilation, and performance-conscious resource management (DisposalManager, EventHandler, GridManager classes). Highly reusable for any project needing a dynamic, shader-driven grid background.
A full-featured color picker component supporting multiple color formats (hex, rgb, hsl), swatches, contrast ratio display, and keyboard accessibility. It is self-contained with sub-components (ContrastRatio, ObjectColorInput) and uses @uiw/color-convert for conversions. Demonstrates clean composition and accessibility patterns.
A fluid simulation cursor effect implemented entirely in WebGL with custom shaders and FBO management. It is configurable via props (color, density, speed) and can be dropped into any project to add an interactive fluid trail. Demonstrates advanced WebGL techniques and real-time simulation.
A highly configurable marquee component that animates content along an SVG path. Supports drag interaction, scroll-based speed control, hover slowdown, and responsive scaling. It is self-contained, uses motion-v for spring physics, and can be reused for any path-based scrolling text or image carousel.