A little Sunday surprise. We finished something over the weekend and couldn't wait to show you, so here it is, out of the blue: game-hud is out, and it's free.
Thanks, as always, to everyone who builds with our stuff and tells us what breaks — it's why we keep making more.
This one's a bit of a departure for us, and we're a little in love with it.
What we're dropping
game-hud is a full game interface kit in plain HTML, CSS and a little vanilla JavaScript — no dependencies, MIT-licensed. Health bars with the AAA-style damage ghost (the delayed drain that lags a beat behind the real bar, so a hit reads at a glance), a minimap, hotbar, boss bars, dialogue, an inventory grid with rarity colours, skill trees, a kill feed, cooldown rings, cast bars, and genre suites for RTS, MOBA, battle royale, racing, survival and card games. More than 60 components in all. It drops onto whatever you're already rendering with — Three.js, Phaser, PixiJS, Unity's WebGL build, Godot's HTML5 export, or a bare canvas. See the repo.
One markup, twelve skins
Here's the hook, and the reason we couldn't sit on it. You write your HUD once, in plain HTML, and every component re-themes by loading a different stylesheet. Twelve skins so far — Futuristic, Modern military, Sci-Fi, Fantasy, Horror, Pixel, Cyberpunk, Cartoon, Glass, Steampunk, Rust and Nature — and your markup never changes between them. The health bar you built for a neon arena becomes a carved fantasy panel by swapping one file.
It's the presentation layer, not the game underneath — it gives you the look and the shapes, you wire them to your own numbers — but that's the whole trick: the look is done, and you can change your entire art direction in an afternoon.
Have a play
The demo is the fun part. Open it up, flip through all twelve skins, and try the in-game layouts — an FPS, a battle royale, an RTS, a racer, a card battler — the same components wearing completely different clothes each time.
It's brand new, so there are rough edges we haven't found yet. If you hit one, open an issue on GitHub. And if you make a skin of your own, send it our way — copy a skin's variable block, re-theme it, open a PR. We'd love to see where you take it.
That's the surprise. Go build something.
Cheers,
Aron & Sharon