KQ-319 · HEALTH/SHIELD

Health Shield

A damage model built for legibility: shield absorbs first and shatters when it breaks, then health takes the rest — leaving a chip ghost at the old value that drains a beat later, so you can see exactly what the hit cost. Low health warms the fill and adds a pulse; healing refuses to overfill with a visible bounce at the cap.

KQ-319 · HEALTH/SHIELD
unit78/10078/100
shield 30/30

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/health-shield

Props

PropTypeDefaultDescription
max / start / shieldnumber · number · number100 · 78 · 30The two pools and the opening health.
hitnumber22Damage per strike.