← 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
Life HUD preview

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