Animated Beam
Also called Connecting beam
A glowing pulse travels along a line connecting two elements.
Use for
Integration or data-flow diagrams
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 "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.Similar motions
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.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.Animated Map Arcs
Also called World Map Animated Lines, Globe Arcs
Lines and dots animate between locations on a map or globe.
Use for
Global reach visuals
Add "Animated Map Arcs" (also called globe arcs) to [where].
Curved lines should draw themselves between locations on a dotted map one after another, then retract toward their destination while a soft ring pulses there: calm and steady.
Stagger the arcs so they never move in unison, keep the loop seamless, and pause it for users who prefer reduced motion.Motion Path
Also called Animate Along Path, Offset Path Animation
An element travels along a custom curved path and can rotate to follow it.
Use for
Plane or dot on route, decorative travellers
Add a "Motion Path" animation (also called animate along path) to [where].
A small element should travel along a custom curved route at a slow, steady pace, turning to face the direction it is moving.
Use a closed route so the loop repeats without a jump, and make the route scale with its container instead of staying at a fixed size.More in Background & Ambient
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.Animated Grid Pattern
Also called Flickering grid, Grid background
A grid of lines or squares whose cells fade or flicker on and off.
Use for
Tech and SaaS heroes
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.Aurora Background
Also called Northern lights gradient
Soft blurred bands of color drift like an aurora behind content.
Use for
Hero sections
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.