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.