react-doctor/no-large-animated-blur

Review blur animation above 10px when the affected area, frequency, and target devices make paint or compositing cost material

Validation prompt

Confirm the detector match and collect the required evidence before deciding whether an edit is warranted.

There are two detector branches. The JSX branch inspects any statically resolved object passed to an attribute named animate, initial, exit, whileHover, whileTap, whileFocus, whileDrag, or whileInView; it does not prove that the element is a Motion component. It reports filter, backdropFilter, or WebkitBackdropFilter string literals containing blur(Npx) above 10px. The Web Animations branch inspects static keyframes passed to a proven DOM element.animate(...) receiver. Dynamic values are missed. Confirm the blur is actually interpolated, affects a material area, and is repeated or costly on target devices; an isolated initial value does not by itself prove animation. Suppress a small bounded one-shot effect, a static or pre-blurred asset, or a case whose production trace shows no material paint/compositing cost.

Evidence boundary

The diagnostic proves only that the detector’s modeled source pattern matched. It does not prove runtime impact, product intent, rendered failure, or that one remediation is correct.

Establish the environment, repository policy, exceptions, and required rendered or runtime evidence before deciding the occurrence.

Record one outcome:

• Confirmed failure: The required evidence establishes the violation.
• Rejected: A documented exception or false-positive predicate applies.
• Needs evidence: Named evidence can still be collected.
• Unavailable: Required evidence cannot be collected in this run.
• Waived with evidence: An authorized, scoped exception applies to an established failure.
• Observation: The review records an optional tradeoff without claiming a defect.

A waiver records its scope, authority, evidence, and review condition. It is not a pass or false positive.

Default severity is registry metadata. Use the occurrence’s JSON severity after repository configuration when ordering real findings.

Fix prompt

Apply this candidate correction only after the required evidence confirms the risk.

Trace the rendered interaction first. If blur is a material bottleneck, reduce its radius, affected area, duration, or repetition while preserving the visual hierarchy. Use opacity or transform only when it communicates the same state, and pre-render a raster only when the blurred result is genuinely static. For backdrop effects, scope the overlay to the smallest required region. Do not claim that an SVG filter, GPU layer, or pre-blurred asset is universally free; re-profile the same production interaction and target device after the change. See https://web.dev/articles/animations-guide#expensive_filters

Repository-wide copy prompt

Use this repository-wide prompt only after validating each occurrence. For one occurrence, use the guidance above.