Get Updates

WordReveal

A text animation component that reveals words with a staggered motion effect.

Christer Hagen

Written by Christer Hagen

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

PropTypeDescriptionDefault
textstringThe text content to animate-
delaynumberDelay between each word animation (in seconds)0.15
classNamestringAdditional CSS classes-