Animated Birthday Microsite

A private birthday gift built as a six-scene animated microsite. The recipient taps through a Zootopia-inspired night sky, a character walk-in, a cake countdown with a typed greeting, a letter inside a tappable envelope, and a polaroid finale. No framework, no build pipeline, zero ongoing dependencies - just a single upload and a site that runs for as long as the domain is alive.

Challenge

The brief came from Easther, an incoming IT student who wanted to give Maki something genuinely unexpected - not a card, not a video. The experience had to feel cinematic, land on a mobile phone, and work for one person on one day without any margin for error.

Three real constraints shaped the build:

• One recipient, zero tolerance for glitches. A marketing site can recover from a rough first impression. This couldn't. Every tap target, animation, and audio cue had to work exactly right on the first pass.
• Browser autoplay restrictions. Audio can't start without user interaction. The music, the cinematic feel, and the opening tap had to land as a single coordinated moment, not feel like a workaround.
• Non-developer handoff. Easther wanted to be able to update names, photos, or the letter herself after delivery without needing help from a developer.

Approach

I structured the site as a six-act short film. JavaScript has one job: switching which scene is visible. CSS handles everything else - the moonrise, the character animations, the candle flicker, the envelope opening, the polaroids dropping in. Keeping animation logic in CSS made timing predictable and the experience consistent across devices.

Audio was handled deliberately. Music starts muted - browsers require a user gesture before playing audio - and unmutes on the very first tap, the same moment the experience begins. No awkward prompts, no broken autoplay.

The handoff was built into the design from the start. The giver can swap photos, edit the letter, or change names herself by touching a small number of clearly marked spots - no CMS, no developer required.

Results

• A replayable gift the recipient keeps, not a one-time video buried in a chat thread
• Zero dependencies that can break or deprecate - the site runs for as long as the domain is alive
• Portrait-framed, tap-paced, and audio-compliant on mobile with no manual troubleshooting required
• The giver can update content herself, independently, after delivery
• Zero ongoing cost - no subscriptions, no accounts, nothing to expire

Tools Used

HTML, CSS, JavaScript, Web Audio API