Text animation

Text animation components for React

Reusable glyph, word, and phrase animation — kinetic swaps, blur reveals, tracking, variable-font motion, and deterministic type effects.

These components animate the type itself rather than a surrounding title card or caption track. Use them inside larger scenes when the letters, words, or phrase transitions are the visual mechanism.

Because these are real components rather than baked renders, the type is still type: change the words, the font, the timing, or the colour a month later and re-render.

62 verified components. Browse every category.

component

Blur Out Up

rcn

Words arrive clean and depart upward with increasing blur for airy exits.

component

Bottom Up Letters

rcn

Splits text into letters and reveals each glyph from below with deterministic staggered timing.

component

Caret Swap

rcn

A gradient caret swells into a block that consumes the first phrase right-to-left, collapses back and types the second phrase out with a blinking caret.

component

Centered Word Build

rcn

Words build outward from the center with accelerating rise and crisp settle.

component

Char Slam Explode

hfrm

Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.

component

Chromatic Wave

rcn

RGB-split fluid distortion wave animates across headline and kicker text.

component

Extrude Pop

rcn

A flat word pops up out of the plane on a solid colored 3D body, no camera involved.

component

Fade Through

rcn

A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer.

component

Focus Blur Resolve

rcn

A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.

component

Fog Rise

rcn

Display text resolves out of fog: characters sharpen from heavy blur center-out with vertical streaks dissolving above them, as if rising along the z-axis.

component

Gooey Morph

rcn

Organic gooey liquid bars morph and fuse into clear bold typography.

component

Gradient Scale Cut Text

rcn

An oversized gradient reveal snaps to a separate compact blurred line that settles left while the reveal continues.

component

Hand Count

rcn

Hand-drawn organic counter animates smoothly to target value with configurable decimals.

component

Handwrite

rcn

Handwritten text laid down letter by letter on a quantized stop-motion clock, each glyph keeping its own slant and baseline wobble.

component

Ink Underline

rcn

Hand-drawn natural ink stroke sketches an organic underline beneath text.

component

Inline Pill Takeover

rcn

A clipped pill expands inside a sentence, physically pushes the surrounding words apart, removes them through blur and takes over the frame with a fast camera punch-in.

component

Kinetic Center Build

rcn

Bold center-staged words build with kinetic momentum and dynamic entry offsets.

component

Kinetic Morph Text

rcn

Glyphs fluidly fly, rotate, and morph between multi-line phrases.

component

Kinetic Type Swap

hfrm

A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.

component

Kinetic Warp

rcn

A coarse mesh warp bends a whole word in staccato beats, one axis per keyframe.

component

Line-by-Line Slide

rcn

Each line enters from the left with staggered slide and exits to the right.

component

Mask Reveal Up

rcn

Typography clips cleanly out of an invisible bottom boundary mask.

component

Matrix Decode

rcn

Random scramble characters resolve left-to-right into the target text.

component

Micro Scale Fade

rcn

Microscopic scale-in with soft opacity resolve for refined product titles.

component

Number Wheel

rcn

A rolling digit odometer counter primitive for metrics, prices, counts, and scoreboards.

component

Outline Fill Track Text

rcn

A rising lead word gives way to an outlined value that fills from left to right while both travel on one continuous track.

component

Per Character Rise

rcn

Individual characters rise from below on a tight staggered cadence.

component

Per-Word Crossfade

rcn

Words gently fade into place with a short vertical drift for calm keynote rhythm.

component

Perspective Squeeze

rcn

Dual perspective text blocks squash, stretch, and skew with bold kinetic energy.

component

RGB Glitch Text

rcn

RGB-offset text copies jitter briefly for a controlled chromatic glitch window.

component

Rolling Number

rcn

High-precision vertical odometer rolls numbers to their target value.

component

Rolodex Flip

rcn

Split-flap mechanical rolodex card flip cycles through phrases.

component

Rush Type

rcn

A resting white word blasts through vertical scale motion, separating into energy-conserving RGB shutter trails before the next word resolves.

component

Scale Down Fade

rcn

Words decelerate and scale down into resting focus with clean fade.

component

Scan Band

hfrm

A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.

component

Shadow Sweep Text

rcn

A line rises up and left while one dense dark shadow uncovers it and a second shadow sweeps back across it for the exit.

component

Shared Axis Y

rcn

Per-word vertical shared-axis transition for sharp editorial swaps.

component

Shared Axis Z

rcn

Scale-based shared-axis transition for focus shifts and context depth.

component

Sheen Slide In

rcn

Glossy metallic sheen slides across typography as it establishes on canvas.

component

Shimmer Sweep

rcn

Animated light sweep across text using a dynamic gradient sheen — ideal for AI accents and premium reveals.

component

Short Slide Down

rcn

Snappy downward micro-slide entrance for headers and labels.

component

Short Slide Right

rcn

Tight horizontal slide entrance with crisp staggered letter arrival.

component

Slot Machine Roll

rcn

A vertical reel scrolls characters from one value to another with mechanical spring rhythm.

component

Soft Blur In

rcn

A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts.

component

Spring Scale In

rcn

Playful spring bounce scales characters into place with natural overshoot.

component

Squeeze In

rcn

Characters appear one by one on a tight stagger; when the last one lands, every letter gap compresses as one and the word squeezes together.

component

Staggered Fade Up

rcn

Words fade in and slide up one after another with configurable delay.

component

Stretch In

rcn

Typographic glyph contours stretch along curved vector bezier paths.

component

Strikethrough Replace

rcn

Draw a strike line across old text, then reveal the replacement word.

block

Text Along a Path

hfrm

Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input

component

Texture Mask Text

hfrm

CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps

component

Top-Down Letters

rcn

Letters descend from above in a pronounced staircase cadence with zero blur.

component

Tracking In

rcn

A precise letter-spacing reveal from wide tracking to settled lockup for premium titles.

component

Type Fossil

rcn

Typographic sediment layers expose historical drafts before fusing into final text.

component

Typed Split Wipe

rcn

A centered cursorless type build holds, then exits through opposing fixed-layout glyph wipes that leave the anchor visible longest.

component

Typewriter

rcn

Character-by-character text reveal with a deterministic blinking cursor.

component

Value Swap

rcn

Keyframe-scheduled value swaps slide old phrases out and new phrases in.

component

Variable Axis Type

hfrm

A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.

block

Weight Wave

hfrm

A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.

component

Word Push

rcn

A phrase builds from its first word centered: each next word drives in from the right and pushes the line left, easing into the new center.

component

Word Stream

rcn

Voiceover-paced phrases that build word by word — the next word looms as a blurred ghost before it resolves, then the phrase cuts away.

component

Zoom Words

rcn

A close-up word reveal: huge words fade into a long line while the camera rides the write head, the line streaming off-frame as the shot eases into focus.