Text effects
React Text Animation Components
Kinetic type, scramble reveals, gradient sweeps, and shader-lit wordmarks for React. Every component is a single TypeScript file styled with Tailwind that you can copy-paste or install with the CLI. Each one honors prefers-reduced-motion with a designed static fallback and passes className through.
A wordmark cast in living liquid chrome: a glyph alpha mask shaded by an original OGL metal shader — domain-warped churn, thin specular bands over dark troughs, a fresnel-lit rim, a whisper of chromatic fringing, and one crisp highlight that sweeps the full mark every few seconds, after a one-shot pour-in on first view. Polished cool steel by default; tint reaches warm bronze/gold.
Text that resolves from a soft blur into sharp focus, staggered by word or character, when it scrolls into view. Falls back to a fade under reduced motion.
SVG gas-discharge tube lettering — ignition travels along each glyph's tube with a seeded strike flicker, then holds with a faint mains hum; the letter under the pointer destabilises. Neon, argon and mercury presets; fully lit and steady under reduced motion.
Characters churn through scrambled forge-rune glyphs before quenching into the final text, one at a time. Triggerable on mount, hover, or scroll into view; resolves instantly under reduced motion.
Masked line, word, or character reveal that draws text clear of hiding as it scrolls into view, each segment trailing a soft white edge glow along its baseline.
A word slot that cycles by melting — the outgoing word sags through a bright white heat-blur while the incoming word solidifies from the same blur, with a hairline neutral underline that stretches to each new width like drawn wire.
Text glitches with classic red and cyan channel ghosts sheared apart by jump-cut clip-path slices, sparking at each shear line. Hover, continuous, or timed-interval triggers; freezes static under reduced motion.
A metallic light sweep crosses glyphs on a deliberate slow interval — a white core edged in refined champagne gold over a brushed-bronze base. Pure CSS, driven by an animated @property.
Text flowing along an SVG path on a seamless loop — circle, wave, figure-eight, arc or a custom path. Scroll velocity boosts or flips the drift, drag scrubs it with inertia, arrow keys fling it, and an intro draws the path in before the text unveils along it. Static under reduced motion.
Canvas headline that crazes like glazed ceramic: seeded branching hairline cracks race out from the cursor, then a metallic gold seam flows along every fracture; click to split the glyphs into fragments that drop and spring back before gilding.
Variable-font text where each glyph swells in weight and gains a faint white glow as the cursor nears, under a steep gaussian falloff. Idles on its own when untouched; static mid-weight under reduced motion.
A variable-font pressure headline — the line behaves as a press bed under the cursor: glyph weight swells with a gaussian falloff while nearby letters rise and letter-spacing opens around the pressure point. Idle, the weight axis breathes almost imperceptibly. Pure rAF over font-variation-settings; real text in the DOM, static mid-weight under reduced motion; a ghost pressure point sweeps the line when untouched.
A word that re-forms into a new one: shared letters slide along the baseline to their new home while unique letters iris in and out, then tighten a hair into their final kerning. Real selectable text, announced politely on change; swaps instantly under reduced motion.
Headline cast in fine gold sand: the text is sampled into grains that scatter with velocity and curl under the cursor, then trickle back home with staggered springs and a settling drift; idles on its own when untouched.
A paragraph that holds its typographic line until triggered, then every word becomes a matter-js rigid body that drops, tumbles, collides, and piles at the floor — grab a fallen word and fling it. Highlight words carry the lone accent and settle atop the neutral heap.
Canvas headline spray-painted through a cut stencil plate: seeded S-curve sweeps deposit grainy paint inside the letter cutouts with faint overspray and a few drips, then the plate lifts away to reveal the word; drag to add coats.
A count-up number built from odometer-style digit drums that enter with a soft white-blue cast and settle to white as they seat, with a brief neutral underline flash on settle. Locale and currency aware via Intl.NumberFormat.
A split-flap departure board — a grid of matte charcoal tiles whose hinged flaps churn through the character ring and cascade diagonally to the message, each flap landing with a gravity overbite and a shadow cast on the lower half. Only changed tiles animate; optional synthesized flap sound.
Canvas ASCII renderer with amber-phosphor persistence: a headline (or a flowing noise field) redrawn as a weight-ramped glyph grid that pours in, shimmers, and brightens under the cursor; idles on its own when untouched.


















