A fully-featured Wordle clone with animations, dark/light theme, hard mode, colorblind mode, sound effects, and confetti celebrations.

Day 12. Everyone's played Wordle. Let's see how close AI can get to the real thing.

The Prompt

> "Build a Wordle clone with a proper word list, tile animations, keyboard, statistics tracking, and share functionality."

How It Was Built

This one went through 7 Watchfire tasks, and watching the progression was interesting because it mirrors how you'd actually build a polished game if you had infinite patience.

1. Game engine with word lists. The foundation: a solution list of around 2,300 words, a valid guesses list of around 10,000 words, and the core guess evaluation logic. Green, yellow, gray. The basics.
2. Polished UI with tile animations and keyboard. Tile flips on reveal, pop on input, shake on invalid words. An on-screen keyboard that updates letter colors as you play.
3. Statistics and share. Win percentage, guess distribution bar chart, current and max streak tracking. The share button copies your emoji grid to clipboard, just like the real Wordle.
4. Help modal, dark/light theme, hard mode. A how-to-play overlay with visual examples. Theme toggle with smooth transitions. Hard mode that forces you to use revealed hints in subsequent guesses.
5. Colorblind mode, accessibility, React refs bug fix. High contrast colors for colorblind players. This task also caught and fixed a React refs bug that was causing issues with the tile animations.
6. Sound effects with Web Audio API. Audio feedback for key presses, tile reveals, wins, and errors. All generated with the Web Audio API, so no audio files to load.
7. Confetti celebration on win. A canvas-based particle system that fires when you solve the puzzle. Because you earned it.

The whole thing lives in a single custom React hook (useWordle.ts) for the game logic, with the UI as a Next.js page. Clean separation.

What I Got

It feels like Wordle. That was the bar, and it clears it. The tile flip animation on reveal, the slight pop when you type a letter, the shake when you enter an invalid word. These micro-interactions are what make the real Wordle satisfying to play, and they're all here.

Dark and light themes. Both look clean. The dark mode is the default (as it should be), but the light mode works well too. Toggle is in the header, transitions are smooth.

...

---

Read the full article →