TideMark

Inspiration

Reddit is fundamentally a platform about connection, but the connections are often fast, loud, and fleeting. We wanted to build something that ran counter to the typical internet experience—an asynchronous, slow-paced social object that encourages quiet reflection rather than rapid-fire engagement. The image of a "message in a bottle" drifting across a vast ocean perfectly captured this feeling. We loved the idea that you could cast your thoughts into the void (a subreddit) and, days later, a complete stranger might discover them, read them, and choose to pass them along.

What it does

TideMark is a serene, asynchronous social experience built directly into Reddit. When a user launches the game from a subreddit post, they enter a calm, procedurally generated ocean.

Players can:

1. Cast a Bottle: Craft a message, select a glass color, and stamp it with an icon before casting it into the shared ocean.
2. Discover Strangers: As bottles drift through the backend queue, they appear in other players' oceans.
3. Trace Journeys: Every bottle has a "Passport" that logs its journey, showing the usernames and timestamps of every person who has found it.
4. Choose Its Fate: When you find a bottle, you face a choice: Keep it in your personal "Collection" dashboard forever, or cast it back into the sea for another stranger to discover.

How we built it

TideMark leverages the full power of the Devvit Developer Platform combined with Phaser 4:

• The Engine: We used Phaser 4 running inside a Devvit Webview to render the tranquil ocean, drifting bottles, and UI. This allowed us to build custom animations, particle effects, and a highly polished interface.
• The Backend: We utilized Hono as our server-side framework for its lightweight footprint and seamless TypeScript integration with Devvit.
• Data & State Management: The entire global ocean state and asynchronous bottle passing is powered by Devvit's built-in Redis implementation. We used Redis Sorted Sets to build a sophisticated queueing system (ZADD, ZRANGEBYSCORE) that simulates ocean tides, ensuring bottles "drift" between players at the right time.
• Communication: We implemented a type-safe RPC pattern between the Phaser frontend and the Hono backend to ensure smooth, responsive gameplay.

Challenges we ran into

• HiDPI Canvas Rendering: Getting crisp, high-quality text and graphics rendering on modern Retina displays within the Devvit Webview was surprisingly difficult. Phaser's default canvas renderer resets transforms to identity every frame, wiping out manual context scaling. We solved this by implementing a low-level monkey-patch that intercepts the canvas setTransform context method to enforce a DPR-scaled identity transform, keeping the layout in CSS pixels but the buffer in physical pixels.
• Redis Queueing Logic: Building a robust, asynchronous "drifting" system where a bottle moves from User A to User B without disappearing or duplicating required careful orchestration of Redis Sorted Sets and fallback mechanisms for resolving user IDs on the backend.
• Scope Creep vs. Polish: We debated several complex ideas (like physics-based destruction games and echo-location platformers) but realized that a tightly scoped, highly polished social object would resonate much more strongly with the Reddit community than a bloated game.

Accomplishments that we're proud of

• Achieving a beautifully calm, atmospheric aesthetic that feels distinctly un-rushed and premium.
• Successfully bridging a modern game engine (Phaser 4) with Reddit's backend infrastructure (Devvit) in a way that feels native and seamless.
• Building a genuinely new type of asynchronous social interaction that leverages Reddit's community structure (subreddits) while providing a deeply personal, 1-on-1 emotional connection.

What we learned

• The Power of Asynchronous Design: Not every multiplayer game needs to be real-time. We learned how powerful "delayed gratification" can be when designing social loops.
• Devvit's Redis Capabilities: We deepened our understanding of Redis data structures (specifically Sorted Sets and Hashes) and how to use them to simulate complex, time-based queues rather than just static state storage.
• Phaser 4 Architecture: We learned how to deeply integrate Phaser within an embedded webview context, managing scaling, input events, and asset pipelines perfectly.

What's next for TideMark

• Lighthouse Leaderboards: Implementing a community "Lighthouse" feature that tracks the most traveled bottles and the subreddits most active "beachcombers."
• Cross-Subreddit Drifting: Allowing a bottle cast in r/gaming to eventually wash ashore in r/books, mapping the cultural cross-pollination of Reddit.
• Seasonal Tides: Introducing limited-time stamps, unique glass colors, and environmental changes (like stormy seas or night-time starry skies) based on real-world events.

Built With

• css3
• devvit
• hono
• html5
• phaser.js
• redis
• typescript
• vite