AddChai - Brand Site That Starts as a Playable Game

INTRODUCTION

AddChai Creative Studio is a creative agency. Agencies don't get noticed for having a tasteful scroll-down landing page — they get noticed by being something. So instead of building a brand site to read, I built one to play: the homepage loads into an iframed 2D arcade game with a leaderboard, and only after you've taken a swing does the site hand you over to the agency itself, presented as a retro operating system where each section is a window on a desktop.

The whole thing is solo work — concept, art direction, the game, the leaderboard backend, the OS chrome, the page system, every line. A side artefact came out of the build: a 3D typing scene with puppeteer-style hands using inverse kinematics that target the closest key as you type. It started as an OS-window inside addchai.com and ended up too good to lock inside one site, so it was spun out as a standalone ASMR experience at typing-ai.netlify.app.

MY ROLE

Sole designer & developer — concept, art direction, game design + implementation, leaderboard backend, retro OS UI chrome, every brand section, the typing scene, packaging the typing piece as a standalone artifact. AddChai Creative Studio is the client I built it for.

timeline

2025

link

https://www.addchai.com/

situation

AddChai Creative Studio is a creative agency — brand solutions, creative strategy, video production. The audience is internet-native, taste-aware, and rewards craft over copy. A standard agency landing page would slot into the same shape as every other "we are a creative studio" site. The brief was the opposite of that: build something that visitors come back to, not just visit. The team wanted a place, not a brochure.

task

Make the entry to the site an experience, not a hero block — visitors should be inside something within five seconds
Anchor that entrance with a game + public leaderboard so the first thing the site does is invite competition (and competition is shareable)
Treat the rest of the site as OS-style windows on a virtual desktop — every brand section (work, services, contact) is a window the visitor opens, not a scroll section they pass over
Solo build — no agency-side dev, no white-label CMS, no Webflow shell

action

Game-first entrance (iframe). The homepage embeds a custom 2D arcade game built in p5.js. Pick from 11 character classes (Warrior, Mage, Archer, Knight, Ninja, Paladin, Rogue, Berserker, Monk, Druid, Warlock — each with their own sprite sheet), arrow-keys to move, space to shoot, AddChai-branded power-ups boost fire rate, parallax scrolling backgrounds, three-heart health system, on-screen timer. The level ends with a boss battle. The iframe loads instantly, the game runs entirely client-side, and only when the player either wins or chooses to exit does the site reveal the agency layer behind it.

‍

Leaderboard — Firebase Firestore. The game lazy-loads the Firebase Web SDK (v11.9.1) at score-submission time only — so the iframe doesn't pay the network cost upfront. On clear, the player submits name + completion time + score; the leaderboard view reads back ordered top scores from Firestore in real time. The "competition is shareable" loop runs entirely on Firestore reads/writes with no custom backend to babysit.

‍

Retro OS chrome. Behind the game iframe is the agency site itself, presented as a virtual desktop. Brand sections (work, services, about, contact) live in OS-style windows with chrome (close / minimize / drag) that the visitor opens, drags around, and arranges. Visual language is intentionally retro — pixel-leaning typography, system-style window borders, dot-grid background — so the chrome reads as deliberate-design-decision, not budget Bootstrap. The whole shell is hand-built; no admin panel, no theme.

‍

Spun-off side artefact: the typing scene. One of the OS-windows was a 3D scene where two puppeteer-style wooden hands type on a 3D QWERTY keyboard — type on your physical keyboard and the closest finger reaches over and presses the matching 3D key. Built with

‍

‍Three.js, CCD inverse kinematics for the finger-to-key targeting, MeshPhysicalMaterial with clearcoat / sheen / wood-grain textures for the puppeteer look, HDR environment mapping for reflections, plus an EffectComposer post-processing chain (UnrealBloomPass for the neon-accent glow, SSAO for contact shadows). Each key has its own press / release sample with randomised playback rate and detune so the audio stays alive over long typing. It outgrew its window, so I detached it and shipped it as a standalone ASMR experience at typing-ai.netlify.app with its own public source repo.

‍

Solo full-stack. No agency engineering team, no CMS — just a handful of well-organised vanilla JS modules, a p5.js game, a Three.js scene, and a Firestore project. The whole thing is small enough that I can ship a content update without a deploy pipeline.

result

Live at addchai.com — game-first entrance, public leaderboard, OS-chrome agency site behind it
11-class p5.js game with boss battle, power-ups, and parallax — fully custom sprite work
Firestore-backed leaderboard that drives a small but real competition loop on the homepage (rare for an agency site)
Spun-off ASMR experience (typing-ai.netlify.app) that has independent legs as a portfolio artefact
Two public open-source repos (addchai-game, typing-ai) so anyone can read the implementation

AddChai - A Brand Site That Starts as a Playable Game