A cursor that knows what you’re about to do.
An arrow when you look, a finger when you can act, an open hand when you can hold, a closed one when you do.
The cursor is the only thing on a screen that is you. Everything else belongs to the page. So on my site it's made of the same glass as the rest, and it changes shape to tell you what you can do before you do it.
Four shapes, one meaning each
- An arrow when there's only something to look at.
- A finger over anything you can press: a link, a button.
- An open hand over anything you can take hold of: my name, the threads, the chips.
- A closed hand while you're holding it.
It's a small promise. When the hand opens, you know the thing under it will move if you pull.
The outline eases, the point never does
Most custom cursors trail behind the mouse, and it feels lovely for about three seconds. Then it feels like a bad connection: you aim at something and the pointer arrives late.
So I split the cursor in two. Its position is written straight from your mouse on every move, with no smoothing and no delay. Only its shape eases, melting from arrow to finger to hand in 0.23 seconds. It feels alive and never costs you accuracy.
Move your pointer through each one and over its little link. The difference is easiest to feel, not see.
One point, every shape
Here's a detail nobody should ever notice: the tip of the arrow, the tip of the finger and the open hand's index finger are drawn on the same point. Whatever shape it's in while it melts, the click lands exactly where you aimed.
When it steps aside
A good detail knows when to leave. Over a text field the glass cursor hides, because the text caret is the better tool there. It hides when a dialog opens, when you start using the keyboard, and on touchscreens, where there's no cursor at all. If you ask for less motion, the glass steps aside too, and plain drawings of the same four shapes take its place.
It also quietly takes on the colour of the world you're in: blue for what I build, crimson for what I create, brown for the memories.
- to melt from one shape to the next
- 0.23 s
- between your hand and its point
- 0 ms
- shapes, one meaning each
- 4
- point they all share
- 1
For developers How it’s builtglass-cursor.js
One SVG outline, morphed between four drawings with GSAP's MorphSVG. On every pointer move the position goes straight into the transform; the shape is chosen from what's under the pointer: something you can drag gives the hand (closed while pressed), a link or button gives the finger, anything else the arrow.