Motion+

Cursor trail

An example of creating a cursor trail with images in Motion for React.

Time
5 min
Difficulty
Intermediate
Access
Motion+
>Live exampleOpen in new tab

Introduction

The cursor trail example shows how to spawn images as the user's cursor moves around the screen.

In this tutorial, we'll learn how to use usePointerPosition and useTransform to calculate the distance the mouse has traveled, and when it passes a configurable threshold, spawn an image at that position.

By passing the images to AnimatePresence, we can also animate them away after a configurable duration of time.