Inspiration
Every stream has a few minutes nobody plans for. The streamer steps away for food, a call or a stretch. The screen flips to a Be Right Back card, chat goes quiet, and viewers start drifting to other tabs. On some channels that happens several times a night.
That struck me as strange. It's the one moment when the whole community is there and waiting, with nothing to do. What if the break were the part of the stream people looked forward to? What if the community could make something while the streamer was away, something that would still be there when they came back and could even travel to other channels?
That idea became Ripple: a living creature that belongs to a whole community.
What it does
- 🧬 Chat evolves it. Three possible mutations appear on stream, and chat votes with
!ripple 1,2or3. One account gets one vote. Money and viewer counts never buy an advantage. - 🌊 The stream is its habitat. How lively and steady chat is decides whether the creature thrives or struggles, and every round explains why in plain words.
- ✋ Breaks become a sculpting studio. When the streamer switches to their BRB scene, Cocoon Studio opens. Viewers turn on their webcam, pinch the air and pull the creature's shell into a new shape with their bare hands. Chat votes on the finalists, the streamer approves, and the new shell hatches onto the creature.
- 🚀 Raids spread it. When the streamer raids another channel, a descendant goes along. It carries its genes, the shell its community made and a passport of everywhere its family has been.
You can play the whole loop in about three minutes in the live demo. You act as both the streamer and the chat in your own private world, with no Twitch account or camera needed.
How I built it
Ripple is three pieces working together.
A rulebook that never forgets. At its heart is a set of game rules that works like a perfect referee: the same history always produces the same creature. Every vote, every burst of chat and every raid is written down, so any world can be rebuilt from its history and checked step by step. The demo has a Replay and verify button that does exactly that. It rebuilds both channels from scratch and confirms they match.
Hands as the controller. Hand tracking runs entirely in the viewer's own browser with an ordinary webcam. It follows 21 points on each hand. Your index finger becomes a cursor, and pinching your thumb and finger together grabs the shell. There's nothing to install and no special hardware. The video never leaves your computer; only the final shape, a handful of numbers, is ever sent.
A bridge to Twitch. Ripple reads chat for votes, notices raids and when the stream goes live or offline, shows the creature on stream through an OBS overlay, and opens the studio automatically when the streamer switches to a break.
I built it with OpenAI Codex as my coding partner. I worked phase by phase and finished and verified each phase before starting the next. Codex was most useful for hunting bugs: reproducing a problem, proving it was real, fixing it and proving the fix held. By the end, Ripple had more than 800 automated tests, many of which play it in real browsers.
Challenges I ran into
Making a hand feel like a tool. Real hands tremble, and a pinch naturally flickers open and closed. A simple tracker would make the shell twitch or slip out of your grip mid-pull. In Ripple, grabbing takes a firmer pinch than holding on, small shakes are smoothed out, and editing freezes the moment your hand leaves the camera, so nothing is ever saved by accident. On slower laptops the cursor still trails your hand a little. That's the next thing I'm tuning.
Fair for everyone, camera or not. Hand sculpting is the magic, but not everyone has a webcam or wants to use one. A mouse, touch or keyboard gives exactly the same choices, the same vote and the same chance of winning. A bigger, bolder shell also never makes the creature stronger. The design is pure expression, so drawing well is never a game advantage.
Two communities, one creature. A raid is where two worlds meet. A creature leaves one channel and arrives in another, where the community decides whether to welcome it, shelter it or let it challenge the local creature. One of the hardest parts of the project was keeping all of those moments in order, so a raid never duplicates or loses a creature.
Counting fairly. Codex reproduced two real bugs in the demo world. When the same four people changed their minds, their votes counted as eight. Two people starting a demo at the same instant could both squeeze into the last free spot. Both are fixed, and tests now guard against them.
Twitch's own surprises. While preparing a live rehearsal, I found that Twitch sends raid notifications in a slightly different shape than Ripple expected. Outgoing raids would have gone unnoticed without any error. I'm glad it surfaced before a real stream did.
What I learned
- A break isn't empty time. It's the one moment the whole community is present with nothing to do, which makes it the right time to create something together.
- Explaining matters as much as scoring. A falling number is frustrating. A falling number with a reason is a story. Every round in Ripple says what changed and why, and it even shows how the original founder would have done under the same conditions.
- Trust is a feature. Asking people to turn on a camera during a stream is a big ask. Keeping the video on their own device, never asking for a microphone and switching the camera off when the studio closes is what makes the ask reasonable.
- An AI partner is at its best when it has to prove things. Codex helped most when it had to show a bug was real, fix it and show the fix held, more than when it was just writing code quickly.
Ripple turns the BRB screen into the best part of the stream, and it lets a community leave a mark that travels with its creature from channel to channel.
Built With
- codex
- docker
- mediapipe
- neon
- node.js
- openai
- twitch
- typescript
- web-workers
- websockets
