UIBeginner

Delayed Health Bar

A ghost segment that lingers after damage, showing exactly how much a hit took.

uifeedbackcombathealth

Examples

Captured from this page's own interactive demo below.

Overview

A delayed health bar layers two fills: the real bar drops the instant damage lands, while a second 'ghost' fill (usually white or yellow) holds the old value for a beat, then drains down to meet it — the fighting-game classic seen in Street Fighter, Dark Souls bosses, and countless others.

It works because an instant drop is nearly unreadable — the old value is gone before the eye can compare. The lingering ghost segment is a visible measurement of the hit: its width literally is the damage dealt, displayed for as long as you need to register it.

Beyond readability, the drain itself carries feel — a chunk of bar visibly bleeding away reads as consequence and threat in a way an instantly-updated number never does.

Interactive Demo

HP 100 / 100

Ghost Delay500ms

Drain Duration300ms

Use Cases

Fighting gamesBoss fightsRPGCombat

Best Practices

Do

✓Drop the real bar instantly — the delay belongs only to the ghost layer, never to the true value.
✓Reset the ghost's hold timer when hits land in quick succession, so a combo reads as one accumulated chunk.
✓Pick a ghost color that contrasts with both the fill and the background (white on red is the classic for a reason).

Don't

✕Don't delay the real value itself — the player must always be able to trust the actual bar in a split-second decision.
✕Don't make the drain so slow that the ghost from the last fight is still visible in the next one.
✕Don't use the same treatment for healing — gains reading identically to losses is confusing; grow instantly or animate the fill up instead.

Common Mistakes

⚠Animating the ghost with a linear tween from full duration regardless of chunk size — small chips and huge hits should not drain for the same fixed time.
⚠Letting the ghost layer render on top of the real fill, hiding the current value instead of the lost one.
⚠Driving the effect from the displayed bar width instead of the underlying health value, so rounding drifts accumulate.

Implementation

Paste this into your AI assistant (Cursor, Copilot, Claude) to add the effect to your project.

Prompt

Add the "Delayed Health Bar" game-feel effect to my project: A ghost segment that lingers after damage, showing exactly how much a hit took.

How it works: A delayed health bar layers two fills: the real bar drops the instant damage lands, while a second 'ghost' fill (usually white or yellow) holds the old value for a beat, then drains down to meet it — the fighting-game classic seen in Street Fighter, Dark Souls bosses, and countless others.

Guidelines:
- Drop the real bar instantly — the delay belongs only to the ghost layer, never to the true value.
- Reset the ghost's hold timer when hits land in quick succession, so a combo reads as one accumulated chunk.
- Pick a ghost color that contrasts with both the fill and the background (white on red is the classic for a reason).

Avoid:
- Don't delay the real value itself — the player must always be able to trust the actual bar in a split-second decision.
- Don't make the drain so slow that the ghost from the last fight is still visible in the next one.
- Don't use the same treatment for healing — gains reading identically to losses is confusing; grow instantly or animate the fill up instead.

Implement the effect in whatever engine/stack the project already uses and follow its existing code style. Wire it up where it makes sense.