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
Variants
- per character flip
- word board
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 "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.Similar motions
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer
Also called Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
Each digit rolls vertically to the new value when a number changes.
Use for
Live counters, pricing
Add an "Odometer" number animation (also called rolling numbers or slot-machine digits) to [where].
When the value changes, each digit should roll vertically to its new digit, always rolling forward, with a slight stagger across digits and a small settle at the end.
Keep every digit the same width so the number does not shift, and expose only the final value to screen readers.A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
Hover to play
Text Scramble
Also called ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
Text is replaced by random characters that refresh and gradually resolve into the final word.
Use for
Tech hero titles, link hover
Add a "Text Scramble" hover effect (also called text decode or encrypted text) to [where].
When the pointer moves over the text, each letter should flicker rapidly through random characters and settle on its real letter, resolving one after another from left to right.
Keep the text width from jumping while it scrambles, keep screen readers on the real text, and show the same effect on keyboard focus.AGBHCIDJEKFL
Hover to play
Text 3D Flip
Also called 3D Flip Text Reveal
Letters or words rotate around an axis in 3D to show the next text on their back side.
Use for
Hover links, headings
Add a "Text 3D Flip" hover effect (also called 3D flip text reveal) to [where].
When the pointer is over the text, each letter should roll over on its horizontal axis in 3D to show a new letter on its other side, one after another in a quick, smooth sweep, and roll back when the pointer leaves.
Keep the text box the same size during the flip, and show the same effect on keyboard focus.- %
Number Ticker
Also called Count Up, Animated Counter, Number Counter, countUp
A number counts from a start value to a target value when it becomes visible.
Use for
Stats, KPI blocks
Add a "Number Ticker" (also called count up or an animated counter) to [where].
When the number comes into view, it should count up from zero to its target, fast at first and slowing gently as it lands.
Use fixed-width digits so nothing around it jitters, count only once, and give screen readers and users who prefer reduced motion the final value right away.More in Text
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.ABC DEFGHI JKLMNO PQR
Scroll inside
Sticky Text Fade
Also called Sticky Scroll Text Opacity Fade
Text stays pinned while lines fade in and out with scroll progress.
Use for
Scrollytelling
Add a "Sticky Text Fade" effect (also called sticky scroll text opacity fade) to [where].
While the section scrolls, the text block should stay pinned in place and its lines should fade in and out one at a time with the scroll progress.
Tie the fades directly to the scroll position so scrolling back reverses them, and keep every line available to screen readers whatever its opacity.Stroke Text Draw
Also called Draw In Text, Animated Stroke Text
Letter outlines are drawn as a stroke before the fill appears.
Use for
Logos, hero words
Add a "Stroke Text Draw" effect (also called draw in text or animated stroke text) to [where].
The letter outlines should draw themselves in smoothly, and once the outlines are complete the fill should fade in.
Play it once on load, keep the word accessible as real text, and show the filled text straight away for users who prefer reduced motion.