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.
Letters bob up and down in sequence, creating a wave running through the word.
Use for
Playful headings, loaders
Add a "Wavy Text" effect (also called text wave) to [where].
The letters should bob up and down one after another so a gentle, smooth wave keeps running through the word.
Loop it seamlessly, keep it read as one word by screen readers, and stop the wave for users who prefer reduced motion.
Also called Repeated Text Scroll
A word is duplicated into many stacked copies that shift with scroll.
Add a "Text Repetition" effect (also called repeated text scroll) to [where].
A word should be copied into a stack of fainter outline copies that spread out from behind it as the user scrolls, and fold back together when scrolling up.
Tie the spread directly to the scroll position, and hide the extra copies from screen readers so the word is read only once.
ABCDEF
Move your pointer here
Also called Perspective Text Tilt
Text rotates in 3D perspective following the mouse position.
Add a "Text Tilt" effect (also called perspective text tilt) to [where].
The text should tilt gently in 3D toward the pointer as it moves, following it smoothly, and ease back flat when the pointer leaves.
Keep the tilt subtle so the text stays readable, and leave the text flat on touch devices and for users who prefer reduced motion.