an expressive material 3 game overlay ui framework. css, vanilla html, vanilla js. built for injected overlays and standalone game ui. standard two-panel layout, dynamic theming, and decent fluid animations.
- [ x ] material 3 expressive design language (m3 dark)
- [ x ] two-panel layout: nav sidebar + scrollable content
- [ x ] expressive component rounding (first/last child logic)
- [ x ] zero-dependency logic (no frameworks, just raw speed)
- [ x ] optical centering & fluid morphing animations
- [ / ] dynamic accent color theming via css custom properties
- [ x ] hugging corner style sidebar (sharp inner, rounded outer, sorta got it.)
everything is self-contained. link the styles and scripts in your entry point (and obviously link everything together first.)
<link rel="stylesheet" href="hud.css">
<script src="tabs.js"></script>
<script src="hud.js"></script>populate your nav tabs in tabs.js and render your content via the panel map in hud.js.
| component | status | description |
|---|---|---|
Switch |
x | material 3 toggle with checkmark icon. |
Slider |
x | range input with fluid animation and value tooltip. |
Split Button |
x | dual-action button with morphing dropdown menu. |
Text |
x | simple labeled information display. |
Keybind |
? | planned - records a key press. |
NumberInput |
? | planned - numeric input with increment buttons. |
all colors are css custom properties on :root. change them at runtime to swap accent colors or themes.
--vx-accent: #D0BCFF; /* main branding color */
--vx-surface: #1C1B1F; /* panel background */virex-game-hud/
├── index.html # layout root
├── hud.css # core styles & m3 tokens
├── hud.js # component logic & panel rendering
└── tabs.js # sidebar navigation registry
mit. do whatever, credit appreciated.