Trailing Cursor Ring

A custom cursor: a dot that follows the pointer and a ring that trails and swells over links.

Original
Vanilla JS
Reduced-motion ready
Customisable
1.5 KB gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<div class="cursor-ring" data-demo>
  <p class="cursor-ring__text">Move your cursor here. The ring trails behind and swells over <a href="#" class="cursor-ring__link">links</a> and <button class="cursor-ring__link" type="button">buttons</button>.</p>
  <span class="cursor-ring__ring" aria-hidden="true"></span>
  <span class="cursor-ring__dot" aria-hidden="true"></span>
</div>

How to use it

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Add the script just before the closing </body> tag.
Adjust the custom properties (--accent) on .cursor-ring to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.