Kinetic Typography

A heading is split into characters, words or lines that animate in one after another with a small delay.

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.

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.

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.

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.

Letters fly apart on hover and return, or burst outward on entry.

Add a "Letter Scatter" hover effect (also called scatter gather letters or an explosive letter burst) to [where].
When the pointer moves over the text, each letter should fly a short way out in its own direction with a little spin, then smoothly gather back into the word when the pointer leaves.
Keep the word's space in the layout fixed while the letters move, keep it read as one word by screen readers, and show the same effect on keyboard focus.

A striped or offset shadow behind the letters animates in a direction.

Add a "Line Shadow Text" effect (also called a text shadow animation or dancing shadow) to [where].
Behind the letters, an offset shadow made of thin diagonal stripes should slide slowly and continuously, while the letters themselves stay still and crisp.
Make the stripe movement loop seamlessly, and keep the shadow still for users who prefer reduced motion.

Letters fill with a rising, waving liquid.

Add a "Liquid Fill Text" effect (also called water fill text) to [where].
The outlined letters should fill with liquid whose wavy surface rolls sideways while the level slowly rises and falls, in a soft, continuous loop.
Keep the word available as real text for screen readers, and hold the liquid at a still level for users who prefer reduced motion.