Text Reveal

A stylish effect that sequentially fades in text on page load, creating a dynamic reveal.

ForgeUI is a beautifully designed component library built with Tailwind CSS and Motion.

Installation

Terminal

npx gotlui add text-reveal

Usage

page.tsx

import TextReveal from "@/components/gotlui/text-reveal"

export default function Example() {
  return (
    <TextReveal
      text="This sentence reveals itself one word at a time with a blur effect."
      staggerDelay={0.2}
      className="mx-auto max-w-3xl text-lg font-semibold"
    />
  )
}

Props

Prop	Type	Default	Description
text	string	-	The text content to reveal with the animation.
className	string	-	Optional Tailwind CSS classes to style the wrapper element.
filter	boolean	true	Applies a blur effect that transitions during the reveal animation.
duration	number	0.5	Animation duration (in seconds) for each word.
staggerDelay	number	0.2	Delay between each word's animation start time.