← Back to the Arsenal
Gift project · Interactive story · 2026

Wonderland

Wonderland is a birthday website I made as a gift, built mainly for phones. It is personal, so the live link opens a guest version with the cake, the candle and the confetti. The photos, recordings and letter stay in the private versions.

164
photos placed by hand
24
videos
3
versions of the page
Wonderland screenshot 1Wonderland screenshot 2

The problem

A message felt too small for the day. I wanted to give something that unfolds slowly and feels like it was made for exactly one person, while still being something I could safely show to anyone else.

Constraints

  • It would be opened on a phone, so everything is designed for a small screen first.
  • Around 190 photos and videos plus 8 audio recordings had to load without making the page heavy.
  • Some parts were meant only for her, some for family, and guests must never see personal media.
  • The page must not open before the day.

What I built

  • An opening cover that looks like a wrapped gift and opens with confetti.
  • A 3D two-tier cake with a live candle flame. You hold to blow the candle out, and confetti follows.
  • An age reveal where the old number is replaced by the new one.
  • Photo chapters with captions, framing that respects portrait photos, a wall of polaroids and a full-screen viewer for photos and videos.
  • A custom player for 8 voice recordings, a few personal memory sections and a closing letter, all in the private version only.
  • Three versions of one page: guest, family and private. A typed word picks the version, the choice is remembered in the browser, and a "Switch word" link in the footer changes it.
  • A countdown seal that can keep the page locked until midnight on the birthday, with a private preview link for me.

Trade-offs

Check every file by hand

Photos and videos were rotated, cropped and cleaned up one at a time, so nothing looks stretched and no app buttons show in the corners.

Check the words on the server

The words are never sent to the browser. A server function checks the typed word and only returns which version to open.

Filter media by version in one place

Items left out of a version are never rendered at all, not just hidden, so the guest view cannot leak a photo.

A seal flag instead of a date check scattered around

One setting locks or opens the page, so I could review it and lock it again without touching anything else.

Outcome

  • Finished and given as a gift.
  • The live link shows the guest version only. I have not linked the code here, because the project holds personal photos and recordings.

Stack

Three.jsAnimation
Want the long version?

Happy to walk through the decisions live.

Email me →