Border Beam

A gradient border animates around the element and expands when the pointer is over it.

Add a "Hover Border Gradient" effect to [where].
A short gradient highlight should rest on one part of the border; while the pointer is over the element it should travel steadily around the border as the whole border brightens with a soft glow.
Animate the border only while hovered, and keep it still for users who prefer reduced motion.

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.

A diagonal band of light sweeps across the element from one side to the other on hover.

Add a "Shine Sweep" hover effect (also called sheen, shiny button, shine on hover, glint, shimmer or shimmer button) to [where].
A soft diagonal band of light should sweep across the element from left to right, repeating with a short pause while the pointer stays over it.
Keep the band clipped inside the element, stop it when the pointer leaves, and don't run it 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.