Cursor

Cursor is a creative cursor component for React. It makes it easy to build custom cursor and follow cursor effects.

With its default settings, it replaces the browser cursor with a dynamic cursor.

<Cursor />

This cursor automatically detects the types of content it's hovering over. When hovering a link or button, it grows. When it's pressed, it shrinks. It also detects disabled status.

When hovering selectable text, it transforms into a text selector that grows with the size of the text.

The cursor can be fully styled with CSS and animated using Motion's variants. Beyond that, it's also possible to set custom content when hovering over specific elements.

With only a prop, we can create a follow cursor effect. Great for previews or popup information.

<Cursor follow />

We can also render as many cursors as we like, all at the same time. Attaching them to the cursor with springs of varying strengths.

In this guide, we'll learn how to install Cursor, customise it with its various options and useCursorState hook.