Docs
Wave Revel Text

Wave Revel Text

Displays a beautiful Wave Revel Text using react.

Loading...

Installation

Copy and paste the Generate Text code into your project.

API Reference

A text animation component that applies a wave-like reveal effect to text, supporting letter or word-based animation with optional blur effects.

Props

PropTypeDefaultDescription
textstring"BuouUI"The text to animate.
classNamestringundefinedAdditional classes for the container.
direction`'up' \'down'`'down'
mode`'letter' \'word'`'letter'
durationstring'2000ms'Duration of the animation (e.g., 2000ms).
delaynumber0Delay for each letter/word in milliseconds.
blurbooleantrueIf true, applies a blur effect similar to Apple's WWDC animations.
letterClassNamestringundefinedAdditional class name for animated letters.

Usage

 
export default function Demo() {
  return (
    <WaveReveal 
      text="BuouUI" 
      direction="up"
      mode="word"
      duration="1500ms"
      delay={100}
      blur={false}
      className="text-primary"
      letterClassName="font-bold"
    />
  );
}