Cursor
Motion+ Cursor is a custom cursor component for React. It makes it quick and simple to build creative cursor effects, or cursor-following animations.
It's exclusive to Motion+ members. Motion+ is a one-time fee, all-in membership that offers exclusive components, premium examples and access to a private Discord community.
With its default settings, it replaces the browser cursor with a dynamic 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.
All changes to width/height happen via Motion's layout animations for the best possible performance.
The cursor can be fully styled with CSS and animated using Motion's variants. 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.
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.
