Inspiration
We wanted to bring back the feeling of finding a message in a bottle.
Our team remembered QQ and WeChat's drift bottles: you sent a message into a digital ocean and waited for a stranger to respond. The surprise was the appeal. Spam and inappropriate content were the part we wanted to address.
Drift brings that idea into a daily writing game. You leave six words. Someone you don't know writes the next six. Together, you've made something neither of you would have written alone.
What it does
Pick up a bottle from the moving sea, shake it with your cursor, and unfold the note inside. It holds a six-word beginning. Add your ending, send it back, and both writers receive an illustrated postcard to keep or share.
You can also release your own beginning and discover the different endings people give it. A shelf keeps your stories together. Upvotes and a private thank-you let you respond to a story that made you laugh or caught you off guard. Daily prompts and three rounds a day keep the commitment small.
Claude checks submissions before publication and offers an idea if you're stuck. It also arranges the postcard illustration from a fixed art catalog. People write both halves of the story.
How we built it
We built the game in React and TypeScript, with a WebGPU ocean behind the bottles and paper. We spent time on how a bottle moves, how a note opens, and how the light changes from day to night. Those interactions are a large part of what we wanted to bring back.
SpacetimeDB handles beginnings, writing assignments, finished stories and votes. Its subscriptions deliver the completed postcard to both writers without a refresh. A model response doesn't decide whether an assignment is still valid: after Claude finishes its review, the server checks the assignment and deadline again before accepting the ending.
Cloudflare Workers serves the game at driftbottle.ink. We chose the name for the drifting bottles and the handwritten words inside them, and registered it through the MLH/GoDaddy Registry offer. Turnstile, request limits, reporting and author withdrawal support the moderation path.
Once the game was working, we used Figma Make to try changes to the empty shore, writing screen and returned postcard. Those experiments informed the instructions, recovery buttons and returned-bottle marker in React. Our Figma Slides deck includes the prototype and the path from design to implementation.
We also built Bottle Kitchen in Mana to prepare starter lines. It checks word counts, duplicates and contact information, then puts lines into a review queue. Drafts can be exported for work in progress; incomplete lists can't be installed as production content.
Challenges we ran into
The tricky part was what happened between clicking Send and getting a postcard back. A model call can be slow. A connection can drop. Someone can press the button twice. We added saved drafts, retry recovery and duplicate-request handling so a failed attempt wouldn't lose someone's words or publish the same ending twice.
The ocean brought another tradeoff: we wanted it to look good while keeping the writing screen responsive. We kept the visual detail, paused rendering when hidden, and added reduced-motion controls and a fallback for browsers without WebGPU.
What we're proud of
A beginning can leave one browser, be finished in another, and return to both as a keepsake. The same six words can lead to several completely different stories. The original prompt and both lines stay together when someone shares or downloads a postcard.
We also put time into the less visible parts: preserving a draft when verification fails, recovering from an expired assignment, and making another idea or another bottle avoid repeats. The recorded release passed 64 unit tests and 136 server tests, alongside browser checks for the story flow, voting and image export.
What we learned and what's next
A small interaction needs just as much clarity as a large one. Changing “Hint” to “Need an idea?” made the button's purpose easier to understand. Keeping the sea behind the open note helped the whole experience feel connected.
Next, we want to watch people play on their phones, learn which prompts they come back for, and review Claude's moderation decisions with human readers. The goal is still the one we started with: make getting a reply from a stranger feel exciting again.
Design and build links
Built With
- anthropic-claude
- cloudflare-turnstile
- cloudflare-workers
- css
- figma-make
- figma-slides
- html
- mana
- react
- spacetimedb
- typescript
- vite
- webgpu
- wgsl
Log in or sign up for Devpost to join the conversation.