React Text Animation Components

Text animation components for React. Typewriter, glitch, gradient, physics-based effects. Copy-paste into your Next.js project.

You know that hero section that just sits there? Static text on a static background, looking exactly like every other landing page? Your competitors have the same Framer template. The same stock photos. The same "We help you do the thing" headline in Inter.

Typewriter effects that feel human. Gradients that flow. Physics-based falling text. Glitch effects for that cyberpunk edge. Copy the component, paste it in, watch your bounce rate drop.

Pick an Effect

Typewriter & Reveal

The classics. Text that types itself, words that appear one by one, reveals that feel cinematic.

Typing Text

Realistic typewriter with cursor

Writing Text

Word-by-word reveals

Text Generate

Progressive character generation

Decrypted Text

Matrix-style character cycling

Text Reveal

Cinematic clip-path reveals

Numbers & Counters

For dashboards, pricing pages, and anywhere numbers need to feel alive instead of just... appearing.

Counting Number

Spring physics counting

Sliding Number

Mechanical counter digits

Rotation & Cycling

When you need to show multiple messages in one space. Taglines, features, testimonials—without the layout jumping around.

Rotating Text

Smooth vertical cycling

Flip Words

3D word flipping

Rolling Text

Character rolling with physics

Container Flip

Masked container transitions

Shuffle

Random character shuffling

Gradient & Color

Text that glows, shimmers, and catches eyes. For hero headlines that need to feel premium.

Gradient Text

Flowing color animations

Shimmering Text

Wave-like shimmer effects

Colourful Text

Rainbow color cycling

Blur & Focus

Soft reveals that feel elegant. Great for loading states, scroll animations, or anywhere brutalist feels wrong.

Blur Text

Blur to focus animation

True Focus

Depth-of-field effects

Fuzzy Text

Soft particle-like blur

Glitch & Digital

Cyberpunk vibes. RGB separation, digital corruption, matrix aesthetics. For gaming sites, tech brands, portfolios that stand out.

Glitch Text

RGB channel separation

Scrambled Text

Proximity-based scrambling

Cursor & Interaction

Text that responds to where you point. Variable fonts, proximity effects, trails that follow movement.

Variable Proximity

Font weight follows cursor

Text Pressure

Pressure-sensitive effects

Text Hover Effect

Radial gradient reveals

Text Cursor

Cursor trail effects

Text Trail

Character trails on movement

Highlight & Emphasis

Draw attention to specific words. Marker highlights, motion backgrounds, shadows that make text pop.

Highlight Text

Expanding marker effect

Motion Highlight

Active item backgrounds

Line Shadow

Dynamic shadow effects

Scroll & Velocity

Text that responds to how fast you scroll. Velocity-based effects for that modern, dynamic feel.

Scroll Velocity

Speed-responsive text

Path & Circular

Text that breaks free from straight lines. Curved paths, circles, loops that add visual interest.

Circular Text

Text in perfect circles

Curved Loop

Marquee on curved paths

Physics & Motion

Text with weight. Falling words, splitting characters, animations that feel real because they follow physics.

Falling Text

Matter.js physics falling

Splitting Text

Character/word splitting

Using Components

Install with the CLI:

npx shadcn@latest add https://shadcn.io/r/typing-text.json

Or copy from the component page directly into your project. Each component is self-contained—no external dependencies beyond what's listed.

Most animations use Motion (Framer Motion). Some advanced effects use GSAP, Matter.js, or Three.js. Dependencies are listed on each component page.