Try It
Overview
Orchard of Letters is a collaborative digital garden where plants grow as words flow. Set in a minimalist pixelated world, users start from a seed word of their choice and grow their plants using crossword mechanics—interlocking letters to form branches. Moreover, plants grow on their own but only when the user leave their tab open, as if they need the user’s care to thrive.
The garden uses a dictionary-based validation mechanism—valid words 'bloom' with color and life, while disconnected letters remain as dry sketches. The result is a continuous horizon of unique plants, grown and tended by a community of word gardeners.
Process
In the beginning, I experimented with different styles for the word trees—trying different fonts and colors—but settles on this pixel-art aesthetic, especially because I found this pixel-art font (https://www.dafont.com/retro-computer.font) where each letter occupies a perfect square shape. And I chose three main colors: a darker green for the seed word (like the stem of a plant), a more vibrant green for words that are validated (like they are blooming), and a dry wood color for words that are invalid.
Then I coded the basic mechanics of the plant experience. Similar to my last project, I used the canvas element for efficient pixel-perfect rendering. The canvas is divided into square tiles where each tile can be a letter. Similar the mechanics of a crossword puzzle, users can create new branches from a shared letter on an existing branch. I added some limitations such as two branches cannot be adjacent so that the overall visual better resembles a plant.
Next I needed to implement the word validation. I thought of using server-side APIs, but eventually decided to use a comprehensive word list txt file (370,000+ words) that the frontend would fetch and use in the background. This way, after the file is fetched, all word validation could be instant.
And I also had a hard time deciding whether the growth should be server-side or client-side, but I felt that it would be boring if the plant can just grow without the user even opening the page, so I put it entirely on the client side. As long as the user has the tab open, the growth script would run in the background. It calculates an interval between 10 seconds and 5 minutes based on how large the plant has grown (as the plant gets larger it will grow slower). When the interval is reached, it randomly selects a valid letter to start the growth, searches for a word with this common letter in the wordlist, and randomly pick from one of the words that came up. What’s more, the growth uses a shorter list (8,500+ words) so that the search wouldn’t take too long.
Tech Stack
- EJS for frontend templates (passing plant data objects to the frontend)
- PostgreSQL for database
- Prisma for database schema
- simplewebauthn for Passkey login and signup
- socket.io for real-time updates with WebSocket
- GSAP for animation