Free React Text Effect Components

Typography-as-spectacle usually means one shimmering gradient headline. This category goes wider, twenty-seven effects drawn from print and process: letterpress-adjacent stencil cuts, split-flap departures boards, punch tape, dot-matrix printing, frottage rubbings, redline proofs, marker highlights, ink bleeds, and kinetic type walls, alongside precision tools like staggered reveals, blur focus, and weight emphasis. Each treats type as the subject, not the victim, and every one falls back to plain readable text without JavaScript or motion.

27 components · MIT licensed · installable with the shadcn CLI

Compositor's Case

Type set from a visible case, sorts fly from their compartments, land mirrored in the composing stick, and one proof pull flips the React headline readable. Tailwind-token letterpress craft.

Dot Matrix Print

The headline prints as a dot-matrix raster, a carriage sweeps once and canvas dots sized by ink density pop in column by column. React and Tailwind tokens via probes; one accent word in primary.

Frottage Rubbing

A graphite rubbing over hidden relief, crayon passes sweep the sheet and the React headline surfaces where pigment catches. Canvas text effect themed by Tailwind token probes.

Ink Bleed

Letters develop like ink on wet paper, each glyph starts as a soft bleed and contracts to crisp edges, neighbouring bleeds wicking together mid-pass. One development, then stillness.

Kinetic Type Wall

Editorial kinetic type wall for React, outline echoes of the headline drift in alternating directions while one inked row carries the accent word. Tailwind-token themed; hover eases it to a halt.

Neon Bend

The tube bends first, unlit glass traces the headline stroke by stroke, gas ignites in a slow warm-up, and the React neon sign settles steady in Tailwind-token primary glow with an ink core.

Orbit Caption

A mono micro-caption orbits the headline on an elliptical SVG path, slow as a survey satellite, hover or focus eases the orbit to a halt so the caption can be read.

Proof Loupe

A proofreader's loupe sweeps the React headline once, glyphs bulge under the hairline lens with a mono kerning readout, then parks on the accent word. Fine pointers steer it; Tailwind token styled.

Punch Tape

A punched paper tape feeds through a reader head and your React headline prints glyph by glyph, the encoding visible in the holes. Tailwind tokens; one pass, then stillness.

Redline Proof

A live redline pass over the sentence, strikethroughs draw, corrections drop in, a REV stamp lands, and the final React headline settles clean. Tailwind-token primary ink.

Scatter Assemble Text

The headline arrives as debris, glyphs scattered with spin and scale fly home on individual springs, then shy away from the pointer once assembled. Pure DOM transforms.

Shatter Settle

The set headline fractures into glyph shards, rotation, drift, depth, then every shard flies home and the line re-sets to perfect type. It departs and returns, exactly once.

Split Flap

A split-flap departure board for React, mono cells flip through seeded glyphs with mechanical fold physics and land on your message left to right. Tailwind tokens only, designed reduced-motion still.

Stencil Cut

The headline is die-cut, never painted, a cutter traces glyph outlines, waste plates lift away, and React text reads as ink through stencil holes. Tailwind-token subtractive typography.

String Art

The headline built as string art, pins tap in along real glyph outlines and one continuous thread chords them until the word reads. React canvas text effect themed by Tailwind tokens.

Type Anatomy

A type-specimen sheet that measures itself, baseline, cap and x-height guides draw over the live React headline with true counted mono readouts. Tailwind-token drafting ink.

Variable Pulse

A weight wave travels the headline via variable-font axes, glyphs swell and relax as it passes, and the pointer presses local weight into the line like pressure on wet type.

Annotate Callouts

Inline annotation system, marked phrases carry numbered mono superscripts wired to margin notes that reveal as each mark scrolls into view. Editorial footnotes, live on the page.

Baseline Wave

A wave travels the baseline once, characters lift and settle as it passes, like a breeze crossing the line. One pass, then stillness.

Blur Focus

Words rack into focus one after another, a camera pulling the sentence sharp. Blur, opacity and a breath of letter-spacing resolve in reading order.

Line Echo

A display line trailed by two faint offset echoes of itself that converge into one crisp line on view, print misregistration settling into register. One pass, then stillness.

Marker Highlight

A marker swipe draws itself behind the key phrase when it scrolls into view, hand-drawn energy with drafting-table restraint, SVG-stroked in the accent ink.

Mono Caption Pair

A display statement locked to its mono caption, the caption types on only after the display settles, caret in primary ink. The library's two voices bound into one component.

Split Slide

Multi-line text where alternating lines slide out of their masks from opposite edges with a skew that straightens on landing, editorial title-card energy.

Staggered Text Reveal

Words or characters rise out of their own line-mask on scroll, text is revealed, not faded. Semantic tag control, once-only trigger, reduced-motion fallback.

Text Shimmer

A band of light sweeps through the text, pure CSS, zero dependencies. Made for working states and streaming AI responses; goes still under reduced motion.

Weight Emphasis

A sentence that makes its point through mass, up to three emphasis words set heavier in primary ink, revealed last in the stagger. Rhythm through weight, not color spam.