HeartBar
A signature 8-bit HP / lives indicator. Renders max heart slots and fills value of them — pixel-art hearts, drawn as discrete rects so they never anti-alias.
Default
Custom max
Accessibility notes
- Exposes
role=“progressbar”witharia-valuenow,aria-valuemin, andaria-valuemax— screen readers announce “Hearts: 2 of 3” instead of asking the user to count pixels. - Hearts pop in with a tiny scale animation that swaps to a no-op under reduced motion.
- Override the announced label with the
labelprop — useful when used for shields, lives, or any non-heart counter.