low-health

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

31|Updated Jan 19, 2026
One-click install
npx skills add https://github.com/verekia/r3f-gamedev --skill low-health
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: low-health
Source: https://github.com/verekia/r3f-gamedev/tree/main/skills/low-health
Command: npx skills add https://github.com/verekia/r3f-gamedev --skill low-health

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Display a pulsing red vignette overlay to visually indicate when the player's health is critically low, helping players notice danger quickly without obstructing gameplay.

Core Features & Use Cases

  • Pulsing full-screen overlay using a CSS inset box-shadow to create a vignette effect.
  • Non-interactive UI element that fades in/out with health fluctuations to signal danger.
  • Simple integration into existing React-based game UIs with minimal code changes.

Quick Start

Add the overlay component to render the red vignette when health is low.

Frequently Asked Questions about low-health

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a pulsing red vignette overlay for low health in a React game UI?▼

A pulsing red vignette overlay for low health in a React game UI is created using a fixed, full-screen element with a CSS inset box-shadow that pulses to visually signal critical health without obstructing gameplay.

Does the pulsing red vignette overlay obstruct gameplay in real-time game UIs?▼

The pulsing red vignette overlay does not obstruct gameplay in real-time game UIs because it is a non-interactive full-screen element that fades in and out with health fluctuations to signal danger.

Can I use CSS inset box-shadow to create a vignette effect for critical health?▼

You can use a CSS inset box-shadow to create a vignette effect for critical health by applying it to a fixed, full-screen element that pulses to visually indicate when the player's health is low.

What is the best way to visually signal critical health without adding interactive UI elements?▼

The best way to visually signal critical health without adding interactive UI elements is a full-screen overlay using a pulsing CSS inset box-shadow, which fades in and out to indicate danger while remaining non-interactive.

How do I integrate a low health vignette into an existing React project?▼

To integrate a low health vignette into an existing React project, you add the overlay component to render the red vignette when health is low, requiring minimal code changes for simple integration.