Components

Nuxt Motion Block provides a rich set of components to add beautiful animations and interactions to your Nuxt applications. Each component is designed with performance, accessibility, and customization in mind.

Categories

The components are organized into several categories based on their functionality:

Layout & Background

• AnimatedBackground - Animated background that follows interactive elements
• AnimatedGroup - Groups animations together with coordinated timing

Interactive Elements

• Dock - macOS-style dock with magnification effects

Numbers & Text

• AnimatedNumber - Animated numeric value with smooth transitions
• CountingNumber - Number counter with various animation effects
• SlidingNumber - Number that slides in with animation effects
• TextGlitch - Glitch effect for text elements
• TextGradient - Text with gradient color effects
• TextLoop - Text that loops through different values
• TextMorph - Text that morphs between different strings
• TextReveal - Text reveal animation with various effects
• TextRoll - Text that rolls in with 3D effects
• TextScramble - Text scramble effect with random character transitions
• TextShimmer - Text with shimmer effect
• TextShimmerWave - Text with wave-like shimmer effect
• TypingText - Typing effect for text content
• WordRotate - Words that rotate with 3D effects

Visual Effects

• BorderTrail - Animated border effect with trailing particles
• GlowEffect - Glowing effect around elements
• ProgressiveBlur - Progressive blur effect that increases with distance
• Spotlight - Spotlight effect that follows cursor movement

Interaction & Movement

• Cursor - Custom cursor with various effects
• ForceDot - Interactive dot with physics-based movement
• Magnetic - Magnetic effect that attracts elements to cursor proximity
• Tilt - 3D tilt effect based on cursor movement

Scroll & Viewport

• InView - Trigger animations when elements enter the viewport
• ScrollProgress - Progress bar that tracks scroll position

Composables

• useCanvasCursor - Custom cursor implementation with canvas-based effects
• useFluidCursor - Fluid cursor effects with particle systems

All components are built with performance in mind and follow accessibility best practices. They can be easily customized through props, slots, and CSS classes.