Cursor: Floating target

An example of creating a floating target with rotating text and hover effects using the Motion+ Cursor and usePointerPosition.

Time: 5 min
Difficulty: Intermediate
Access: Motion+

Matt PerryAugust 21, 2025

Introduction

The Floating Target example creates a rotating button that reacts to your cursor with a smooth spring animation. As well as creating a custom usePointerReaction hook, we'll use several Motion APIs:

The usePointerPosition hook from Motion+ for tracking cursor position.
The useTransform and useSpring hooks for smooth cursor following.
The useAnimate hook for continuous rotation.
The Cursor component from Motion+ for custom cursor effects.
Motion variants for hover and press animations.