Chapter 136: Cursor & Pointer Effects (Recipes)

Core Idea

Curated recipes from Motion's official examples gallery for cursor & pointer effects. Each entry is implemented in one or more of vanilla JS, React, and Vue; consult the framework-specific example on motion.dev for the full runnable version.

Key Concepts

cursor trail (react): An example of creating a cursor trail with images in Motion for React.
cursor trail velocity (react): An example of creating a cursor trail with velocity-based inertia animations in Motion for React.
cursor floating target (react): An example of creating a floating target with rotating text and hover effects using the Motion+ Cursor and usePointerPosition.
follow pointer with spring (react): An example of making an element follow the pointer with a spring using Motion for React's useSpring hook.
conic gradient pointer (js): An example of creating a dynamic conic gradient that follows the pointer position.
magnetic filings (react): An example of creating a grid of metal filings that rotate to point towards the cursor position using Motion for React.
spring follow cursor (js): An example of a spring animation that follows the cursor.

Code Examples

{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://motion.dev/#org","name":"Motion","url":"https://motion.dev","logo":"https://motion.dev/favicon-512.png","sameAs":["https://x.com/motiondotdev","https://github.com/motiondivision","https://www.youtube.com/@motiondotdev"]},{"@type":"WebSite","@id":"https://motion.dev/#website","url":"https://motion.dev","name":"Motion","publisher":{"@id":"https://motion.dev/#org"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Cursor trail","description":"An example of creating a cursor trail with images in Motion for React.","url":"https://motion.dev/examples/react-cursor-trail","mainEntityOfPage":"https://motion.dev/examples/react-cursor-trail","inLanguage":"en","image":"https://images.motion.dev/og/fresh/v1/site/examples-react-cursor-trail-1sif0eme28g47.png","datePublished":"2025-08-01T00:00:00.000Z","articleSection":"Cursor","author":{"@type":"Person","name":"Matt Perry","url":"https://motion.dev/@matt","image":"https://images.motion.dev/magazine/ulZPf8sPx65JUasbGmCjltf6uEU.png"},"publisher":{"@id":"https://motion.dev/#org"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Motion","item":"https://motion.dev/"},{"@type":"ListItem","position":2,"name":"Examples","item":"https://motion.dev/examples"},{"@type":"ListItem","position":3,"name":"Cursor","item":"https://motion.dev/examples?category=cursor"},{"@type":"ListItem","position":4,"name":"Cursor trail","item":"https://motion.dev/examples/react-cursor-trail"}]}
{"@context":"https://schema.org","@type":"HowTo","name":"Cursor trail","description":"An example of creating a cursor trail with images in Motion for React.","inLanguage":"en","step":[{"@type":"HowToStep","position":1,"name":"Introduction","url":"https://motion.dev/examples/react-cursor-trail#introduction"},{"@type":"HowToStep","position":2,"name":"Get started","url":"https://motion.dev/examples/react-cursor-trail#get-started"}]}

What it demonstrates: cursor trail pattern.

{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://motion.dev/#org","name":"Motion","url":"https://motion.dev","logo":"https://motion.dev/favicon-512.png","sameAs":["https://x.com/motiondotdev","https://github.com/motiondivision","https://www.youtube.com/@motiondotdev"]},{"@type":"WebSite","@id":"https://motion.dev/#website","url":"https://motion.dev","name":"Motion","publisher":{"@id":"https://motion.dev/#org"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"Cursor trail velocity","description":"An example of creating a cursor trail with velocity-based inertia animations in Motion for React.","url":"https://motion.dev/examples/react-cursor-trail-velocity","mainEntityOfPage":"https://motion.dev/examples/react-cursor-trail-velocity","inLanguage":"en","image":"https://images.motion.dev/og/fresh/v1/site/examples-react-cursor-trail-velocity-09nl44xn0u3c2.png","datePublished":"2025-08-01T00:00:00.000Z","articleSection":"Cursor","author":{"@type":"Person","name":"Matt Perry","url":"https://motion.dev/@matt","image":"https://images.motion.dev/magazine/ulZPf8sPx65JUasbGmCjltf6uEU.png"},"publisher":{"@id":"https://motion.dev/#org"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Motion","item":"https://motion.dev/"},{"@type":"ListItem","position":2,"name":"Examples","item":"https://motion.dev/examples"},{"@type":"ListItem","position":3,"name":"Cursor","item":"https://motion.dev/examples?category=cursor"},{"@type":"ListItem","position":4,"name":"Cursor trail velocity","item":"https://motion.dev/examples/react-cursor-trail-velocity"}]}
{"@context":"https://schema.org","@type":"HowTo","name":"Cursor trail velocity","description":"An example of creating a cursor trail with velocity-based inertia animations in Motion for React.","inLanguage":"en","step":[{"@type":"HowToStep","position":1,"name":"Introduction","url":"https://motion.dev/examples/react-cursor-trail-velocity#introduction"},{"@type":"HowToStep","position":2,"name":"Get started","url":"https://motion.dev/examples/react-cursor-trail-velocity#get-started"}]}

What it demonstrates: cursor trail velocity pattern.

Key Takeaways

These are recipe-level compositions of core Motion primitives (variants, gestures, layout, scroll, springs), not new APIs.
Most recipes exist in multiple frameworks with near-identical logic, only the component syntax differs.
Reach for the closest-matching recipe as a starting point, then adapt timing/easing/spring values to the design.

Connects To

Transitions, Keyframes & Variants: recipes here compose those lower-level primitives.
Gestures & Interaction: several recipes layer on drag/hover/press gestures.