Menu
Display a React Three Fiber pulsing red vignette overlay when the player's health is low.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Use React Three Fiber camera shake when a player takes damage or on impacts for visual feedback.
Display React Three Fiber floating damage numbers that animate upward and fade out, with support for critical hits.
Display React Three Fiber health bars above characters using Drei Html and CSS styling.
Make React Three Fiber enemies flash white and rock back and forth when receiving damage.
Poll for React Three Fiber value changes and trigger React re-renders when needed.
Animate React Three Fiber values smoothly using exponential decay instead of linear interpolation.
| name | r3f-low-health |
| description | Display a React Three Fiber pulsing red vignette overlay when the player's health is low. |
Display a pulsing red vignette overlay when the player's health is low.
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.
inset-0 to cover the entire screenpointer-events-none to allow clicking through the overlayinset 0 0 160px 40px redanimate-[low-health-opacity_0.5s_ease-in-out_infinite_alternate]<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.