Agent-Skills.md

Agent Skills: Low Health

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

UncategorizedID: verekia/r3f-gamedev/low-health

Repository

verekia/r3f-gamedev
verekiaLicense: MIT
29

Install this agent skill to your local

pnpm dlx add-skill https://github.com/verekia/r3f-gamedev/tree/HEAD/skills/low-health

Skill Files

Browse the full folder contents for low-health.

Download Skill

Loading file tree…

skills/low-health/SKILL.md

Skill Metadata

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

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

<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.