React Text Animation Components

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. 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.

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.

Variable-font text where each glyph swells in weight and gains a faint white glow as the cursor nears, under a steep gaussian falloff. Static mid-weight on touch and 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 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.

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.

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.