PickYourOwnCursor: Premium Interactions Component by Maini Da Costa

Replace the default cursor with any image, GIF or Lottie animation. Swap on hover, click and dark mode. Add trail, ripple and drop shadow. Works anywhere in Framer.

About this Component

🖱️ Custom cursor for any image, GIF or Lottie (Framer Component)

Drag it anywhere — full page or individual sections. Replace the default cursor with any image, animated GIF or Lottie file. Swap on hover, click and dark mode. No code needed.

What's included:

Custom Cursor follows your mouse across any container, displaying your chosen image with smooth positioning, optional trail and drop shadow.

Hover & Click States swap the cursor image automatically — show a different cursor when hovering links and buttons, and another while clicking. Works with any image format.

Dark Mode Support detects your site's light or dark theme in real time and switches to your designated cursor automatically — no toggles, no reloads.

8 customizable features:🖼️ Any image format · 🎞 Animated GIF · ✨ Lottie JSON · 🌠 Trail · 💫 Click ripple · 🌑 Drop shadow · 🎭 Blend modes · 🌗 Dark mode

Fully customizable:

Cursor image (PNG, SVG, GIF, WebP or Lottie JSON)
Separate images for hover and click states
Trail length and opacity
Click ripple color, size and count
Drop shadow color, blur and offset
Blend mode (Normal, Screen, Difference and more)
Anchor point (tip position)
Auto ripple color for light and dark sites

Works anywhere in Framer — drop it on a full page or isolate it to a section or hero. Hides automatically on mobile and tablet. Responsive by default.