PainVignette - Red edge vignette overlay for pain visualization
Renders a fullscreen overlay with red vignette effect that intensifies
as pain increases. Only visible when pain is 5 or higher. Optimized
for 60fps with CSS transitions.
Accessibility:
Purely visual, decorative-only overlay
Hidden from assistive technologies via aria-hidden="true"
Does not announce pain levels; use a separate mechanism if announcements are required
Example
<PainVignettepain={65}isMobile={false}/> // No render if pain < 5 <PainVignettepain={2}isMobile={false}/>
PainVignette - Red edge vignette overlay for pain visualization
Renders a fullscreen overlay with red vignette effect that intensifies as pain increases. Only visible when pain is 5 or higher. Optimized for 60fps with CSS transitions.
Accessibility:
Example