J

Microinteractions play an role in creating engaging and intuitive user experiences. These subtle animations and feedback can guide users, provide valuable information, and make interactions more enjoyable and generally look cool! One often overlooked yet super powerful micro-interaction is the use of custom cursors. Custom cursors can add a unique touch to your site, making navigation more interactive and aesthetically pleasing.

Let’s explore many custom cursors and cursor-based effects that can enhance the experience on your site, for mouse and trackpad users anyway! We’ll discuss the variety of styles available, their implementation, and important considerations for performance and accessibility.

Whether you’re looking to add creativity, fun, or innovation, these custom cursors offer a lot of possibilities for creativity in web design and development.

Trailing Cursors

Jhey’s Fancy Trailing Cursor

The reason I love this is the trailing effect on the cursor and how cool it looks when you move it, just like having a magic wand in your hand and moving around your website with it. I think the glitters are a cool concept and Jhey’s fancy Pen does justice to it. Trailing cursors can come in many creative forms, from glitters like Jhey’s Pen to image trails from the cursor on sites like amor.

The basic idea is that the cursor leaves a “trail” of some kind. A marking to indicate that it moved from one place to another on the screen.

Ksenia’s Ghost Cursor

Ksenia here has a trailing cursor with a ghost friend following you around. The big smile the ghost has when it stops keeps it from being very scary.

Note that neither of these examples hide the cursor, they just do visual effects depending on the cursor position. This is the safest approach as the cursor the user is used to is still there unchanged.

Revealing Cursors

This is my favorite one. It’s a style that, as its name implies, reveals the content that’s hidden from the user by hovering over the said element.

Caroline Artz’s Spotlight Cursor

Sometimes it can even reveal a different color scheme like the example below that does the effect well.

Renflow

Even more so, renflowdesigns.com 404‘s web page does the reveal excellently as you hover over the page. Yes, I know it’s a 404 page and won’t be seen as much, but it still does its work well.

Another similar one is redmango agency‘s website cursor button hover.

The memes in this one take the cake, but visually speaking, it does block the text so I don’t fancy the super big gif. And that’s an accessibility concern which we are going to take a look at more below.

SVG Cursors

These are cursors made with SVGs and usually, cursors like these with awesome animations on hover have to be manipulated via some JS functions (and they do save space!!).

Specifically hiding the main cursor in CSS and using an arbitrary one (an inline SVG) manipulated with JavaScript using the mousemove event listener as seen in the Pen example above. Pretty cool, right? Great news! It gets better.

Dot Cursors

Here’s a cursor replace by some moving dots by Kyle Brumm (forked to remove some broken images) that I just love.

It combines both the circle and trail cursors to create an amazing dotted cursor. Some other examples follow suit:

Ricardo Mendieta’s Dot Cursor

This one moves like a blob!

Masahito Leo Takeuchi’s Cat Trailing Cursor

Cat lover? Or do you love a stray cat following you for no reason? Well, you’d love Masahito Leo Takeuchi‘s cursor type where the cat follows your mouse direction horizontally as you move around the page. Cats do love following dots after all.

Tamm Sjödin’s Blinking Dot Cursor

I think it’s unique because it combines different colors and shows you exactly where your is on the screen all the time. I mean, you can’t miss it.

Ksenia Kondrashova’s Worm-like Cursor

This cursor adopts the style of trailing and the dot type. I think the animation is slick and I can play with it on any site that uses it, promoting site visibility and user retention by making me stay on the page for longer, you know?

Curzr

Fuzionix‘s Curzr library has a bunch of cursors possibilities. Pretty cool, right? One that has a custom SVG to some cool dotted cursors and some with trailing effects.

Kevin Levron’s Smooth Cursor

Kevin Levron has a smooth cursor that is trailing, color-changing, and dotted. It takes skill to combine these 3 properties and make your cursor fun effectively. Is it practical and I can use it on my site without making myself (the developer) dizzy? I don’t think so. But, is it super cool? Heck, yeah!

Interactive / Game Cursors

kitton’s Chameleon

Do you hate your cursor and want to give it to a hungry chameleon? Say no more! kittons’ chameleon will gladly swallow your cursor as you hover near it.

Faisal Jawed’s Mouse Shooter Game

Faisal Jawed’s CSS mouse shooter game is one of the most interesting CSS games I’ve come across and it only uses your cursor to control the direction of the bullets. What are you waiting for? Try it now.

Now that we have looked into some examples on CodePen, let’s look at a real-life implementation in some websites.

Real-Life Examples

Here are some production websites that use custom cursors effectively:

• https://www.neoculturalcouture.com
• https://amor.capital/en
• https://thefieldhyundai.com
• https://clarissemichard.com/
• https://thesight.io/
• https://cuberto.com/
• https://www.bataviastad.nl/en/advent-calendar

How Custom Cursors Are Built

You can set the cursor using the cursor property in CSS:

html {
  /* Classic keyword */
  cursor: pointer; 
 
  /* Custom image as a cursor */
  cursor: url("https://blog.codepen.io/images/cursor.png") -10 -10, auto;
}

/* Set cursor just for one area */
.custom-area {
  cursor: url("https://blog.codepen.io/images/cursor.png") -10 -10, auto;
}

The -10, and -10 values are the x and y coordinates of the cursor’s pointer relative to the top-left corner of the pointer. They keyword auto is set to leave it up to the browser to either display the image or another cursor that’s in-built when hovering over a text or editable elements on the page. It would go back to its default cursor as a fallback if the image is not available.

The Advanced Method

Using a combination technologies can lead to cursor effects that are more animated, interactive, and with different aesthetics.

Essentially, we are completely discarding the use of the CSS cursor property here and ensure the cursor sticks to an HTML element instead.

HTML

CSS

html {
  /* Careful! You want to be super sure your custom cursor is going to work. You may want to apply a class name that is set with JavaScript so you can be sure JavaScript is executing e.g. html.js */
  cursor: none;
}

The default cursor has to be set to none, and not an image or a link to an SVG in order to choose a cursor with JavaScript and allow flexibility when changing from one cursor state to another. We have to do that so there is no override between the default cursor and our custom cursor.

With JavaScript, we account for when the mouse moves on the x and y coordinates of the top and left relative points of the pointer with two simple functions on the document object and from there, you’re good to go. Here’s a simple demo of how this works in JavaScript for our test application

const cursorDefault = document.querySelector('#custom-cursor');

document.addEventListener('mousemove', (e) => {
  cursorDefault.style.left = `${e.pageX-10}px`;
  cursorDefault.style.top = `${e.pageY-5}px`;
});

Above I’m adjusting the x and y positions a bit, which of course you’re free to do to align things if needed.

Demo with Multiple Cursors

Let’s do an example with multiple different custom cursors.

In the example above, we only accounted for one cursor, but when we are dealing with multiple custom cursors (on hover or focus states for example), we need a