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.
Blur Out Up
rcnWords arrive clean and depart upward with increasing blur for airy exits.
Bottom Up Letters
rcnSplits text into letters and reveals each glyph from below with deterministic staggered timing.
Caret Swap
rcnA 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.
Centered Word Build
rcnWords build outward from the center with accelerating rise and crisp settle.
Char Slam Explode
hfrmHeadline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.
Chromatic Wave
rcnRGB-split fluid distortion wave animates across headline and kicker text.
Extrude Pop
rcnA flat word pops up out of the plane on a solid colored 3D body, no camera involved.
Fade Through
rcnA calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer.
Focus Blur Resolve
rcnA premium focus pull from heavy blur to crisp text, then a soft blur-out exit.
Fog Rise
rcnDisplay 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.
Gooey Morph
rcnOrganic gooey liquid bars morph and fuse into clear bold typography.
Gradient Scale Cut Text
rcnAn oversized gradient reveal snaps to a separate compact blurred line that settles left while the reveal continues.
Hand Count
rcnHand-drawn organic counter animates smoothly to target value with configurable decimals.
Handwrite
rcnHandwritten text laid down letter by letter on a quantized stop-motion clock, each glyph keeping its own slant and baseline wobble.
Ink Underline
rcnHand-drawn natural ink stroke sketches an organic underline beneath text.
Inline Pill Takeover
rcnA 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.
Kinetic Center Build
rcnBold center-staged words build with kinetic momentum and dynamic entry offsets.
Kinetic Morph Text
rcnGlyphs fluidly fly, rotate, and morph between multi-line phrases.
Kinetic Type Swap
hfrmA held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.
Kinetic Warp
rcnA coarse mesh warp bends a whole word in staccato beats, one axis per keyframe.
Line-by-Line Slide
rcnEach line enters from the left with staggered slide and exits to the right.
Mask Reveal Up
rcnTypography clips cleanly out of an invisible bottom boundary mask.
Matrix Decode
rcnRandom scramble characters resolve left-to-right into the target text.
Micro Scale Fade
rcnMicroscopic scale-in with soft opacity resolve for refined product titles.
Number Wheel
rcnA rolling digit odometer counter primitive for metrics, prices, counts, and scoreboards.
Outline Fill Track Text
rcnA rising lead word gives way to an outlined value that fills from left to right while both travel on one continuous track.
Per Character Rise
rcnIndividual characters rise from below on a tight staggered cadence.
Per-Word Crossfade
rcnWords gently fade into place with a short vertical drift for calm keynote rhythm.
Perspective Squeeze
rcnDual perspective text blocks squash, stretch, and skew with bold kinetic energy.
RGB Glitch Text
rcnRGB-offset text copies jitter briefly for a controlled chromatic glitch window.
Rolling Number
rcnHigh-precision vertical odometer rolls numbers to their target value.
Rolodex Flip
rcnSplit-flap mechanical rolodex card flip cycles through phrases.
Rush Type
rcnA resting white word blasts through vertical scale motion, separating into energy-conserving RGB shutter trails before the next word resolves.
Scale Down Fade
rcnWords decelerate and scale down into resting focus with clean fade.
Scan Band
hfrmA diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.
Shadow Sweep Text
rcnA line rises up and left while one dense dark shadow uncovers it and a second shadow sweeps back across it for the exit.
Shared Axis Y
rcnPer-word vertical shared-axis transition for sharp editorial swaps.
Shared Axis Z
rcnScale-based shared-axis transition for focus shifts and context depth.
Sheen Slide In
rcnGlossy metallic sheen slides across typography as it establishes on canvas.
Shimmer Sweep
rcnAnimated light sweep across text using a dynamic gradient sheen — ideal for AI accents and premium reveals.
Short Slide Down
rcnSnappy downward micro-slide entrance for headers and labels.
Short Slide Right
rcnTight horizontal slide entrance with crisp staggered letter arrival.
Slot Machine Roll
rcnA vertical reel scrolls characters from one value to another with mechanical spring rhythm.
Soft Blur In
rcnA soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts.
Spring Scale In
rcnPlayful spring bounce scales characters into place with natural overshoot.
Squeeze In
rcnCharacters appear one by one on a tight stagger; when the last one lands, every letter gap compresses as one and the word squeezes together.
Staggered Fade Up
rcnWords fade in and slide up one after another with configurable delay.
Stretch In
rcnTypographic glyph contours stretch along curved vector bezier paths.
Strikethrough Replace
rcnDraw a strike line across old text, then reveal the replacement word.
Text Along a Path
hfrmHandwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input
Texture Mask Text
hfrmCSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps
Top-Down Letters
rcnLetters descend from above in a pronounced staircase cadence with zero blur.
Tracking In
rcnA precise letter-spacing reveal from wide tracking to settled lockup for premium titles.
Type Fossil
rcnTypographic sediment layers expose historical drafts before fusing into final text.
Typed Split Wipe
rcnA centered cursorless type build holds, then exits through opposing fixed-layout glyph wipes that leave the anchor visible longest.
Typewriter
rcnCharacter-by-character text reveal with a deterministic blinking cursor.
Value Swap
rcnKeyframe-scheduled value swaps slide old phrases out and new phrases in.
Variable Axis Type
hfrmA locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.
Weight Wave
hfrmA 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.
Word Push
rcnA 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.
Word Stream
rcnVoiceover-paced phrases that build word by word — the next word looms as a blurred ghost before it resolves, then the phrase cuts away.
Zoom Words
rcnA 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.