Image Cursor

Image Cursor transforms the way users interact with your site by replacing the default cursor with an animated image that smoothly follows movement and reveals on hover. It’s perfect for portfolios, galleries, or editorial layouts where you want to add a touch of cinematic motion and personality.

This component uses Framer Motion springs for natural, lag-free animation the cursor glides behind the pointer with subtle bounce for a premium, tactile feel. You can display a custom image, brand visual, or preview thumbnail, and even attach a descriptive label for context or storytelling.

✨ Key Features

• Smooth motion tracking — Cursor follows mouse movement with spring-based animation.

• Attach or global mode — Restrict to a parent element or use site-wide.

• Custom image support — Upload or link to any image (JPG, PNG, SVG, WebP, etc.).

• Optional label — Add text below your image for captions or descriptions.

• Fully customizable — Control image size, bounce strength, label font, colors, and border styling.

💡 Perfect for

• Creative portfolios and studios

• Gallery and showcase sections

• Hover previews or branded interactions

• Story-driven or cinematic websites

🎨 How to Use

1. Drag Custom Cursor into your canvas.

2. Choose Attach to Parent if you want the effect limited to that section, or turn it off for global coverage.

3. Upload or link your preferred image and adjust its size.

4. Optionally, enable Show Label and customize text, font, and color.

5. Adjust Spring Bounce for your preferred motion intensity.

You now have a fully animated, brand-driven cursor that reacts in real-time no code, no setup, just motion that feels alive.