Oliver 'Oli' Cheng
← Back to projects
2026 live

Life HUD

A life dashboard inspired by MMORPG UI patterns from RuneScape and World of Warcraft.

  • React 18
  • TypeScript
  • Vite
  • Tailwind CSS
  • localStorage
  • Analytics

Problem

Life admin is fragmented across notes, calendars, trackers, and reminders, so your 'character state' is never visible in one place.

Solution

Rebuilt personal planning as an open-world character HUD: quests, buffs/debuffs, loadouts, and progression cues modeled after RuneScape and WoW interface patterns.

Impact

Makes self-management feel legible and motivating: assess current state fast, pick the next action, and keep momentum like a live game session.

Life HUD is a personal operating system inspired by MMORPG interface design. Read the companion essay: Philosophy of Life HUD.

I took direct inspiration from games like RuneScape and World of Warcraft, where you are managing a character in an open world with visible stats, active effects, quest objectives, and gear decisions.

That design language stuck with me. I do see life a bit like a game: not in a trivial way, but in the sense that you are constantly managing energy, priorities, constraints, and long-term progression.

For lore: I was a level 80 Tauren Shaman in Wrath of the Lich King, so this interaction model is wired deep.

Core modules

  1. Quest log with priorities and completion tracking
  2. Buff/debuff effect timers for habits and behaviors
  3. Equipment and loadout system mapped to routines/tools
  4. Home HUD showing current state and progression context

Demo Mirror

Live Preview

Mini preview of the actual demo. Use the launch button for full-screen interaction.

Open Demo