react-doctor/no-large-animated-blur
Keep blur radius under 10px, or apply blur to a smaller element. Large blurs multiply GPU memory usage with layer size
- Category: Performance
- Severity: warn
- Source:
oxlint-plugin-react-doctor - Framework: global
- Enabled when: always
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Confirm a style, animate, whileHover, initial, exit (etc.) attribute contains filter, backdropFilter, or WebkitBackdropFilter with a string literal blur(Npx) where N exceeds 10. The check uses the regex blur\((\d+(?:\.\d+)?)px\) — dynamic values built from template literals or variables are not inspected.
Fix prompt
Use this once validation confirms the diagnostic is real.
Reduce the blur radius below 10px, shrink the blurred element (cost scales with layer area × radius), or pre-blur the source as a static image / SVG feGaussianBlur rendered once. For frosted-glass effects, apply backdrop-filter to a small overlay rather than a full-viewport pane. See https://web.dev/articles/animations-guide#expensive_filters