Docs
Wave Revel Text
Wave Revel Text
Displays a beautiful Wave Revel Text using react.
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
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "BuouUI" | The text to animate. |
className | string | undefined | Additional classes for the container. |
direction | `'up' \ | 'down'` | 'down' |
mode | `'letter' \ | 'word'` | 'letter' |
duration | string | '2000ms' | Duration of the animation (e.g., 2000ms). |
delay | number | 0 | Delay for each letter/word in milliseconds. |
blur | boolean | true | If true, applies a blur effect similar to Apple's WWDC animations. |
letterClassName | string | undefined | Additional 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"
/>
);
}