Switch Image Cursor

Switch Image Cursor

Switch Image Cursor is a Framer code component that displays images that follow the user’s cursor inside a defined frame.As the cursor moves, the follower smoothly tracks the movement and switches between images based on cursor travel distance.

👉 Try it here

✨ Features

• Cursor-following image element

• Smooth spring-based motion with speed & damping controls

• Automatic image cycling after configurable cursor travel distance

• Optional tilt effect based on cursor movement

• Configurable size, border, shadow, and overflow

• Fade-in/out animations on hover and between images

• Works with responsive images

⚙️ Property Controls

Items

• Items: Add up to 60 images to be displayed by the follower.

Behavior

• Every (px): Number of pixels the cursor must travel before switching to the next image.

• Speed: How fast the follower catches up to the cursor.

• Smoothness: How much damping is applied (higher = more glide).

• Tilt (°): Maximum rotation based on horizontal motion.

Style

• Image Size: Width and height of the follower image (supports px, %, vw, vh).

• Type: Fit (contain) or Fill (cover) for image scaling.

• Overflow: Hide or allow the follower to bleed outside the frame.

• Border: Add stroke around the image.

• Radius: Corner rounding (default: 0px).

• Shadow: Apply a box shadow.

Animation

• Switch: Cross-fade time when switching between images (default: 0s).

• Enter/Exit: Fade duration when cursor enters or leaves the component.

🚀 Usage

1. Drag the component onto your canvas.

2. Add one or more images under the Items control.

3. Adjust size, behavior, and animation settings to your preference.

4. Preview your project — the image will smoothly follow your cursor and switch as you move.

💡 Tips

• Use short distances (px) for rapid cycling, or larger ones for a slower effect.

• Set Switch = 0s for instant image changes, or increase for smoother fades.

• Combine with transparent PNGs for creative visual effects.

• Works best inside a fixed-size frame with overflow set to visible.

🧩 Example Use Cases

• Image previews that follow cursor movement.

• Hover-driven galleries or portfolio showcases.

• Playful interactive effects on landing pages.

• Cursor-driven storytelling visuals.