Maki Birthday Surprise

A private birthday gift, delivered as a six-scene animated microsite that walks a single visitor from a tap-to-begin landing screen through a cake countdown, a personal letter, and a polaroid finale. Built entirely with HTML, CSS, and JavaScript, no framework, no build step, no database, deployed via a single FTP upload.

Challenge

Easther wanted to give a birthday gift that would feel different from a card or a video. Something the recipient could move through, interact with, and remember. The brief had emotional precision: the experience needed to land for one specific person on one specific day, with a Zootopia-inspired aesthetic, a heartfelt letter, and three personal photographs.

• One audience, zero margin for error. Unlike a marketing site, this had to work for a single recipient on a single device. Performance issues, broken animations, or a clunky tap target would break the moment.
• Mobile autoplay restrictions. Browsers block audio from starting on its own. The reveal needed to feel cinematic anyway, so the music, the moment, and the first interaction had to all line up on the same tap.
• Hand-off to a non-developer. Easther, the giver, is an incoming IT student. She wanted to be able to swap photos, edit the letter, or change the date later without help. The codebase had to be legible enough for her to adapt on her own.

Approach

We treated the site as a short film with six acts. JavaScript handles only one job, switching which scene is visible. CSS does the rest, including the moonrise, the character walk-in, the cake spring, the candle flicker, the envelope opening, and the polaroids dropping into place. Keeping the animation logic in CSS made the timing predictable and the code easy to read.

The narrative flows through a landing scene, a character meet-up, a flash-and-polaroid moment, a cake scene with a typed greeting and a 3-2-1 countdown, an envelope that opens to reveal a full letter, and a polaroid finale with a typed signoff. Each scene transitions on a single tap, mirroring how the recipient would naturally pace through it.

Audio handling was deliberate. The site looks for an optional music.mp3 file, and falls back to a soft music-box loop synthesized live in JavaScript if the file is missing. Music starts muted, since browsers block autoplay, and unmutes on the first tap, which is also when the experience begins. A ?scene=cake URL parameter lets the giver jump directly to any act for testing without sitting through the full flow.

The entire site ships as a single index.html, one stylesheet, one script, and a folder of transparent PNG character art and three polaroid photographs. No framework, no build pipeline, no Node, no database. The README walks the giver through deploying via FileZilla and swapping content (names, dates, photos, letter copy) by editing one of three files.

Results

• A gift the recipient can replay, not a one-time video lost in a chat thread, with six scenes paced to feel like a short film
• Future-proof by construction with zero dependencies that can deprecate or break, so the site stays online for as long as the domain is alive
• Native-feeling on the recipient’s phone with portrait framing, tap pacing, and audio that obeys browser autoplay rules without troubleshooting
• The giver can edit content herself by swapping names, photos, dates, or letter copy in one of three files, no CMS or developer required
• Zero recurring cost for the giver, with a single FTP upload and no accounts, dependencies, or expirations to manage afterward

Tools Used

HTML, CSS, JavaScript, Web Audio API