ExamplesCursor

Cursor trail

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

Tutorial
Tutorial time
5 min
Difficulty

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.

Related examples

Latest in React