Murmuration

Icebreakers make you talk. Murmuration makes you collaborate, one shared canvas, one dial each, nobody finishes alone.

Comment

Inspiration

We've all been in that meeting or that class. Someone says "let's do an icebreaker," and then it's two truths and a lie, or "share a fun fact," and everyone waits their turn while half the room checks their phone.

Those games make people talk. They almost never make people work together.

I wanted the opposite: a short icebreaker where the room actually builds one thing. Scan a QR, grab a phone, and each Creator only owns one dial: palette, form, or motion on the same artwork.

I called it Murmuration after the way starlings move, lots of individuals, one shared shape. Same idea here: each person only gets one dial, but the room makes one piece together.

You can't finish it alone. That's the whole point.

The domain I registered kind of says it: mybossdoeslameicebreakers.work.

What it does

A host opens the big screen and shows a QR. Phones join with no app and no account. Up to three people become Creators; everyone else watches and rates.

A prompt drops ("make Atlanta rush hour feel almost peaceful"), a timer runs, and the shared canvas updates live as people change their choices. When time hits zero, the piece locks. Three scores come in: the scene author's taste, an AI judge, and the room. The AI judge even talks out loud.

Atlanta-flavored demo scenes (Batman in Atlanta, Waffle House, Atlanta rush hour) keep it fun for a local hackathon crowd.

How I built it

  • Phones + host + big screen as separate Vite pages in TypeScript
  • p5.js for the live canvas
  • Firebase for anonymous auth, Realtime Database sync, Hosting, Cloud Functions, and Storage
  • Gemini for the judge, spoken script, and a "reimagined" image after the round
  • ElevenLabs for the voice verdict
  • Tiger Data for round event logs / replay (off the critical path)
  • Scenes are JSON data, not hard-coded special cases — base art, options, prompts, author ranks

One rule I stuck to hard: during the timed round, no AI calls. The live art is just code + sync. AI only runs after lock, with canned fallbacks if anything fails.

Also: every live visual param has a target (from the network) and a current (what the canvas actually shows). The render loop eases between them so the art doesn’t jump when phones spam choices.

Challenges I ran into

Making "together" feel real. If three people each draw their own thing, it's not collaboration. Bounding each person to one dial on one canvas was the hard design call, and the one that made the game click.

Keeping the canvas smooth on bad WiFi. Lots of phones, tiny payloads, server-timed rounds, and host-only round state. Phones write their own nick/choice/rating and almost nothing else.

AI that can't break the demo. Venue WiFi, slow APIs, missing keys, I had to plan for all of it. If Gemini or ElevenLabs flakes, the round still finishes with a fallback score and a pre-baked verdict.

Scope. I wanted a full "anyone can make a scene" studio. In 36 hours, the cut line mattered more than a half-built platform. Ship a complete icebreaker first; put the rest on the roadmap.

What I learned

Boring icebreakers aren't a tech problem, they're a design problem. If the rules don't force shared work, people won't do shared work.

I also learned that for a live room demo, reliability beats cleverness. Fallbacks, demo bots, and a recorded backup video matter as much as the cool AI bit.

And Atlanta jokes make better demo scenes than generic ones.

Built With

Share this project:

Updates

Submission history