Aurora Background
Also called Northern lights gradient
Soft blurred bands of color drift like an aurora behind content.
Use for
Hero sections
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
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.Similar motions
Mesh Gradient
Also called Animated mesh gradient
Several color points blend smoothly and drift, forming an organic, multi-hue backdrop.
Use for
Landing page backgrounds
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.Animated Gradient
Also called Gradient animation, Moving gradient, Background gradient animation
Colors in a gradient background slowly shift, pan or rotate.
Use for
Hero backgrounds, buttons
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.Light Rays
Also called God rays, Light shafts
Soft beams of light sway across the background.
Use for
Atmospheric headers
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.Wave Background
Also called Wavy background, Animated waves
Layered wavy lines or shapes undulate horizontally.
Use for
Section dividers, hero footers
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.More in Background & Ambient
Background Beams
Also called Light beams, Beam collision, Animated Path Lines, Background Lines, Wave Path Lines
Thin glowing lines travel along paths, sometimes exploding when they hit a surface.
Use for
Hero backgrounds
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.Hover to play
Background Boxes
Also called Tile hover background
A skewed grid of tiles lights up in color as the pointer passes over them.
Use for
Hero backgrounds
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
Border Beam
Also called Shine border, Animated border, Glowing effect, Moving Border
A bright highlight travels around the border of a card.
Use for
Featured cards, CTAs
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.