Orbiting Circles
Also called Orbit Animation, Orbit, Orbiting icons
Small circles or icons revolve around a centre on circular paths.
Use for
Integration diagrams
Variants
- single ring
- multiple rings
- reverse direction
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 "Orbiting Circles" (also called an orbit animation or orbiting icons) to [where].
Small circles should revolve slowly and steadily around a central element on circular rings, with the outer ring turning the other way and more slowly.
Keep the loop seamless and the orbiting items upright, and stop the rotation for users who prefer reduced motion.Similar motions
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.ABCDEFGHIJKLMNOP
Spinning Text
Also called Circular Text, Text on Circle
Text is set around a circle that rotates continuously.
Use for
Rotating badges, stamps
Add "Spinning Text" (also called circular text or text on circle) to [where].
Letters should be spaced evenly around a circle that turns slowly and steadily, with no jump when the loop restarts.
Give screen readers the text once as plain text, and stop the rotation for users who prefer reduced motion.Vortex
Also called Swirling particles
Particles spiral around a center like a whirlpool.
Use for
Dramatic hero backgrounds
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.3D Globe
Also called Interactive globe
A rotating 3D Earth with markers or arcs sits in the layout.
Use for
Global reach visuals
Add a "3D Globe" (also called an interactive globe) to [where].
A globe with a few markers on its surface should turn slowly and steadily around its axis, with the markers going round with it: calm and continuous.
Keep it decorative with a text alternative for the information it shows, pause it when off screen, and stop the rotation for users who prefer reduced motion.More in SVG & Shape
Shape Morph
Also called Path Morphing, SVG Morph, MorphSVG, Shape Tweening
One vector shape smoothly turns into another shape.
Use for
Icon states, hero graphics
Add a "Shape Morph" (also called path morphing or SVG morph) to [where].
One shape should smoothly turn into another, for example a pentagon pinching into a star, with its points gliding into place at an even, unhurried pace.
Give both shapes the same number of matching points so the morph stays clean without flicker, and play it once per state change rather than looping.ABC
ABC
Hover to play
SVG Displacement Distortion
Also called feTurbulence Distortion, Displacement Map Effect
An SVG filter warps text or shapes with animated noise.
Use for
Liquid or ripple hover
Add an "SVG Displacement Distortion" hover effect (also called a displacement map effect) to [where].
While the pointer is over it, the text or shape should ripple and wobble as if seen through moving water, fading in softly, and return to crisp when the pointer leaves.
Apply the distortion filter only while the effect is active so it costs nothing at rest, and show the same effect on keyboard focus.A
Hover to play
SVG Mask Reveal
Also called SVG Mask Effect, Clip-path Reveal, Spotlight Mask
A masked shape wipes or follows the pointer to uncover content beneath.
Use for
Image and content reveals
Add an "SVG Mask Reveal" hover effect (also called a clip-path reveal or spotlight mask) to [where].
While the pointer is over it, a circular mask should grow from the center and uncover the content underneath, then close again when the pointer leaves: smooth and fairly quick.
Keep both layers exactly the same size so nothing shifts, and show the same reveal on keyboard focus and tap.