React Text Animation Components

Automatically cycles through a set of words, with the container width adapting to the text.

Per-character or per-word staggered text reveal, with optional blur and viewport triggering.

Reading highlight that turns text from pale grey to solid foreground, character by character (or word by word), as you scroll.

Characters roll and flip vertically on hover, with per-character or per-word splitting, direction control, and controlled mode.

Odometer-style number wheels — when value changes, each digit springs vertically to its new value; added digits fade in and removed digits collapse.

Decryption-style text animation — characters churn through random glyphs and lock in from left to right, triggered by viewport or hover.

A smooth morphing transition between two strings — shared characters slide to their new positions while the rest fade out and in, with auto-rotation and controlled switching.

An infinitely looping marquee that speeds up with scroll velocity and briefly reverses when you scroll back quickly.

A flowing gradient text with a periodic shine sweep on top — pure CSS keyframes, adapting to light and dark themes.

Handwriting animation drawn stroke by stroke with SVG pathLength, with a built-in single-line font and support for custom signature paths.

Scroll-driven 3D cylinder of text — lines are mounted on an invisible drum and rotate into view one after another as you scroll.

The classic typewriter effect — text typed out character by character with a blinking cursor, with looping and deletion across multiple strings.

Outlined text filled by a gradient on hover (x.ai style), with a spotlight that follows the cursor to reveal color.

Characters scale and deform in real time inside the cursor's pressure field (variable fonts) — the closer the cursor, the wider, heavier, and more slanted they get.

Glitch text effect with RGB channel separation and jitter, supporting continuous playback and hover triggering.

Hand-drawn highlighter marks swept across text, with underline, strike-through, box, and circle variants.

Characters arranged around a circle that spins continuously, with hover speed changes, direction reversal, and reduced-motion support.

Text flowing seamlessly along a custom curve, which the pointer can drag and flick with momentum.

Text animation where characters drop under gravity and bounce into place, with configurable gravity, bounce, and trigger.

Text whose glyphs are filled with a playing background video, falling back to a self-contained animated gradient when no video is given.

Vestaboard-style mechanical split-flap character switching, flipping cell by cell into place, with rotation across multiple messages.

Words cycle in and out of focus between blur and sharpness, with an animated frame marking the focal point.

Dimensional heading text with a moving linear shadow.

Turn an image into animatable ASCII or pixel art.

Twinkling sparkles continuously generated around the text, adding a lively touch of magic.

Each grapheme rides a sine wave up and down, with adjustable amplitude, wavelength, and speed, and a hover speed boost

Scrambled characters flicker rapidly and lock into the real text one by one — a hacker-style decryption effect.

Neon-tube text with random micro-flicker and layered glow, in any color you choose.

A whole passage comes into focus line by line from a heavy blur on entering the viewport — made for narrative paragraphs.

Lyric lines colored character by character along a timeline, with the current line scaled up in focus.

Five common logo entrances (bloom, stroke-then-fill, shine sweep, lockup slide-out and wordmark morph) triggered on mount, on entering the viewport or manually.

A strike-and-reframe text React component: a sentence is struck through with a hand-drawn line, then a new sentence rises from below to replace it. Chainable for objection-to-answer and old-claim-to-new-claim reframes.

Refracts children through an SVG displacement filter like a liquid droplet, then bursts the surface to reveal them crisply on click or in-view.

A React text animation where a scattered keyword cloud drifts toward the center, merges and resolves into a single concluding sentence — for distilling scattered ideas into one message.