# text

Components⚛ TSX Live preview

Split-Text Roll Reveal

On hover, each letter rolls up out of an overflow mask while a gradient copy rolls in from below, staggered.

7.8k41.8k8.6kOpen

Components⚛ TSX Live preview

Text Scramble Decode Effect

Matrix-style glyph scramble that resolves into the target string, re-triggered on hover and on a timer.

6.8k39.1k7.2kOpen

Animations⚛ TSX Live preview

Looping Typewriter Effect

Monospace gradient text that types and deletes four phrases on a loop, with a blinking block cursor.

6.7k36.1k7.1kOpen

Animations⚛ TSX Live preview

Bouncy Letter Wave

The word MOTIONVAULT splits into per-letter spans that ride a looping spring wave and pop on hover.

5.5k30.7k5.6kOpen

Components Live preview

Glitch Text Reveal (RGB split)

Terminal-style headline with animated chromatic aberration slices — magenta and cyan clones clip and jitter on a loop.

35800Open

Featured Animations Live preview

Word-by-Word Scroll Text Highlight

Long-form manifesto text that lights up one word at a time as you scroll, each with a marker underline.

35600Open

Featured UI Elements Live preview

Clip-path shutter text reveal

Headline lines reveal left-to-right like a camera shutter opening, via animated inset clip-path.

50300Open

Neon signboard flicker text

Classic broken-sign flicker on neon-tube lettering with layered fuchsia/cyan text-shadow glow.

39800Open

Split-flap departure board text

Letters flip in from -90deg like an airport split-flap board, cycling words on a timer — monospace amber glow.

40200Open

Typewriter rotating words

Type-delete cycling of gradient words after a fixed lead phrase, with a blinking caret.

45800Open

Featured UI Elements Live preview

RGB glitch hover text

Hover the word and cyan/red RGB-split layers jitter in stepped keyframes — cyberpunk title effect.

41900Open

Featured UI Elements Live preview

Scramble decode text effect

Text resolves from random glyphs into the target word like decryption, with a blinking block cursor; loops and re-runs on click.

48700Open

Gold shimmer sweep text

A champagne-gold highlight sweeps across dark gold lettering on a loop — award-badge typography.

40100Open

Letter Rise Title · Ultra Violet

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Ultra Violet palette.

83400Open

Letter Rise Title · Cyber Lime

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Cyber Lime palette.

65100Open

Letter Rise Title · Sunset Amber

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Sunset Amber palette.

34600Open

Letter Rise Title · Rose Gold

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Rose Gold palette.

83200Open

Letter Rise Title · Ocean Sky

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Ocean Sky palette.

50000Open

Letter Rise Title · Mint Breeze

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Mint Breeze palette.

45600Open

Letter Rise Title · Candy Pink

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Candy Pink palette.

74000Open

Letter Rise Title · Royal Gold

Headline letters rise from a blurred mask one by one — click to replay. Rendered in the Royal Gold palette.

40800Open

Decode Scramble Text · Rose Gold

Words resolve from a stream of random glyphs — the classic hacker decode effect. Rendered in the Rose Gold palette.

11100Open

Decode Scramble Text · Ocean Sky

Words resolve from a stream of random glyphs — the classic hacker decode effect. Rendered in the Ocean Sky palette.

81500Open

Decode Scramble Text · Mint Breeze

Words resolve from a stream of random glyphs — the classic hacker decode effect. Rendered in the Mint Breeze palette.

14700Open

Decode Scramble Text · Candy Pink

Words resolve from a stream of random glyphs — the classic hacker decode effect. Rendered in the Candy Pink palette.

16900Open

Decode Scramble Text · Royal Gold

Words resolve from a stream of random glyphs — the classic hacker decode effect. Rendered in the Royal Gold palette.

61700Open

Decode Scramble Text · Crimson Heat

Words resolve from a stream of random glyphs — the classic hacker decode effect. Rendered in the Crimson Heat palette.

12900Open

Decode Scramble Text · Deep Indigo

Words resolve from a stream of random glyphs — the classic hacker decode effect. Rendered in the Deep Indigo palette.

85600Open

Decode Scramble Text · Aurora Teal

Words resolve from a stream of random glyphs — the classic hacker decode effect. Rendered in the Aurora Teal palette.

41400Open

Looping Typewriter Lines · Ultra Violet

A typewriter that types, holds and deletes a loop of phrases with a glowing caret. Rendered in the Ultra Violet palette.

37500Open

Looping Typewriter Lines · Cyber Lime

A typewriter that types, holds and deletes a loop of phrases with a glowing caret. Rendered in the Cyber Lime palette.

69200Open

Looping Typewriter Lines · Sunset Amber

A typewriter that types, holds and deletes a loop of phrases with a glowing caret. Rendered in the Sunset Amber palette.

66700Open

Looping Typewriter Lines · Rose Gold

A typewriter that types, holds and deletes a loop of phrases with a glowing caret. Rendered in the Rose Gold palette.

41500Open

Looping Typewriter Lines · Ocean Sky

A typewriter that types, holds and deletes a loop of phrases with a glowing caret. Rendered in the Ocean Sky palette.

33900Open

Looping Typewriter Lines · Mint Breeze

A typewriter that types, holds and deletes a loop of phrases with a glowing caret. Rendered in the Mint Breeze palette.

31500Open

Looping Typewriter Lines · Candy Pink

A typewriter that types, holds and deletes a loop of phrases with a glowing caret. Rendered in the Candy Pink palette.

25700Open

Looping Typewriter Lines · Royal Gold

A typewriter that types, holds and deletes a loop of phrases with a glowing caret. Rendered in the Royal Gold palette.

44900Open

Infinite Marquee

Seamless horizontal marquee of text or logos with pause on hover.

Text Gradient Header

Big heading with animated gradient text sweep.

Typing Text Effect

Typewriter text with blinking caret and loop cycle.

Text Gradient Shimmer

Headline text with animated gradient shimmer.

Typewriter Loop

Multi-phrase typewriter with erase and type cycle.

Loading Shimmer Text

Skeleton text lines with shimmer for loading blocks.

Circular Text Spin

Text rotating along a circular path.

UI Elements⚛ TSX Live preview

Spinner with Text State

Spinner paired with loading text that swaps to success check.

UI Elements⚛ TSX Live preview

Pronunciation Tooltip

Text word with speaker icon tooltip offering pronunciation audio.

UI Elements⚛ TSX Live preview

Text Link Button Variants

Inline text buttons in muted/primary/danger with underline motion.

Animations⚛ TSX Live preview

Typewriter Loop Effect

Words typing and deleting on a loop with blinking caret.