Tamagotchis of NUS

Problem

University web portals (LumiNUS, EduRec, NUSMods) are functional but lifeless. A group of us thought it would be fun — and a good technical challenge — to build something that made the daily slog through course registration and grade-checking slightly more delightful. The idea: small animated pixel-art creatures that live on NUS web pages, reacting to your interactions and accumulating across sites you visit.

Approach

We built a Chrome extension that injects a content script into NUS-domain pages. The script spawns a sprite-sheet-animated Tamagotchi character on the page using a Canvas overlay, positioned so it walks along the bottom edge of the viewport without interfering with page content. Each NUS site has a unique creature variant, and visiting a site for the first time “discovers” that creature, adding it to a persistent collection stored in Chrome’s local storage. The popup UI shows your collection and lets you rename or favourite creatures. Sprites were hand-drawn in Aseprite and exported as optimised sprite sheets.

Hard parts

The biggest challenge was making the overlay non-intrusive. Early versions intercepted click events, broke dropdown menus, and caused layout shifts on pages with fixed footers. We solved this by setting pointer-events: none on the Canvas and using MutationObserver to reposition the sprite when the page layout changed. Performance was another concern — running a Canvas animation loop on top of already-heavy university portals caused frame drops on lower-end laptops. We moved to requestAnimationFrame with frame budgeting: if a frame exceeds 8 ms, the sprite freezes until the next idle window, keeping the host page responsive.

Outcome

The extension was used by about 50 students during a semester-long pilot. The most requested feature was inter-page creature interaction (two creatures meeting when you have multiple NUS tabs open), which we prototyped using the BroadcastChannel API. The project taught us Chrome extension architecture, performance-sensitive DOM manipulation, and the surprising complexity of building something playful on top of pages you don’t control. It’s shown on this portfolio with an animated preview since the extension requires NUS authentication to run live.