Introduction

Nuxt Motion Block is a streamlined UI library that extends Nuxt UI with 260+ motion-enhanced components powered by motion-v. It provides a collection of beautifully crafted, interactive UI components that add life and personality to your Nuxt applications.

Core features

Nuxt Motion Block offers a comprehensive set of features designed to enhance your Nuxt UI experience:

• 260+ Motion-Enhanced Components: From animated backgrounds to interactive elements, all components are designed with motion in mind.
• Powered by motion-v: Leverages the powerful motion-v library for smooth, performant animations.
• Seamless Nuxt UI Integration: Works perfectly with Nuxt UI components and styling system.
• Auto-Registered Components: All components are automatically registered with the configurable prefix 'M'.
• Built-in CSS: CSS is automatically included via the module configuration.
• Tree-Shakable: Only include the components you actually use in your application.
• Accessibility Ready: Components follow accessibility best practices with proper ARIA attributes.
• Built for speed: Tuned for speed with throttling for mouse events and efficient animation libraries.

What's inside

The components are grouped into families rather than shipped as one pile:

• AI: chat surfaces, reasoning, tool calls, citations and sources, plus the orb character in AI Orb Face Mouth.
• Backgrounds, effects and 3D: animated backgrounds, beams, spotlight, glow and border effects, tilt and magnetic interaction, 3D card and item.
• Interface: buttons, cards, forms and inputs, loaders and progress, navigation and toolbars, carousels, transitions.
• Motion and text: scroll reveals, in-view triggers, counters and animated numbers, kinetic text effects from shimmer to scramble.

Browse the component index for the full set, or start with Installation and Usage.