Images spawn beneath the cursor while moving, forming a smooth animated trail that scales in and fades away.
Image Trail is a cursor-driven interaction that generates a flowing sequence of images along the user's pointer path. When the cursor moves beyond a configurable distance threshold, a pooled image element appears under the pointer, scales into view, and then gradually fades while drifting downward. The system uses element pooling and requestAnimationFrame scheduling to maintain smooth performance even during rapid cursor movement.
npm i gsap @gsap/react
Ideal for hero sections, creative portfolios, interactive galleries, and experimental landing pages where cursor motion becomes part of the visual experience.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | GSAP easing function controlling how images scale in and fade out. |
| duration | number | Duration (in seconds) for the image scale-in and fade-out animations. |
| threshold | number | Minimum cursor movement distance required before spawning a new image in the trail. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code, it is already optimized and production-ready out of the box.
© 2026 dropui.design