Game HUD

Game HUD

Resource bars, minimap, quest tracker, hotbar and inventory, floating numbers, achievement toast and key prompts, laid over a scene. Corners on wide screens, stacked edges on phones, and the middle of the screen always clear. Try it in Skyrim, Pip-Boy, XMB and Cassette Futurism.

HUD overlay .hud

Six regions over a .hud-scene (any image, SVG, video or canvas). The middle row stays empty; only floating numbers cross it.

Health168 / 250
Magicka81 / 180
Stamina190 / 200
N
Whiterun Hold

Bleak Falls Barrow

  1. Speak to Farengar
  2. Retrieve the Dragonstone
  3. Collect draugr relics 3/5

E Open chest

Achievement unlocked Taking Care of Business Join the Thieves Guild
20G
Bleak Falls Barrow

Main quest. 1.2 km north-east.

Riverwood camp

Fast travel available.

Resource bars .hud-bar

--value (0–1) fills the bar; --trail shows the damage just taken. With motion on, the trail also follows --value by itself, half a second late.

Health200 / 250
Health (hit, trail)120 / 250
Health (low)30 / 250
Magicka (regen)99 / 180
Stamina (icon)140
Level 1263%
Segmented (10)7 / 10
Hearts (5, hit)3 / 5
Centred (Skyrim)150
Reversed126

Live (needs JavaScript): each hit drops --value only; the trail is automatic when motion is on.

Health100

Minimap .map.hud-minimap and heading strip

Core's .map frame and .map-pins, square or round, with a player arrow turned by --heading. The heading strip is core's .compass-strip.

N
N
Riften

Quest tracker .hud-quests

Objectives are an <ol class="hud-objectives">: done, current (aria-current="step"), failed and pending each have their own mark, with an optional .hud-count.

The Golden Claw

  1. Speak to Lucan Valerius
  2. Find the bandits 1/1
  3. Retrieve the golden claw 0/1
  4. Keep Camilla out of danger
  5. Collect wolf pelts 3/5

Side: A Night to Remember

  1. Find Sam Guevenne's staff in Morthal, the town hall or the general store

Hotbar and inventory slots .hud-slot

Square slots with an icon, key, count and a cooldown sweep from --cooldown (0–1). Rarity from data-rarity sets the border, glow and 1–5 pips. A hidden radio selects the slot.

Inventory grid .hud-inventory

Floating numbers .hud-float

Placed at --x/--y in the nearest positioned box. With motion on they rise and fade once; here they repeat. With motion off they stay put until the app removes them.

Live (needs JavaScript): spawns a number that removes itself on animationend.

Achievement toast .toast.hud-achievement

A core .toast with an icon, title, description, score and optional progress. Put it in a .toast-region with popover="manual" so it shows over everything, even an open modal.

Achievement unlocked Dragonslayer Defeat Alduin at the Throat of the World
50G
Progress Explorer Discover 100 locations 72 of 100
72/100
Achievement unlocked Thane of Whiterun Buy Breezehome and serve the Jarl

Key prompts .hud-prompt

Core <kbd> for keys; kbd.hud-pad for gamepad buttons, ringed by data-button (south, east, west, north). A <button class="hud-prompt"> is the tap target on touch screens.

E Open

R Take all

Shift + E Steal

Hold E Pick lock

A Open

B Back

X Take all

Y Favourite

LBRB Switch tab

✕ Select

○ Cancel