Animatetextwithstyle

The WordReveal component provides a beautiful text animation that reveals words one by one with a staggered motion effect. Perfect for hero sections, headings, and attention-grabbing text elements.

Installation

Examples

Sloweranimationwithcustomdelay

Customstyledanimation

Usage

Basic Usage

import WordReveal from "@/components/prismui/word-reveal"
 
export default function Example() {
  return (
    <WordReveal text="Animate text with style" />
  )
}

Custom Delay

You can adjust the animation timing by modifying the delay:

<WordReveal 
  text="Slower animation with custom delay" 
  delay={0.3}
/>

Custom Styling

The component accepts custom classes for styling:

<WordReveal 
  text="Custom styled animation" 
  className="text-2xl md:text-4xl font-light text-emerald-100"
/>

Customization

Custom Text Size and Color

<WordReveal 
  text="Custom size and color" 
  className="text-3xl text-blue-500"
/>

Custom Animation Timing

<WordReveal 
  text="Slower reveal effect" 
  delay={0.5}
/>

Custom Font Style

<WordReveal 
  text="Different font style" 
  className="font-serif italic"
/>

Notes

The component uses Framer Motion for animations
Each word is animated independently
The animation includes opacity, blur, and vertical movement
The component is responsive and adjusts text size based on screen width
Custom styling can be applied through the className prop

Props

Prop	Type	Description	Default
text	string	The text content to animate	-
delay	number	Delay between each word animation (in seconds)	0.15
className	string	Additional CSS classes	-

WordReveal