Letter Scatter

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.

Colorful paper pieces burst out and fall to celebrate a success.

Add a "Confetti" celebration (also called a confetti burst) to [where].
Small colorful paper pieces should burst quickly out of the button, then tumble and drift down as they fade away, in a short, lively shower.
Fire it once per success rather than looping, keep it from blocking clicks on the page, and skip it for users who prefer reduced motion.

Letters start widely spaced and faded, then tighten into normal spacing while appearing.

Add a "Tracking In" text animation (also called text tracking in or letter-spacing in) to [where].
The letters should start widely spaced and faint, then draw together to normal spacing while becoming fully visible: smooth, slowing down at the end.
Keep the text centered and on one line while the spacing changes so the surrounding layout doesn't shift, and show it at normal spacing when the user prefers reduced motion (prefers-reduced-motion).

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.

Text slides up from behind a clipping line so it looks like it emerges from nowhere.

Add a "Mask Reveal" text entrance (also called line mask reveal or text masking) to [where].
Each line should slide up from behind an invisible edge so it seems to emerge from nowhere, one line after another, quick and smooth without bounce.
Play it once when the text scrolls into view, and show the text right away without motion for users who prefer reduced motion.