Introducing magnetic and zoning features in Motion+ Cursor

Motion+ Cursor is a creative cursor component for React and Vue. Its simple API makes it quick to spin up cursor effects of any kind, from floating tooltips, image previews, to entire cursor replacements.

Today, we're adding two powerful new features to allow your cursors to react dynamically to your site content: Magnetic cursors and cursor zones.

Magnetic cursors

Magnetic cursors allow your custom cursor to snap to a pointer target.

Depending on the strength of the snap, a cursor can either stick completely onto the target, or respond with a subtle "pull" like in the example above.

<Cursor magnetic={{ snap: 1 }} /> // Complete snap/very strong pull

<Cursor magnetic={{ snap: 0.2 }} /> // Weak pull

By default, a magnetic cursor will morph to the same shape as the target using Motion's layout animations. But this can be disabled with the morph option:

<Cursor magnetic={{ morph: false }} />

In the iOS pointer example you'll notice the button label is also being pulled back towards the Cursor, like a mutual attraction. This is implemented with the new useMagneticPull hook.

const ref = useRef(null)
const { x, y } = useMagneticPull(ref, 0.1)

return <motion.button ref={ref} style={{ x, y }} />

When the provided ref becomes the active pointer target, the returned x/y motion values will update with an offset that pulls the element back towards the cursor. This new hook can be used together with custom cursors, or entirely independently.

Cursor zones

It's now easier to adapt our cursor (or even add/remove one) based on the currently hovered "zone", or area of the web page.

We can define a zone with the data-cursor-zone attribute:

<img data-cursor-zone="gallery-preview" />

We can then use useCursorState() to respond when the cursor enters or leaves this zone:

const { zone } = useCursorState()

return (
  <Cursor style={cursor}>
    {zone === "gallery-preview" ? (
        <p style={caption}>View gallery</p>
    ) : null}
  </Cursor>
)

In this example we're choosing to render content into the cursor (or not). Equally, we could:

• Change the cursor color

• Change the mix-blend-mode

• Change size/shape

• Add/remove a custom cursor

You have full freedom to invent ways in which you cursor can adapt to cursor zones.

Accessibility

Motion+ Cursor opens up the full spectrum of cursor effects, from sober zone-isolated tooltips, to experimental full cursor replacements.

Different types of site will lie somewhere on this spectrum, but one thing they should all have in common is to respect users who have enabled prefers reduced motion in their OS settings.

Motion makes this straightforward with its useReducedMotion hook.

const shouldReduceMotion = useReducedMotion()

return shouldReduceMotion ? null : <Cursor />

How do I get Motion+ Cursor?

Motion+ Cursor is a premium API included in Motion+.

Motion+ is a one-time fee, lifetime membership. Besides supporting Motion, it gets you access to:

• Premium APIs like Cursor, AnimateNumber and splitText

• Source code to all Motion Examples

• Early access content and APIs

• A private Discord with over 200 Motion superusers

Hope to see you in the Discord!