React animated background components

Backgrounds are where performance problems hide, because the cost is invisible until you profile. The rule worth memorising is that transform and opacity can be handed to the compositor, while filter, box-shadow, background-position and anything that changes layout cannot. Animating a blur or a shadow on a full-viewport element forces the browser to repaint that entire area every frame, which is how you end up at 12fps on a laptop that renders your app fine otherwise. The animated grids here move dots and stroke offsets rather than repainting large filtered surfaces.

Legibility beats novelty. A background exists so the text on top of it looks intentional, and once the pattern competes with your headline you have a decoration problem, not a design. Two things fix most of it: a radial or linear mask that fades the pattern out behind the text, and a real contrast check on the darkest and lightest points of the animation rather than on a screenshot of one frame. The masked dot backgrounds in this set exist specifically for that, and they are the ones I reach for first.

Respect prefers-reduced-motion. Ambient movement in the periphery of a page is exactly the category of animation that triggers nausea for people with vestibular disorders, and unlike a button hover they cannot escape it by not interacting. Gate the animation behind the media query and ship the static pattern as the fallback, which for most of these is one class change. While you are in there, pause any requestAnimationFrame loop when the tab is hidden, because otherwise you drain battery for a background nobody is looking at.

Watch the byte cost separately from the frame cost. The video background is the honest offender: it will not be your largest contentful paint element if you set a poster, but it competes for bandwidth with the assets that will be. Noise textures are the sneakier one, since a tiled PNG is often smaller than the equivalent SVG turbulence filter but the filter costs GPU time on every resize. If a background sits above the fold, measure it on a throttled connection before you commit to it.