Ambient motion works by not being noticed
Everything in this category is designed to be felt rather than watched. A hero section with a slowly panning gradient feels alive; the same section with a fast, obvious animation feels distracting. The tuning rule is simple: if a visitor's eye is drawn to your background animation, it's too fast or too high-contrast.
Long durations are the key. Six to fifteen seconds per cycle is normal here, compared with the 150–600ms of interface feedback. Vary durations slightly between elements too — identical timings cause everything to sync up into an obvious pulse, while slightly different ones produce organic, non-repeating motion.
How the effects are built
The gradient pan animates background-position across a background sized at 300%, which is compositor-friendly — animating the gradient's colour definition would force a repaint every frame.
The aurora blob morphs the two-value border-radius syntax between several states, producing organic lava-lamp shapes no fixed shape could achieve. Add a large filter: blur() and it becomes the soft coloured glow used behind hero content on this site.
The pulse ring expands a pseudo-element outward while fading it — the standard radar-ping used for live indicators and active avatars.
Performance on real devices
Ambient animations run continuously, so they're the ones most likely to affect battery life and thermals on phones and laptops. Two practical limits: keep the number of simultaneously animating elements small — three or four is plenty — and be careful with large blurred elements, since blur is one of the more expensive filters, especially at full-viewport size.
Because these loop indefinitely, honouring prefers-reduced-motion matters more here than anywhere else. Continuous background motion is a common trigger for people with vestibular sensitivity, and a static gradient is a perfectly good fallback.
Keeping content readable
Animated backgrounds change the contrast behind your text as they move. Check the text against the lightest and darkest states the background passes through — not just the frame you happen to be looking at — using our contrast checker. If either extreme fails, add a semi-transparent scrim between the animation and the text.