Dancing cursors and Voronoi diagrams

Matt Webb
Posted on:25 Sept 2023

If you go the PartyKit homepage right now, you may be lucky enough to see it dancing with cursors.

(Or maybe it doesn’t do that anymore! For me, “right now” is September 2023.)

It’s a trope but I love multiplayer cursors. The web should feel more alive! And when you see other people’s real-time cursors, you get a sense of presence.

The pattern itself is a Voronoi diagram.

To make a Voronoi diagram (Wikipedia), you take a point (a cursor in this case) and look for its nearest neighbour. Then you draw a line, crossways, at the midpoint between them. Rinse and repeat for all points and all neighbours. That gives you a set of cells: small cells for points with many nearby neighbours, large cells when a point has plenty of space. Colour the cells as you want.

And this is what that is, only interactive. I find myself playing with other people’s cursors, seeing how the cell boundary changes between us — and sometimes you find someone who dances back.

Actually, this does happen! Check out this exchange I happened across on X/Twitter:

A Twitter thread. The first message is 'and ofc partykit gets much better with friends' with a picture of the homepage. The first reply is: 'holy s—, was that you I was going this with!??'

Happy serendipity!

Diving into the code

Here’s a standalone demo. And here’s the code on GitHub.

The PartyKit server receives all the cursor coordinates and re-broadcasts them to all other clients connected to the room. (Actually it’s not absolute coordinates. They’re scaled in proportion to the screen.) The server code is pretty brief, but note three things:

The Voronoi pattern itself is drawn with the data visualisation library D3.

D3 comes with a package to compute Voronoi diagrams.

You can see the Voronoi integration itself here. It’s part of the client-side app.

It’s pretty neat to be able to flow messages from usePartySocket into a live, programmatic SVG. This sketch is just a toy, but given D3 is a data visualisation language, I do wonder what other real time sources could be similarly plugged in.

Cursors, cursors, cursors

Like I said, I can’t get enough of cursors. (Which don’t translate well to smartphones or future spatial computing, sure, but we’ll cross that bridge when we come to it.)

A screengrab of my blog with multiple blurred-out cursors behind the text.

On my blog, for example, I show real-time multiplayer cursors on every page, but blurred slightly as if beyond frosted glass. For vibes.

And I too have had that serendipitious experience of dancing cursors with a stranger!

But all of that is a story for another day.