Cursor follower

A custom dot or ring that chases the pointer with a little lag, creating the soft mouse-following effect seen on creative sites.

little circle that follows my mousedot trailing the cursorring lagging behind the pointermake the mouse leave a soft trailcustom mouse followerbig blob instead of the normal arrowmy pointer has a little friendcursor folower

See it

Live demo coming soon

What it is

A cursor follower is a decorative dot, ring, or shape that chases the pointer instead of sitting exactly under it. Pointer coordinates set the target, while interpolation or a spring makes the follower catch up over several frames. That small delay is what turns a custom cursor into visible motion.

Reach for it on a portfolio, product canvas, or other pointer-heavy surface where hover is part of the personality. The usual build listens for 'pointermove', stores the latest coordinates, and updates one CSS transform inside requestAnimationFrame. Keep the native cursor for links, text selection, and precision controls.

Gotcha: this is a fine-pointer enhancement, not a mobile interaction. Disable it when '(pointer: coarse)' matches, keep the follower out of hit testing with 'pointer-events: none', and animate transform rather than top and left. Too much lag makes the interface feel detached from the user's hand.

Ask AI for it

Add a cursor follower using the Pointer Events API. Listen for 'pointermove', store the latest clientX and clientY, and move a fixed dot toward that target inside requestAnimationFrame using linear interpolation with a factor of 0.15. Apply movement with 'transform: translate3d()' and set 'pointer-events: none'. Keep the native cursor visible, stop the animation when the document is hidden, and do not render the follower when matchMedia('(pointer: coarse)') matches or 'prefers-reduced-motion: reduce' is active.

You might have meant

pointer gesturesspring animationinterpolationinertial scrollingeasing function

Go deeper