Text Animations

Cycling through phrases

The headline says several things in turn.

Text Morphing

Phrases should melt into one another. The blur crossfade reads as one continuous headline rather than a swap.

Text Cycle

The swap should stay legible. Per-character blur stagger, so the reader tracks each new word landing.

Text Word Flip

You want the rotation to feel deliberate. Spring flips land with weight, so use fewer phrases than you would with Cycle.

Entrance

Plays once as the text arrives.

Text Blur Reveal

The neutral default. Scroll-triggered, and the only one here that works on body copy as well as headlines.

Text Char Slide

You want direction. Characters cascade in from the left, leading the eye along the line.

Text Chroma Reveal

The headline is the hero and can carry colour. A chromatic ribbon paints it into view.

Text Motion

None of the above fit. You supply your own Framer Motion variants, split by word, character, or line.

Always running

Loops for as long as it is on screen.

Text Shimmer

The safest of this group. One element, CSS only, subtle enough to sit near body copy without competing.

Text Spectrum

You want colour movement without positional motion. CSS-only drift, so it survives long exposure.

Text Ripple

A crest should travel through the letters. GPU-light, though constant motion beside paragraphs gets tiring.

Text Path

The text has to follow a curve, whether wave, arc, or circle. As much a layout tool as an animation.

On interaction

Text Flip

The headline is meant to be touched. A 3D per-character flip on hover, so it does nothing on mobile.

Marking up text you already have

Text Highlight

Emphasising a phrase inside a paragraph. The marker band tracks line wrapping, so it survives reflow.

Text Scribble

The annotation should look hand-made: underline, strike, or scribble that draws itself on.

Statement pieces

One per page, at most.

Canvas Text

The headline is the page. Particles resolve from a loading ring into letterforms, and it is the heaviest thing here.

Line Fill Text

The letterforms themselves should be the canvas. Alpha ribbons cascade inside the glyphs.

Text Glitch

The brand is aggressive and the glitch is the point. CSS only and cheap, though it dates faster than the rest.