Spinning Text
Also called Circular Text, Text on Circle
Text is set around a circle that rotates continuously.
Use for
Rotating badges, stamps
Variants
- clockwise
- counter-clockwise
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 "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.Similar motions
Spin
Also called Rotate Loop, Spinner
The element rotates continuously at constant speed.
Use for
Loading spinners
Add a "Spin" effect (also called a spinner or rotate loop) to [where].
The element should rotate continuously at a constant, even speed, with no easing between turns.
Make the loop seamless, give the spinner an accessible loading label, and slow or stop it for users who prefer reduced motion.A
Orbiting Circles
Also called Orbit Animation, Orbit, Orbiting icons
Small circles or icons revolve around a centre on circular paths.
Use for
Integration diagrams
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.Scroll inside
Text Path Scroll
Also called Text Path Curve Scroll Animation
Text follows a curved path and travels along it as the user scrolls.
Use for
Storytelling sections
Add a "Text Path Scroll" effect (also called text path curve scroll animation) to [where].
The text should sit on a curved line and glide along it as the user scrolls, moving forward when scrolling down and back when scrolling up.
Tie the movement directly to the scroll position without lag, and keep the text readable as plain text for screen readers.More in Text
ABCDEF
Split Text Stagger
Also called Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
A heading is split into characters, words or lines that animate in one after another with a small delay.
Use for
Headlines, section titles
Add a "Split Text Stagger" entrance (also called letter stagger or staggered text reveal) to [where].
Split the heading into letters that rise and fade in one after another with a short delay between them, quick and smooth without bounce.
Play it once when the heading comes into view, keep it read as one word by screen readers, and show it without motion for users who prefer reduced motion.H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text
Also called Text Flipping Board, Flip Board, Vestaboard display
Characters flip like an airport departure board until they land on the target letter.
Use for
Status boards, retro displays
Add a "Split-Flap Text" effect (also called a text flipping board or flip board) to [where].
Each character tile should flip quickly through the alphabet until it lands on its target letter, with the tiles settling one after another from left to right.
Run it once each time the text appears or changes, announce only the final text to screen readers, and show the final text without flipping for users who prefer reduced motion.ABCDEF
Squiggly Text
Also called Wobbly Text, Turbulence Text
Letter edges wiggle as if hand-drawn using an SVG displacement filter.
Use for
Sketchy or playful headings
Add a "Squiggly Text" effect (also called wobbly text or turbulence text) to [where].
The letter edges should wobble slightly as if hand-drawn and redrawn several times a second: a subtle, jittery boil rather than a smooth wave.
Keep the text readable, and hold it still for users who prefer reduced motion.