Ripple Rings
Also called Background ripple, Concentric ripples
Concentric circles expand outward from a center point and fade.
Use for
Hero centerpieces, audio or pairing visuals
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 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.Similar motions
A
Ping
Also called Radar Ping, Ripple Ping, Ping (Radar Pulse), Pulse ring, Notification ping, Pulsating Button
A copy of the element scales up and fades out repeatedly like a radar ripple.
Use for
Notification dots, live status
Add a "Ping" effect (also called a radar ping or pulse ring) to [where].
A copy of the element should grow outward and fade away, again and again at a steady pace, while the element itself stays still.
Draw the ring as a separate layer so it never changes the layout, and stop the loop for users who prefer reduced motion.Click to play
Ripple
Also called Material ripple, Touch ripple, Ripple Button, Ink ripple
A circular wave expands and fades from the exact point of the click or tap.
Use for
Buttons, list items
Add a "Ripple" effect (also called a material ripple or ink ripple) to [where].
On each click or tap, a soft circular wave should spread out from the exact point that was pressed until it covers the element, fading as it grows: quick and light.
Clip the wave to the element's shape, let rapid presses each start their own ripple, and start it from the center for keyboard presses.A
Hover to play
Concentric border rings expand outward or contract inward from the element on hover.
Use for
Buttons
Add a "Border Ripple" hover effect to [where].
When the pointer enters, a couple of border rings should spread outward from the element one after another and fade away: quick and light, like a ripple.
Play it once per hover rather than looping, and don't let the rings shift the surrounding layout.More in Background & Ambient
ABC
Sparkles
Also called Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
Small bright specks flicker in and out around text or a section.
Use for
Headlines, premium accents
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.Spotlight
Also called Spotlight sweep, Light cone
A soft cone or pool of light sweeps into place and lights part of the background.
Use for
Hero headings
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.Starfield
Also called Stars background, Twinkling stars
Tiny stars twinkle or drift across a dark space-like backdrop.
Use for
Space or night themed heroes
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.