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("/images/cursor.png") -10 -10, auto;
}
/* Set cursor just for one area */
.custom-area {
cursor: url("/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
<div id="custom-cursor">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24">
<path fill="#FFF" stroke="#000" stroke-width="2" d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z"></path>
</svg>
</div>
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 <div>
to house the changes instead of just directly placing it in our HTML.
The JavaScript as well will be slightly different from what we have above. We need to account for the new cursor movements the same way we accounted for the movement of the default cursor and also have a little animation when we want to change it. In the code below, we change these cursors on hover and once we hover over any of the boxes, we get a new cursor type each time.
With some added CSS, it gives us this beautiful animation we have here below. Go on, don’t be shy. Hover over each box to see the cursor change!
Final Thoughts
Custom cursors are awesome. They can significantly enhance the interactivity of your web app and increase its visual appeal when used appropriately. By considering performance and accessibility, you can create engaging and user-friendly cursor experiences.
There are a ton more examples than this on CodePen.
- Try exploring the tag #cursor
- Try a specific search like “Custom SVG Cursor” (that same search on Google is decent too)
- Browse users curated collections of interesting cursor ideas