UIIntermediate

Low-Health Warning

Pulsing red vignette and a heartbeat when health drops low — danger you feel before you read.

uihealthaudiofeedback

Examples

Captured from this page's own interactive demo below.

Overview

A low-health warning moves the most important number in the game — 'am I about to die?' — off the health bar and onto the player's whole screen: a red vignette pulses at the edges, a heartbeat thumps in the audio, maybe the music muffles. The player stops needing to look at the HUD precisely when they can least afford to.

The pulse should breathe, not blink: ease the vignette in and out on a heartbeat rhythm, and scale both the opacity and the tempo with how low health actually is — 30% health gets a slow warning pulse, 10% gets an urgent pounding. That mapping turns the effect into an analog gauge.

Restraint decides whether players thank you or mute the game. The warning must never obscure the action it's warning about — keep the vignette at the edges, cap its opacity, and stop it the moment health recovers past the threshold.

Interactive Demo

♥

100%

press Hit until health drops below the threshold

Warning Below30%

Pulse Period800ms

Use Cases

ShootersSurvival horrorAction RPGsRoguelikes

Best Practices

Do

✓Scale intensity AND tempo with missing health — the pulse itself becomes a readable gauge.
✓Keep the vignette at the screen edges with a capped opacity; the center stays clean for the fight.
✓Layer senses: vignette for the eyes, heartbeat for the ears, a gentle controller rumble for the hands.

Don't

✕Don't strobe — a hard on/off blink causes fatigue in minutes; breathe the effect with easing.
✕Don't let the warning persist after healing; it must cut out the frame health crosses back over the threshold.
✕Don't stack it with every other red effect — if damage flash, blood splatter, and vignette all shout at once, nothing is heard.

Common Mistakes

⚠A fixed-intensity warning that looks identical at 29% and 2% health, wasting the channel's information.
⚠The heartbeat loop continuing into the pause menu and death screen because nobody stops the audio source.
⚠Red vignette on a game whose damage effects are also red-tinted, making low health indistinguishable from taking a hit.

Implementation

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

Prompt

Add the "Low-Health Warning" game-feel effect to my project: Pulsing red vignette and a heartbeat when health drops low — danger you feel before you read.

How it works: A low-health warning moves the most important number in the game — 'am I about to die?' — off the health bar and onto the player's whole screen: a red vignette pulses at the edges, a heartbeat thumps in the audio, maybe the music muffles. The player stops needing to look at the HUD precisely when they can least afford to.

Guidelines:
- Scale intensity AND tempo with missing health — the pulse itself becomes a readable gauge.
- Keep the vignette at the screen edges with a capped opacity; the center stays clean for the fight.
- Layer senses: vignette for the eyes, heartbeat for the ears, a gentle controller rumble for the hands.

Avoid:
- Don't strobe — a hard on/off blink causes fatigue in minutes; breathe the effect with easing.
- Don't let the warning persist after healing; it must cut out the frame health crosses back over the threshold.
- Don't stack it with every other red effect — if damage flash, blood splatter, and vignette all shout at once, nothing is heard.

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