Our Little Garden

An interactive 3D garden where each flower opens an "open when…" letter.

Built with Next.js 15, React 19, TypeScript, Tailwind CSS, React Three Fiber + drei, GSAP and Framer Motion.

Development

npm install
npm run dev

Then open http://localhost:3000. To try it on a phone, run npm run dev -- -H 0.0.0.0 and open http://<your-computer's-LAN-IP>:3000 on a phone on the same Wi-Fi.

Adding the letters

Everything she reads lives in data/memories.ts: one entry per flower.

{
  id: "sad",                       // keep ids stable: they're how opened letters are remembered
  flower: "lily",
  label: "Open when you're sad",   // shown on the envelope and the flower's tag
  message: `First paragraph.

Second paragraph, after a blank line.`,
  photo: { src: "/images/personal/us.jpg", alt: "Us at the beach" },  // optional
  audio: { src: "/audio/personal/sad.m4a", title: "Listen to this" },  // optional
},

• Write message between backticks. A blank line starts a new paragraph; a single line break stays as a line break.
• Put photos in public/images/personal/ and audio in public/audio/personal/. Both folders are gitignored, so those files never reach GitHub, which also means a deploy from GitHub won't include them. See "Deploying" below.
• The "just because" letter (flower: "final") stays locked as a bud until the other six have been opened.

The shared garden

Besides the seven letters above, either of you can plant new ones from the garden itself: Plant something (top right) asks for the passcode once per device, then lets you pick a flower, write an "open when…" letter, and attach a photo or voice note. The new flower grows in where you're looking, and if the other person has the garden open it grows in on their screen too, with a note saying who planted it.

It runs on the Supabase project our-little-garden (Singapore):

• Table plants: one row per planted letter, including its position in the garden. The browser can read and add rows, but never edit or delete them, so a leaked link can't wipe anything. To remove a plant, delete its row in the Supabase dashboard (Table Editor → plants).
• Storage bucket garden-media: uploaded photos (resized to at most 2000px) and voice notes, 25 MB max each.
• The project URL and publishable key are in lib/supabase.ts. They're safe in client code: the key only allows what the table's access policies permit. Set NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY to point at a different project.

The passcode is checked in the browser against a SHA-256 hash in lib/plants.ts, which also shows how to change it. It keeps casual visitors out, not a determined one. It needs a secure connection, so planting works on localhost and the deployed site but not over http://<LAN-IP>.

Unfamiliar flower_type values (added by hand in the dashboard, say) still render as one of the six flowers.

Walking together

The first time each device opens the garden, it asks Who are you? Zorrow / Skelly. The answer is saved in the browser, and there's a "Not Zorrow?" link under "Enter the garden" to change it.

• Your own gardener: you walk it with WASD or the arrow keys. On a phone, use the joystick that appears bottom left. The view follows when you near the edge of the screen.
• The other gardener, while they're here: if the other person has the garden open, their gardener walks wherever they steer it, live on your screen. A note says when they arrive.
• The other gardener, while they're away: it heads home to the cottage and potters about inside. If you see them leave, it walks back down the path and in through the door. When they come back, it reappears wherever they are.
• Waving: tapping either gardener makes it wave on both screens. If they tap yours, you get a "waved at you" note.

Inside the cottage. Follow the stepping stones out of the gate to the cottage, then walk into its door or click it to go inside. Inside is a little room with a bed, a table, a bookshelf and a plant. To go back out, walk into the door or click it.

The cottage keeps three things you can click. Each glows softly when you hover over it.

• The photo wall above the bed: photos either of you hang there (with Add a photo, after the passcode, plus an optional caption), and every photo from a letter you've opened. There's a gallery to browse them full size. Hung photos are stored in the Supabase table house_photos, with the files under house-photos/ in the garden-media bucket.
• The corkboard by the door: short notes either of you can pin (after the same passcode as planting). They appear on the other person's board straight away. Notes are stored in the Supabase table notes. To take one down, delete its row in the dashboard (Table Editor → notes).
• The bookshelf: every letter you've already opened, to read again without walking back to its flower. Letters you haven't opened in the garden yet never show up here.

Around the garden. There are four more places to spend time. Each glows faintly and shows a tag when you hover over it.

• The swing: under the old tree on the left. Walk over and click it to sit down; walking, or clicking it again, gets you up. There's room for two. When you're both sitting on it (or on the two benches at the end of the dock), little hearts float up between you. The other person sees you sit, too.
• The dock: out into the pond from its left bank, with two benches at the end looking at the lotus. It sits you down the same way as the swing.
• The mailbox: just inside the gate.
  • Writing: click it to write the other person a letter (after the passcode) and choose when it opens: in 1 day, 3 days or a week.
  • While it's on its way: the letter can't be read by anyone, not even through the database's public API. The mailbox raises its flag, and the recipient only sees "something's coming… soon" (or "in a few days").
  • When it arrives: they get a "You've got mail!" note in the garden, and an envelope peeks out of the mailbox until they open it. The sender can see when it's been opened.
  • Where letters are kept: in the Supabase table mailbox. To remove one, delete its row in the dashboard (Table Editor → mailbox).
• The stargazing hill: the grassy mound in the back right corner, with a picnic blanket on top.
  • To stargaze: walk up onto it, or click it from anywhere. The dusk deepens into full night, the sky fills with stars (and the odd shooting star), and the view tips up to look at them.
  • To come back: walk off the hill (or, if you clicked it, take a step).
  • What it touches: only your own screen; nothing is stored.

Inside, the music softens as if heard through the walls. To use a separate cottage track instead, put it in public/audio/ and set HOUSE_SRC in lib/music.ts.

The far garden. At the back of the garden, a gateway in the fence leads to a little wooden bridge over a brook.

• Getting there: walk over the bridge (or click it) to reach the far garden, an open meadow with a signpost in the middle.
• The doorways: five are spaced around it, each the way into a place of its own. Walk into one, or click it, to go in; walk back out of its door, or click the door, to come back out in front of it.
• Getting back: cross the bridge.

The five places off the far garden:

• The greenhouse: warm glass, with one of every kind of flower on a stand along the back, each with its name card (hover one to see what it's for). Click the potting bench to plant something: it's the same form and passcode as the Plant something button.
• The treehouse: up the rope ladder, a small cosy room with a nest of cushions, a candle, and a window looking down over the far garden. Nothing to do; it's just for the two of you.
• The gazebo: an open white gazebo on a lawn, with vines and wisteria, lanterns and a bench. Quiet, and left open for whatever it's for later.
• The lighthouse: a tall striped tower, its light sweeping over the meadow. Inside, a lamp keeps a countdown to your next visit:
  • To turn it on: set NEXT_VISIT_DATE in lib/countdown.ts to a date and time with its time zone, e.g. "2026-12-20T15:00:00+08:00", and redeploy.
  • While it counts: walking up to the tower or the lamp (or clicking the lamp) says how many days and hours are left.
  • Once the day comes: it celebrates instead, until you set the next date.
  • With no date: the lamp sits unlit and says nothing.
• The maze: a small hedge maze, a few minutes' walk, with a fork or two and some dead ends. In the clearing in the middle is a flower that grows nowhere else, with a message for whoever reaches it. Change the message with MAZE_SECRET in lib/places/maze.ts.

You only see the other person's gardener when you're in the same place. The top-left corner says where they are: "here with you", "in the garden", "in the cottage", "in the far garden", "in the greenhouse", "up in the treehouse", "in the gazebo", "in the lighthouse", "in the maze", or "away". While someone is away, their gardener is at home in the cottage, pottering about.

This runs on a Supabase Realtime channel (garden-live):

• Presence says who's online.
• Broadcast carries movement (about 12 updates a second while walking) and sitting, plus waves and a nudge when a letter is posted.

Nothing is stored. There's no login: the name is just a choice on each device.

Festivals

While a festival is on, the garden is dressed for it. Thadingyut, the Festival of Lights, runs from 25 to 28 October 2026 in Myanmar time, a day longer than the festival itself.

• The garden:
  • The evening warms to dusk.
  • Strings of lights run along the fence, the cottage's roof and the bridge's rails.
  • Paper lanterns hang along the fence, under the gateways, at the cottage and in a few trees at the back.
  • Candles line the paths, and the cottage windows glow.
• The greeting: on the way in, the garden greets you with "သီတင်းကျွတ်ပွဲတော် မင်္ဂလာရှိပါစေ" and "Happy Thadingyut", once per visit.
• The festival menu: the lantern button, bottom right, has the rest:
  • Light a lamp: a little clay oil lamp, lit just in front of your gardener (it floats if you're on the pond), with a few words if you like. It's behind the same passcode as the notes board. Each of you can light up to 30. The other person sees it appear straight away, and hovering or tapping one shows who lit it and what for. They're kept in the Supabase table festival_lamps; to remove one, delete its row in the dashboard.
  • Launch a firework: one goes up over your gardener (at most one every 2 seconds), and the view looks up to watch. The other person sees it too, if they're in the garden. A few also go up on their own now and then.
  • Light together: both of you press it within about 10 seconds. A bigger show of fireworks plays on both screens and every lantern brightens. After you press, it says who it's waiting for, and lets you know if the time runs out.
  • Pay respects: your gardener bows with hands together, and the other person gets a note.
  • Firework sounds: off unless you turn them on. Always silent while the music is muted.
• Adding a festival: add an entry to FESTIVALS in lib/festivals.ts (Tazaungdaing, say) with its dates and colours. Everything above follows on its own.
• Seeing it outside its dates: add ?festival=thadingyut to the URL, e.g. to try it out or show it after it's over. Use ?festival=off to turn it off.

Testing flags

Add these to the URL:

Flag	What it does
?skipintro	Skip the opening line and go straight to the garden
?reset	Forget which letters have been opened on this device (progress is saved in the browser)
?debug	Show an FPS meter, for checking performance on a phone
?festival=thadingyut	Dress the garden for Thadingyut whatever the date (?festival=off for none)

Flags combine, e.g. /?reset&skipintro.

Performance

The scene adapts to the device: it starts at a moderate resolution, and if the frame rate drops it lowers the resolution and halves the grass, wildflowers, fireflies and petals. Open the site with ?debug on her kind of phone to check the frame rate.

Deploying

The project deploys on Vercel from the main branch of the private GitHub repo; every push to main redeploys.

Because photos and audio are gitignored, they won't be in a GitHub-based deploy. Options:

1. Now that the repo is private, remove the two public/*/personal blocks from .gitignore and commit the media.
2. Host the media elsewhere (e.g. Vercel Blob) and use full URLs in data/memories.ts.

The site is public to anyone with its URL (it's hidden from search engines), so share the link only with her.

Where things live

Path	What
data/memories.ts	Letter text, labels and optional photo/audio for each flower
lib/layout.ts	Where each flower grows, and the stepping-stone path
lib/flowerSpecs.ts	Petal shapes and colours for each flower
components/garden/	The 3D scene: terrain, pond, flowers, camera, effects
components/ui/	Intro, envelope and letter, progress row, flower tags
lib/gardenStore.ts	Garden state: intro stage, open letter, which letters have been read
lib/plants.ts, lib/plantStore.ts	The shared garden: Supabase reads, uploads, realtime, passcode, where new plants grow
components/garden/Fence.tsx	The fence and gate around the garden
components/garden/Gardeners.tsx	Zorrow and Skelly: their looks, pace, wandering, tending and the wave when tapped, their walk in from the cottage, and walking them yourself or live
lib/presence.ts, lib/playerInput.ts	The live garden: who you are, who's online, sending and replaying movement; keyboard and joystick input
components/ui/PlayerControls.tsx, components/ui/WhoAreYou.tsx	WASD/arrow keys and the touch joystick; the "Who are you?" question
components/zones/registry.ts, lib/zones.ts	The zones (garden, cottage, far garden and its five places): each one's scene, spawn points and exits, and which one is showing
components/zones/FarGardenZone.tsx, components/zones/far/, lib/farGarden.ts	The far garden: its meadow, signpost and five entrances
components/zones/places/, lib/places/, lib/rooms.ts	The greenhouse, treehouse, gazebo, lighthouse and maze: their scenes, layouts, and walking about in them
lib/countdown.ts	The lighthouse's countdown: the date of your next visit
lib/bridge.ts, components/garden/props/Bridge.tsx,