notAcursor: Custom Cursor Effects for the Web

The default browser cursor is functional but boring. It's been the same arrow pointer for decades. I wanted to change that. Not just for myself, but for anyone building a website who wants to add a bit of personality to their UI.

That's how notAcursor was born. A lightweight library that transforms your ordinary cursor into something extraordinary with just a few lines of code.

The Idea

Custom cursors aren't new. People have been using CSS cursor properties for years. But creating smooth, animated, custom cursor effects requires JavaScript, DOM manipulation, mouse tracking, and careful performance optimization. Most developers don't want to write all that code from scratch every time.

I wanted to make it dead simple. Include two files via CDN, add a couple of div elements to your HTML, and you're done. Your cursor is now a trailing dot with an animated outline, or a custom image that follows your mouse, or a Minecraft sword, or whatever you want.

The Technical Implementation

The library uses JavaScript to track mouse movement and update the position of cursor elements in real-time. It creates custom div elements that follow your mouse with smooth transitions, giving the illusion of a custom cursor while hiding the default one.

The challenge was making it performant. Tracking mouse movement means updating positions on every frame, which can be expensive if not optimized. I used requestAnimationFrame for smooth 60fps animations and CSS transforms for hardware-accelerated positioning.

Multiple Cursor Types

I created several preset cursor types. Type 1 is a simple dot with a circular outline. Type 2 has a different animation style. Type 3 offers another variation. There's also support for custom images, so you can use any picture or GIF as your cursor.

One of my favorite additions is the themed cursors. I created a Minecraft sword cursor and an apple cursor as examples of what you can do with custom images. The possibilities are endless. You can use any image you want.

Dark Mode Support

One issue I discovered early was that some cursor types were hard to see on dark backgrounds. The dot and outline were dark by default, which meant they disappeared on dark websites.

I included CSS overrides that developers could add to make the cursor white on dark backgrounds. It's a small detail, but it makes the library usable in both light and dark themes.

Distribution and Usage

Like my other libraries, notAcursor is distributed via npm and jsDelivr CDN. You include a CSS file for the styles and a JavaScript file for the tracking logic. Then you add the cursor elements to your HTML body, and it just works.

The API is intentionally minimal. There are no complex configurations or options. You pick a cursor type, paste the corresponding HTML, and you're done. If you want to customize further, you can override the CSS styles.

What I Learned

This project taught me about mouse event handling, performance optimization for animations, CSS transforms and positioning, and creating smooth 60fps experiences in the browser. It also reinforced the value of good defaults and simple APIs.

The best libraries are the ones that make complex things simple. notAcursor takes something that would require dozens of lines of custom code and reduces it to a CDN link and two div elements.

Try It Yourself

The library is available on GitHub and published on npm. You can see all the cursor types in action at iamovi.github.io/notAcursor.

Whether you want a subtle animated cursor or a Minecraft sword following your mouse, notAcursor makes it easy. It's all open source under the MIT license, so use it however you want.