Skip to content

Custom Cursor Follower

Smooth custom cursor with a dot and an eased ring that grows on links, shows a label over cards and inverts the headline, in CSS and vanilla JS.

Also known as: custom mouse cursor, cursor follower, magnetic cursor, css cursor effect, animated cursor

Pure CSS Cursor Effects Responsive Dark #animation #cursor #hover-effect #interactive #portfolio

Custom Cursor Follower live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

A custom cursor follower built with CSS and a small vanilla JavaScript loop. A small dot tracks the pointer exactly, and a ring eases after it. The ring changes shape depending on what is under it: it grows over links, becomes a labelled "View" or "Play" disc over project cards, and turns into a large inverting lens over the headline. It suits portfolio sites, agency landing pages and creative showcases.

How it works

The root section.cf-area contains the page content (a .cf-bar with logo and navigation, the .cf-title headline and a .cf-grid of .cf-card links) plus two follower elements at the end: .cf-ring (with an inner .cf-ring-shape and .cf-label) and .cf-dot. Both are absolutely positioned inside the root, and the root uses overflow: hidden, so the effect stays inside the component.

On DOMContentLoaded the script checks (hover: hover) and (pointer: fine). Only on such devices does it add .cf-area--active, which hides the native cursor with cursor: none and shows the follower. The script listens for pointermove on the area and moves .cf-dot straight to the pointer with translate3d. A requestAnimationFrame loop moves the ring a fraction of the remaining distance (the EASE constant, 0.18) on each frame, and stops once the ring has settled. The nearest [data-cf] ancestor under the pointer sets data-state on the ring. CSS then animates the ring size, fill and label for link, view and text. The text state uses mix-blend-mode: difference, which inverts the headline under the lens. On pointerleave the follower fades out.

On load, the follower is placed on the element with data-cf-start, so it is visible before the pointer moves. On touch screens nothing changes and the normal cursor stays.

Customization

  • data-cf="link", "view" or "text" on any element inside .cf-area: chooses the ring state over that element.
  • data-cf-label on a data-cf="view" element: the word inside the filled disc, such as View, Play or Open.
  • --cf-ring-size, --cf-ring-link, --cf-ring-view and --cf-ring-text on .cf-area: the ring diameter in each state.
  • --cf-accent: the dot color and the fill of the link and view states. --cf-text is the ring border and the lens color.
  • EASE at the top of script.js: lower values such as 0.1 give a longer, floatier trail; 1 removes the lag.
  • --cf-dot-size: the size of the inner dot.
  • Move data-cf-start to another element, or remove it, to change where the follower appears on load.

Use cases

  • Portfolios: a cursor that labels project cards with View or Play
  • Agency and studio sites: a playful pointer that reacts to links and headlines
  • Creative showcases and campaigns: an interactive touch on desktop while touch devices keep the normal pointer

Accessibility

The follower elements are aria-hidden and use pointer-events: none, so they never block clicks or reach screen readers. All targets are real links and buttons that keep their native :focus-visible outline in the accent color. The native cursor is hidden only for fine mouse pointers, never on touch devices. With prefers-reduced-motion: reduce the ring follows without lag, and the size transitions are turned off.

Usage notes

Each .cf-area runs its own follower, so several can share a page. To use the effect on a whole page, put .cf-area around the page content and remove overflow: hidden.

Custom Cursor Follower at a glance

Framework
Pure CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
None
Layout
Responsive, works on mobile, dark design
Category
Cursor Effects
License
Free for personal and commercial use

Questions about this template

Can I use the Custom Cursor Follower code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

Custom Cursor Follower – Pure CSS cursor effects component screenshot
Custom Cursor Follower · Pure CSS Cursor Effects

More Cursor Effects

Image Reveal Cursor on Hover – Tailwind CSS cursor effects preview

Image Reveal Cursor on Hover

Tailwind CSS project list where hovering a row reveals a photo that follows the cursor with smooth easing and tilt, plus keyboard and touch fallbacks.

Tailwind CSS Cursor Effects