---
title: "Switch Image Cursor — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Ludovic Losco · Cursors. Switch Image Cursor is a Framer code component that displays images that follow the user’s cursor inside a defined frame.As the cursor…"
canonical: "https://framer.elliotli.dev/component/switch-image-cursor"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/Switch Image Cursor

# Switch Image Cursor

Cursor-following image switcher effect

[View on Framer](https://framer.com/marketplace/components/switch-image-cursor/?via=elliot-li)

![Switch Image Cursor preview image 1](https://framer.elliotli.dev/og/component/switch-image-cursor/53a8dae0a5ee2b1d/1600x1200.jpg)

## Summary

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…

## Description

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**](https://minimum.supply/components/switch-image-cursor)

## ✨ 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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4330

## Details

- **Author**: Ludovic Losco
- **Price**: $10.00
- **Published**: 2025-08-29
- **Updated**: 2026-04-27
- **Added**: 2025-08-19
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…