Inspiration
Wordle is calm; the beach is not. We wanted a word game that feels like riding a swell—competitive, a little chaotic, and unmistakably coastal. Tidal Wordle pairs beach-themed vocabulary with a live 3D shoreline, async multiplayer tension, and a deck of API-inspired cards that mess with your board and your opponent's. After each round, your match becomes a surf manga—one panel per word—so winning a guess isn't just a green tile; it's a chapter in an ongoing story.
What it does
Tidal Wordle is a beach-themed competitive Wordle variant. Play solo or multiplayer in best-of-3 matches with variable-length answers, scoring, and full round flow. Solo mode includes a persistent beach lexicon of words you've cleared and tracks when you've exhausted the word bank.
Twenty cards split into attacks, buffs, and wildcards keep every round unpredictable. Meme Cannon, Brainrot Glitch, Status Dog, Forced Break, Letter Reveal, Tide Whisper, Chess Gambit, and more auto-fire in solo and sync over Socket.IO in multiplayer.
A react-three-fiber 3D beach scene wraps the game: animated waves, a customizable wardrobe on the main menu, and surfer and environment props during play.
After each completed round, a pull-out phone UI adds one manga panel to your storyboard. Panels are generated with OpenAI image generation through a server proxy, with narrative continuity from prior words. Theme art fills in when the API isn't available. Chapters persist in IndexedDB with a table of contents you can scroll back through anytime.
How we built it
Two developers built the project in parallel, each paired with an AI assistant, and kept everyone aligned with a shared AGENTS.md contract at the repo root.
Client: React 18, Vite, TypeScript, Tailwind, Zustand. 3D: react-three-fiber and drei for waves, the wardrobe scene, and the in-game environment. Server: Node, Express, and Socket.IO for rooms and the storyboard image proxy. Shared socket event names live in shared/events.ts and are imported on both sides.
Gameplay state lives in gameStore.ts. Multiplayer and socket state lives in multiplayerStore.ts. Card metadata is in CardDefinitions.ts; card behavior is in cardEffects.ts. The beach word list comes from relatedwords.io, with themed metadata per word.
The storyboard pipeline builds captions and narratives from round history on the client, sends them to the server for sanitization and OpenAI image generation, then stores base64 panels in IndexedDB so you can reread chapters offline.
Challenges we ran into
Parallel development with two devs and two AI agents meant we had to be strict about store shape, event names, and phase boundaries so we didn't duplicate work or break each other's stubs.
Twenty card effects with different durations, targets, and overlays—chess lock, half-guess masks, delayed tile colors, distraction blocks—all had to compose without leaving the board in a broken state.
AI manga generation is slow and optional. We added generating placeholders, theme fallbacks, and optional continuity from the previous panel's image so chapters still feel coherent when the API fails or is skipped.
The main menu layers crisp HTML wooden signs over a full-screen WebGL wardrobe scene so clicks and typography stay reliable while the beach stays immersive.
Deploying real-time multiplayer on Fly.io and the Vite client on Vercel meant wiring environment URLs and CORS without leaking API keys to the browser.
Accomplishments that we're proud of
A playable solo loop end-to-end: evaluation, scoring, best-of-3, auto-dealt cards, and round banners—not just a Wordle skin.
Twenty distinct card personalities that actually change how the round feels, not just stat tweaks.
A 3D wardrobe main menu that sets the tone before you guess a single letter.
Generative surf manga that turns cleared words into a scrollable, persistent story with chapter copy that references prior rounds.
A team-plus-AI workflow that stayed shippable: shared grounding doc, typed stores, and deploy docs that get the game on the internet.
What we learned
A living AGENTS.md beats ad-hoc prompts when two humans and two agents share one repo—it's the contract for phase, conventions, and what not to touch yet.
Zustand plus explicit effect timers scale better than scattering card state across components when effects stack and expire at different times.
Graceful degradation for AI features—fallback art, IndexedDB cache, stub-to-ready panel states—keeps the game fun when the network or API isn't cooperating.
Shared event constants pay off the first time you rename a socket event and TypeScript catches it on both sides.
What's next for Tidal Wordle
Wire NOAA tide data into wave amplitude and speed instead of static parameters.
Full multiplayer authority: server-owned answers, opponent board sync, reconnection, and card plays scoped per room.
3D polish: richer surfer ride animation, day/night skybox, and face-swap integration with the scene.
Juice and accessibility: sound, mobile layout, settings menu, and clearer feedback for screen readers.
Move duplicated client and server types into one shared package.
Log in or sign up for Devpost to join the conversation.