Lab

Custom Cursor

Hover the cards with a mouse. Touch gets the plain links.

a gallery of four cards under a cursor of its own. crossing into the stage swaps the arrow for a dot that chases the hand, and hovering a card grows the dot into a pill naming the lab.

key insight: the dot and the pill are one element and nothing scales. a clip-path window decides how much of the pill shows, because torph sizes its box off getBoundingClientRect, which reports the transformed size, so a label changed while the pill was small got a box a fraction of its text's width.

the one lab on gsap. one quickTo per axis keeps a single tween and retargets it on every move, and the hand is read once a frame at the front of the ticker, so a burst of events at 120Hz costs one layout read rather than one each.


More experiments