Low Health

Display a pulsing red vignette overlay when the player's health is low.

Technique

Use a full-screen fixed div with box-shadow: inset to create a red vignette effect. Animate the opacity with CSS keyframes for a pulsing effect.

Key Concepts

• Fixed positioning with inset-0 to cover the entire screen
• pointer-events-none to allow clicking through the overlay
• Inset box shadow creates the vignette: inset 0 0 160px 40px red
• CSS animation for pulsing: animate-[low-health-opacity_0.5s_ease-in-out_infinite_alternate]

Usage