low-health
Display a pulsing red vignette overlay when the player's health is low.
Install
npx skillscat add verekia/r3f-gamedev/low-health Install via the SkillsCat registry.
We need to produce a 2-3 sentence plain-text summary, objective, factual, no marketing language, no superlatives, no calls to action, natural prose, no bullet points, no headings, no markdown formatting. At most 60 words. Must be only the summary text, no quotes. So produce something like: "The skill adds a pulsing red vignette overlay that appears when a player's health drops below a threshold, providing visual feedback of low health.
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-0to cover the entire screen pointer-events-noneto 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
<div
className="pointer-events-none fixed inset-0 animate-[low-health-opacity_0.5s_ease-in-out_infinite_alternate]"
style={{ boxShadow: 'inset 0 0 160px 40px red' }}
/>This skill is part of verekia's **r3f-gamedev**.
Categories
Install
npx skillscat add verekia/r3f-gamedev/low-health Install via the SkillsCat registry.