Move your mouse aroundTap anywhere to see the cursor
Features
- 🎯 Smooth physics-based cursor animations
- 🔄 Rotation effects based on movement direction
- ⚡ Performance optimized with RAF
- 🎨 Fully customizable cursor design
- 📦 Lightweight and easy to implement
Installation
pnpm dlx shadcn@latest add "https://magicui.design/r/smooth-cursor"
Usage
import { SmoothCursor } from "@/components/ui/smooth-cursor";<SmoothCursor />Props
| Prop | Type | Default | Description |
|---|---|---|---|
cursor | JSX.Element | <DefaultCursorSVG /> | Custom cursor component to replace the default cursor |
springConfig | SpringConfig | See below | Configuration object for the spring animation behavior |
SpringConfig Type
interface SpringConfig {
damping: number; // Controls how quickly the animation settles
stiffness: number; // Controls the spring stiffness
mass: number; // Controls the virtual mass of the animated object
restDelta: number; // Controls the threshold at which animation is considered complete
}Default Spring Configuration
const defaultSpringConfig = {
damping: 45,
stiffness: 400,
mass: 1,
restDelta: 0.001,
};Browser Support
Compatible with all modern browsers that support:
requestAnimationFrame- CSS transforms
- Pointer events
Accessibility
When using this component, consider that:
- Users navigating via keyboard will not see the custom cursor
- You may want to provide alternative visual cues for interactive elements
- Some users may have motion sensitivity, so consider providing a way to disable the animation
Credits
- Credit to @Code_Parth for the original concept and implementation