Text Reveal

Reveal text with different effects

Hello,world!

Hello,world!Thisisatextrevealeffect.

Text Reveal

A text reveal component that reveals text with different effects.

Installation

npm install motion/react

Basic Usage

<TextReveal text="Hello, world!" variant="blur" />

Advanced Usage

<TextReveal
  text="Hello, world!"
  variant="blur"
  className="text-2xl font-bold"
  delayPerWord={0.1}
  duration={1}
/>

Variants

Blur: Blur the text
Chat: Chat-like effect
Pop: Pop-like effect

Variants - Props

// Blur
<TextReveal text="Hello, world!" variant="blur" className="text-2xl font-bold" delayPerWord={0.1} duration={1} />

// Chat
<TextReveal text="Hello, world!" variant="chat" className="text-2xl font-bold" delayPerWord={0.1} duration={1} />

// Pop
<TextReveal text="Hello, world!" variant="pop" className="text-2xl font-bold" delayPerWord={0.1} duration={1} />

Props

Prop	Type	Default	Description
text	string	-	The text to reveal
variant	string	-	The variant of the text reveal
className	string	-	The class name of the text reveal
delayPerWord	number	-	The delay per word
duration	number	-	The duration of the text reveal

Best Practices

Clear Labels: Use descriptive and concise text reveal labels
Consistent Icons: Use consistent icon styles throughout
Logical Grouping: Group related text reveal items together
Keyboard Navigation: Ensure all items are accessible via keyboard
Loading States: Show loading indicators for dynamic content

PreviousParallax Card

NextText Effects