Background & Ambient

A glowing pulse travels along a line connecting two elements.

Add an "Animated Beam" effect (also called a connecting beam) to [where].
A short glowing pulse should travel along the line that connects two elements, moving steadily from one end to the other and then starting again: smooth and calm.
Keep the connecting line itself visible at all times, and hold the pulse still for users who prefer reduced motion.

Colors in a gradient background slowly shift, pan or rotate.

Add an "Animated Gradient" background (also called a gradient animation or moving gradient) to [where].
The colors of the gradient should slowly pan across the area in a soft, continuous drift, with no visible jump when the loop restarts.
Keep text on top readable against every color, and stop the movement for users who prefer reduced motion.

A grid of lines or squares whose cells fade or flicker on and off.

Add an "Animated Grid Pattern" background (also called a flickering grid or grid background) to [where].
A faint grid of lines should stay in place while a few scattered cells slowly fade in and out at different times: quiet and subtle, never all at once.
Keep it behind the content without catching clicks, and stop the flicker for users who prefer reduced motion.

Soft blurred bands of color drift like an aurora behind content.

Add an "Aurora Background" (also called a northern lights gradient) to [where].
Soft, blurry bands of color should drift and sway slowly behind the content, overlapping and blending like northern lights: very slow and dreamy.
Keep the text on top readable, avoid re-blurring the bands on every frame so it stays smooth, and stop the drift for users who prefer reduced motion.

Thin glowing lines travel along paths, sometimes exploding when they hit a surface.

Add a "Background Beams" effect (also called light beams or background lines) to [where].
Faint curved paths should sit in the background while short glowing streaks travel along them one after another, at a calm, steady pace.
Stagger the beams so they never move in lockstep, keep them behind the content, and stop them for users who prefer reduced motion.

A skewed grid of tiles lights up in color as the pointer passes over them.

Add a "Background Boxes" effect (also called a tile hover background) to [where].
Fill the area with a skewed grid of tiles; each tile the pointer passes over should light up instantly and then fade back slowly, leaving a short trail.
Keep the tiles behind the content so they don't block clicks on it, and on touch devices light the tapped tile instead.

A bright highlight travels around the border of a card.

Add a "Border Beam" effect (also called a shine border or moving border) to [where].
A short bright highlight should travel around the card's border at an even, unhurried pace, looping without a visible jump.
Keep the card's content and size unchanged by the effect, and stop the beam for users who prefer reduced motion.

A grid of dots pulses or glows in waves.

Add a "Dot Pattern Glow" background (also called a dotted glow background or dot grid) to [where].
A fine grid of dots should stay still while a soft band of glow sweeps slowly across it, lighting the dots it passes: calm and subtle.
Keep the dots faint enough that content on top stays readable, and stop the glow for users who prefer reduced motion.

A glowing lamp line widens and casts a cone of light onto a heading beneath it.

Add a "Lamp Effect" (also called a lamp glow) to [where].
When the section comes into view, a thin glowing line should widen from the center and cast a soft cone of light down onto the heading below, which fades up into place: slow and smooth.
Play it only once, and for users who prefer reduced motion show the lit heading straight away.

Soft beams of light sway across the background.

Add a "Light Rays" background (also called god rays or light shafts) to [where].
Several soft, semi-transparent beams should fan out from the top and sway gently back and forth, brightening and dimming a little: slow and atmospheric.
Keep the rays behind the content and faint enough not to hurt readability, and stop them for users who prefer reduced motion.

Several color points blend smoothly and drift, forming an organic, multi-hue backdrop.

Add a "Mesh Gradient" background (also called an animated mesh gradient) to [where].
Several soft color spots should blend into one another and drift slowly around the area, so the backdrop keeps shifting in an organic way: very slow and smooth.
Keep content on top readable over every blend, and stop the drift for users who prefer reduced motion.

Diagonal streaks with glowing tails fall across a card or section.

Add a "Meteors" effect (also called a meteor shower or shooting stars) to [where].
A handful of small streaks with fading tails should shoot diagonally across the area at random moments, each one quick and then gone.
Keep them few so it stays an accent, clip them to the area's edges, and stop them for users who prefer reduced motion.

A fine speckled texture overlays the page, sometimes flickering like film grain.

Add a "Noise / Grain Texture" overlay (also called film grain or a noise background) to [where].
A fine, faint speckled texture should sit over the surface and flicker in small jumps like film grain: subtle, never strong enough to muddy the content.
Let clicks pass through the overlay, generate the texture once instead of every frame, and keep it still for users who prefer reduced motion.

Many small dots drift, connect or react to the pointer across the background.

Add a "Particles" background (also called floating particles or a particle field) to [where].
Small dots of different sizes should float and drift slowly in gentle, wandering paths, each at its own pace: calm and airy.
Keep the number of dots modest so it stays light on slower devices, pause it when it is off screen, and stop it for users who prefer reduced motion.

Blur strength ramps gradually toward an edge so content fades out softly.

Add a "Progressive Blur" edge (also called a gradient blur edge) to [where].
Content scrolling toward the edge should get gradually blurrier and softer, ramping smoothly instead of cutting off at a hard line.
Show the blur only at an edge that still has more content beyond it, and keep the blurred area from blocking clicks or scrolling.

A tilted perspective grid scrolls toward the viewer like a synthwave floor.

Add a "Retro Grid" background (also called a perspective grid or synthwave grid) to [where].
A grid floor tilted away in perspective should scroll steadily toward the viewer and fade out into the horizon: smooth and endless.
Make the loop seamless so the lines never jump, and stop the scrolling for users who prefer reduced motion.

Concentric circles expand outward from a center point and fade.

Add a "Ripple Rings" effect (also called a background ripple or concentric ripples) to [where].
Rings should keep expanding outward from a center point and fade as they grow, evenly spaced one after another: slow and steady.
Keep the center element still and in place, and stop the ripples for users who prefer reduced motion.

Small bright specks flicker in and out around text or a section.

Add a "Sparkles" effect (also called glitter or twinkle particles) to [where].
Small star-shaped specks should pop in, twinkle and fade out around the text at scattered spots and random moments: light and quick.
Keep the sparkles decorative and hidden from screen readers, never cover the text itself, and stop them for users who prefer reduced motion.

A soft cone or pool of light sweeps into place and lights part of the background.

Add a "Spotlight" effect (also called a spotlight sweep or light cone) to [where].
When the page loads, a soft cone of light should sweep in from the corner at an angle and settle over the heading, brightening as it arrives: slow and smooth.
Play it only once, and for users who prefer reduced motion show the light already in place.

Tiny stars twinkle or drift across a dark space-like backdrop.

Add a "Starfield" background (also called a stars background or twinkling stars) to [where].
Tiny stars of different sizes should twinkle softly at their own pace while the whole field drifts very slowly: quiet and calm.
Keep the number of stars modest so it stays light, and stop the twinkling and drift for users who prefer reduced motion.

Particles spiral around a center like a whirlpool.

Add a "Vortex" background (also called swirling particles) to [where].
Small particles should spiral inward around a center point like a whirlpool, fading in at the edge and fading out as they reach the middle, in a smooth, continuous swirl.
Keep the particle count modest, pause it when off screen, and stop the swirl for users who prefer reduced motion.

Layered wavy lines or shapes undulate horizontally.

Add a "Wave Background" (also called a wavy background or animated waves) to [where].
A few layered wave shapes should roll sideways at slightly different speeds so they overlap and shift like water: slow and smooth.
Make each wave loop seamlessly without a visible jump, and stop the waves for users who prefer reduced motion.