Text

Text filled with a gradient whose colours continuously shift or flow.

Add an "Animated Gradient Text" effect (also called aurora text or a rainbow text sweep) to [where].
The letters should be filled with a gradient whose colors flow slowly and smoothly across the text in an endless, seamless loop.
Keep the text readable against its background at every moment, and hold the colors still for users who prefer reduced motion.

Text jitters with sliced offsets and red/cyan colour splits like a broken signal.

Add a "Glitch Text" hover effect (also called text glitch or RGB split glitch) to [where].
While the pointer is over the text, it should jitter in quick, snappy bursts: thin horizontal slices jump sideways and two colored copies split apart like a broken signal, then settle back when the pointer leaves.
Keep the real text in the document only once so screen readers don't read the copies, and show the same effect on keyboard focus.

Text shows shifting rainbow foil reflections that move with pointer or time.

Add a "Holographic Text" hover effect (also called holographic foil text) to [where].
While the pointer is over the text, a band of foil-like colors should glide slowly and smoothly back and forth across the letters, and the text should return to its plain look when the pointer leaves.
Keep the letters readable at every point of the shimmer, and show the same effect on keyboard focus.

Text scales, moves, or rotates as a moving graphic element rather than static copy.

Add "Kinetic Typography" (also called kinetic text) to [where].
Rows of large repeated text should slide sideways in alternating directions at a slow, steady pace, turning the words into a moving graphic.
Make each row loop seamlessly without a visible jump, let screen readers read the text only once, and stop the motion 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.

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.

Green characters fall in columns like the Matrix code rain.

Add a "Matrix Text" effect (also called digital rain text) to [where].
Columns of characters should fall steadily at slightly different speeds, each with a bright leading character and a tail that fades out behind it.
Treat it as decoration hidden from screen readers, keep it lightweight, and stop it for users who prefer reduced motion.

Letters drip and stretch downward as if melting.

Add a "Melting Text" effect to [where].
The letters should slowly sag downward while drips stretch out below them, as if they are melting, and come to rest in a still, melted look.
Play it once when the text comes into view, keep the word readable at the end, and skip the motion for users who prefer reduced motion.

One word blurs and blends into the next in the same spot.

Add a "Morphing Text" effect (also called text morph) to [where].
One word should blur and melt into the next in the same spot with a soft, gooey merge, then hold still for a moment before the next change.
Cycle through the words seamlessly, let screen readers read the words as plain text, and stop cycling for users who prefer reduced motion.

Text glows like a neon tube and flickers or pulses.

Add a "Neon Glow Text" effect (also called a neon sign flicker or glowing text) to [where].
The text should glow like a neon tube with a soft, steady light, and now and then flicker off briefly like a real sign.
Keep the flicker occasional rather than rapid, since fast flashing can harm some users, and keep the glow steady for users who prefer reduced motion.

Letters of a title shuffle or move sequentially as the user scrolls through sections.

Add "Scrolling Letters" (also called on-scroll letter animations) to [where].
As the user scrolls through the sections, the letters of the title should roll to their next characters one after another from left to right, tied directly to the scroll position.
Scrolling back up should roll them back, and screen readers should get the current title as plain text.

A bright highlight sweeps repeatedly across the letters.

Add a "Shimmer Text" effect (also called animated shiny text or metallic shimmer text) to [where].
A band of light should sweep smoothly across the letters from left to right, then repeat after a short pause.
Keep the text readable under the highlight, and keep it still for users who prefer reduced motion.

A heading is cut into horizontal slices that shift sideways against each other as the page scrolls.

Add a "Sliced Text" effect (also called on-scroll sliced text) to [where].
A large heading should be cut into horizontal slices that slide sideways against each other as the user scrolls, lined up into the whole word at the start.
Tie the shift directly to the scroll position so scrolling back reverses it, and keep the heading as one readable text for screen readers.

Text is set around a circle that rotates continuously.

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.

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.

Characters flip like an airport departure board until they land on the target letter.

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.

Letter edges wiggle as if hand-drawn using an SVG displacement filter.

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.

Text stays pinned while lines fade in and out with scroll progress.

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.

Letter outlines are drawn as a stroke before the fill appears.

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.

Letters or words rotate around an axis in 3D to show the next text on their back side.

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.

Text warps and ripples organically, driven by scrolling or pointer movement.

Add a "Text Distortion" effect (also called organic text distortion) to [where].
A row of text should flow sideways endlessly and warp and ripple organically as it moves, as if seen through moving water, with the flow driven by the user's scrolling.
Keep the distortion light enough that the text stays legible, keep it smooth on slower devices, and turn it off for users who prefer reduced motion.

Words fade in sequentially on page load, often with a blur clearing, as if being generated.

Add a "Text Generate" effect to [where].
The words should fade in one after another while a soft blur clears from each, as if the text is being generated: steady and calm.
Play it once on load, let screen readers read the full text right away, and show it without motion for users who prefer reduced motion.

A marker-style colour band draws across a phrase to emphasise it.

Add a "Text Highlighter" effect (also called highlight marker or marker underline) to [where].
A marker-style color band should sweep smoothly behind the key phrase from left to right, like someone highlighting it with a pen.
Play it once when the phrase scrolls into view, keep the text readable on top of the band, and let the band follow the phrase correctly when it wraps onto two lines.

An outlined word gets filled or lit by a gradient that follows the pointer or sweeps across.

Add a "Text Hover Effect" (also called text fill on hover or gradient outline text hover) to [where].
The word should start as an outline, and while the pointer is over it a solid fill should sweep in smoothly from left to right, then draw back out when the pointer leaves.
Keep the outlined word readable before the fill, and show the same effect on keyboard focus.

Text follows a curved path and travels along it as the user scrolls.

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.

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.

Existing text is animated out and replaced with new text content.

Add a "Text Replacement" effect (also called text swap) to [where].
When the text changes, the old characters should slide up and out while the new ones slide in from below, one character after another in a quick, smooth ripple.
Keep the text box from jumping in size during the swap, and announce only the new text to screen readers.

Words of a paragraph go from dim to full opacity as the user scrolls.

Add a "Text Reveal" effect (also called scroll text reveal or word-by-word reveal) to [where].
The paragraph should start dim, and as the user scrolls each word should brighten to full strength one after another, tied to the scroll position.
Scrolling back up should dim the words again, and the whole paragraph should stay available to screen readers whatever its dimming.

Moving the pointer across a card uncovers hidden text underneath a mask edge or spotlight.

Add a "Text Reveal Card" effect (also called spotlight text reveal) to [where].
As the pointer moves across the card, a vertical edge should follow it closely and uncover hidden text on one side, smooth and direct with no lag.
On touch devices, where there is no pointer to follow, let a drag or tap reveal the hidden text, and make the hidden text available to screen readers.

Text is replaced by random characters that refresh and gradually resolve into the final word.

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.

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.

Characters appear one at a time as if typed, usually followed by a blinking caret.

Add a "Typewriter" effect (also called typing animation or typing text) to [where].
The characters should appear one at a time at a steady typing pace, with a caret right after the last typed character that blinks a few times once typing is done.
Play it once rather than looping, let screen readers read the full text right away, and show the full text for users who prefer reduced motion.

An underline grows from one side or the centre under a link on hover.

Add an "Underline Draw" hover effect (also called animated underline or hover underline animation) to [where].
When the pointer is over the link, an underline should grow smoothly from left to right under the text, and shrink back when the pointer leaves: quick and subtle.
Keep the underline from shifting the surrounding layout, and show the same effect on keyboard focus.

Letters smoothly get bolder or lighter (or change width/slant) via variable-font axes.

Add a "Variable Font Weight Animation" hover effect (also called font weight shift) to [where].
While the pointer is over the text, the letters should grow bolder one after another in a smooth wave from left to right, and thin out again when the pointer leaves.
Use a variable font so the weight changes smoothly instead of jumping, keep the heading from pushing nearby content around as it widens, and show the same effect on keyboard focus.

Big letters act as a window showing a playing video inside them.

Add a "Video Text" effect (also called text video mask) to [where].
Big, bold letters should act as a window onto a playing video, so the moving footage shows only inside the letter shapes.
Keep the video muted and looping without controls, provide the words as real text for screen readers, and show a still frame 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.

One word in a sentence is swapped for the next word in a list with a slide, flip or fade.

Add a "Word Rotate" effect (also called rotating words or flip words) to [where].
One word in the line should slide up and out while the next word from a list slides in from below, pausing on each word before the next change.
Keep the rest of the line from jumping when the words have different widths, don't make screen readers announce every change, and stop rotating for users who prefer reduced motion.