Does this replace hover on buttons?

No. Buttons still need their own hover, focus and pressed states.

Will this hurt clicking?

It will if the follower sits in the way, or if you hide the system cursor before the replacement is ready. pointer-events none on the drawing, and hide the arrow last.

Can I use it on a form?

You can, and you will fight text selection, carets and drag. Keep the system pointer on product UI.

Custom cursor

A custom cursor hides the system pointer and draws one of your own that follows it. The rest of the page still has to work with a normal pointer, because plenty of people will never see yours.

Buttons and controlsBuild difficulty: Easygsap.quickTo

Also called Custom pointer, Cursor follower, Dot cursor, Cursor replace.

Here it is working.

Move the pointer here

Move inside the box. The disc is late on purpose.

For designers

This is a page-level choice, not a control. Magnetic button pulls one target. A fill paints one target. A custom cursor asks every view to play along: links, inputs, disabled states, text selection. If you cannot honour those, keep the system pointer. Use it on a spacious marketing view or a gallery, where targets are large. Skip it in a settings page, a table, or anything with text fields. Hide the system cursor only after the replacement is running. If you hide it first, people aim at nothing.

Use this when

The view is spacious, pointer-only, and the drawn pointer is a real part of the design.
You can still show a text caret over inputs, and a pointer over real controls.
Touch devices and reduced motion keep the system cursor.
Hover states on buttons and links do not depend on the custom drawing.

Reach for something else when

Only one control should react. Use Magnetic button, Background fill button or Circle fill button.
You wanted a name on hover. Use the Tooltip page.
The page is a dense product: forms, tables, toolbars. Keep the system pointer.
The question is still a button. Start with the Button page.

How to build it

Draw a small element, fixed, and take it out of pointer events so it cannot block clicks. Follow the pointer with quickTo on x and y. Hide the system cursor only after the follower exists. Restore the system cursor over text inputs, textareas and anything people drag to select. On touch, do nothing. On reduced motion, keep the system cursor. Do not replace the focus ring.

Official GSAP

gsap.quickTo.

const xTo = gsap.quickTo(dot, 'x', { duration: 0.35, ease: 'power3' });
const yTo = gsap.quickTo(dot, 'y', { duration: 0.35, ease: 'power3' });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Does this replace hover on buttons?: No. Buttons still need their own hover, focus and pressed states.
What about mobile?: Nothing. There is no pointer.
Will this hurt clicking?: It will if the follower sits in the way, or if you hide the system cursor before the replacement is ready. pointer-events none on the drawing, and hide the arrow last.
What does reduced motion do?: Keep the system cursor.
Can I use it on a form?: You can, and you will fight text selection, carets and drag. Keep the system pointer on product UI.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Progress