Squiggle Cup

Inspiration

What if the creature you doodled could race your friends—and the drawing itself decided how it moved?

Squiggle Cup turns a blank page into a multiplayer race. It fits “Multiplayer Everything” in the game and in the build: friends share a room, while trmi provides a shared space for working on the project.

What it does

Open a room, share its four-letter code, and draw at the same time. A live preview brings each creature to life as you sketch. Four legs run, wings fly, and a long, legless creature slithers. When everyone is ready, the creatures race down the same 40-metre track.

There are no race controls. Shape and drawing quality decide how the creature performs. After the finish, rematch with the same drawings or redraw to try another idea.

You can also race solo against house creatures, save your drawings and result cards, share replay links, post to a global leaderboard, and challenge a leaderboard creature one on one. The server re-simulates submitted drawings before accepting their times.

How we built it

The game uses TypeScript, Vite, HTML Canvas and perfect-freehand. A custom deterministic simulation reads each drawing, builds its creature, and runs its movement. The live drawing preview uses the same race engine, so the preview and the real race agree.

Cloudflare Workers and Durable Objects handle room coordination over WebSockets and the verified leaderboard. Rather than streaming video or every animation frame, the room shares canonical drawings and a seed; clients run the same simulation. The frontend is live on Cloudflare Pages and Workers.

We used trmi as the shared project workspace for build discussion, prompts and iteration, alongside a written specification and progress handoff. The demo includes footage of the actual trmi session.

Challenges we ran into

Reading a doodle is surprisingly difficult: a tail or a tall neck should not accidentally become a wing. We built fixtures for wing shapes and their look-alikes, then tested movement and classification together.

The preview initially had its own physics and could disagree with the race. Replacing it with the real race engine made the feedback trustworthy. We also worked through ground contact, creature scale, overlapping labels, phone layouts, host handoff and repeat rematches.

Accomplishments and what we learned

A drawing becomes a moving character without a modelling tool or animation editor. The same race works across a laptop and phone-sized screens, with a small room code as the invitation.

The latest live Playwright capture used three isolated browser clients to draw different creatures, verify matching rankings and finish times, rematch, and redraw. This is automated coverage on one computer; a three-human playtest across different devices and networks is still a next step.

The biggest lesson was to share the simulation, drawing preparation and rules between features. That made the preview, multiplayer results, replays and server verification easier to keep consistent.

What's next

Broader device and cross-browser testing, more creature templates, and a separate vehicle mode for wheels, cars and flying machines. We also want to make it easier to keep a creature collection across devices.

Draw it. Race it. Multiplayer, all the way down.

Built With

• canvas
• cloudflare-pages
• cloudflare-workers
• css3
• html5
• perfect-freehand
• playwright
• trmi
• typescript
• vite
• websockets