Image Trail — React Component

A cursor trail that cycles through a configurable image array as you move, with fade-blur transitions and an optional magnetic repulsion effect.

Motion Effectshovermagneticlayoutcursortrailimagesmagneticmotioninteractive

Image Trail

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

spacing

Minimum cursor travel (px) before spawning the next image.

duration

How long (ms) each image stays visible before fading out.

imageSize

Width and height of each trail image (px).

cornerRadius

Border radius of each trail image (px).

fadeInDuration

Fade-in animation duration (seconds).

fadeOutDuration

Fade-out animation duration (seconds).

fadeInBlur

Blur applied to each image on entry (px).

fadeOutBlur

Blur applied to each image on exit (px).

Generated JSX

Copy this into your page.

<ImageTrail
  spacing={40}
  duration={1000}
  imageSize={120}
  cornerRadius={8}
  fadeInDuration={0.3}
  fadeOutDuration={0.5}
  fadeInBlur={0}
  fadeOutBlur={6}
/>

Animation effects

hovermagneticlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Image Trail

Image Trail spawns image thumbnails at cursor positions as the mouse moves across the page, creating a ribbon of imagery that follows cursor movement. Each image appears, scales up briefly, then fades out — building a transient trail behind the cursor. Images are Framer Motion elements with independent lifecycle animations. Use it on photography portfolio pages and image-rich landing pages as a dramatic visual effect that communicates the product's visual nature.

Common use cases

Photography portfolio heroes
Creative agency landing pages
Image product and gallery showcases
Interactive visual brand experiences