Three-state spring cursor

cursor · microinteraction — trigger: move the pointer, hover links and [hover-arrow] items

One spring position, three swappable heads.

The position is computed once per frame and written to a single wrapper. State is decided by event delegation — mouseover asks the target which cursor it wants, and the heads crossfade in place. Adding a new state costs one element and one selector.

a plain link .hoverable
Case studyhover-arrow → arrow cursor
Another casehover-arrow → arrow cursor
Plain hoverable.hoverable → hand cursor
Nothing specialno attribute → dot cursor

Because everything is driven from one lerped point, the three heads can never desynchronise — a common failure when each element runs its own follow loop.

0.14
200ms
34px
state: idle