⚠️ Design system CSS not found. Check the path in docs/docs.config.js → designSystemPath, then re-run npm run docgen.

Custom cursors

Approx. spoken length ~ 1 min 35 sec

Scripts / Custom cursors
Approx. spoken length~ 1 min 35 sec
Word count~ 208 spoken words
SeriesPlayground
PlatformInstagram
Statuswritten

Spoken words only - one hook counted, captions and notes excluded, at 130 wpm.

Hook

  • If you build websites and you're still using the default cursor, this one's for you.
  • This is for the people who sweat the details most visitors never even notice.
  • Web designers, I've built something you're going to want to steal.

Body

So, I built a custom cursor into our design system, and it might be my favourite thing I've made this week.

You can turn your cursor into almost anything. Let me show you.

This one's a badge. Pick any icon from our library, and the cursor becomes it, following you around the page.

Or make it a label. A little tag that trails behind your cursor, with an icon on the front, on the end, or both.

And then the fun one. You can turn your cursor into a graphic, or just an emoji. As silly as you like.

Here's why I actually like it. Your cursor is the one thing every single visitor touches, and the one thing nobody bothers to design.

So this is a tiny way to direct the conversation on a page. Point people to where you want them to look. Make one thing stand out on desktop. Add a bit of play where a site would usually be flat.

Nothing clever. Just fun. And honestly, the fun is the point.

CTA

  • What would you turn your cursor into? Tell me in the comments.
  • I might drop this into the design system for anyone to use. Comment if you'd want it.

Post image text

your cursor can be anything

On this page
  • Hook
  • Body
  • CTA
  • Post image text
Previous

A reason to come back

Next

The DVD bounce

© 2026 By Default