crucıble

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.

Amalgam

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.

oglPro
Anneal

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.

motion
Argon

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.

css
Cipher

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.

css
Cleave

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.

gsap
Flux

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.

motionPro
Fracture

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.

css
Gild

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.

css
Gyre

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.

motion
Kintsugi

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.

canvasPro
Magnetize

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.

motionPro
Press

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.

css
Recast

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.

motion
Sandcast

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.

canvasPro
Scree

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.

canvasPro
Stencil

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.

canvas
Tally

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.

motion
Terminus

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.

motionPro
Typeset

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.

canvasPro

Browse all components