Built for Motion
Log in

GSAP Cursor Image Trail Hero

proMouse Move
Loading preview

Overview

Images drop along the cursor's path, drift on with its momentum and fade away, leaving a short-lived trail across the hero. Uses a fixed pool of image elements, so it never piles up nodes.

A new image drops every time the cursor travels past a threshold, carrying on a little in the direction you were moving before it shrinks and fades.

Details

Category
Cursor
Interaction
Mouse Move
Trigger
Mouse Move
Languages
React, TypeScript, Tailwind

(01)Keep exploring

All 8 components

Built with the same techniques

(02)FAQ

GSAP Cursor Image Trail Hero — FAQ

01How many images do I need?

Any number. Five to ten different images look best; they're cycled through a pool of reusable elements.

02Can I change the image size and shape?

Pass imageClassName with your own Tailwind classes for width, aspect ratio, radius or shadow.