Text Reveal Component
Add sleek, animated Text Reveal effect to your text for a modern user experience.
Example
Installation
Install the necessary dependencies:
npm install tailwindcss react-icons framer-motionCopy and paste the following code into your project.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
texts | string[] | [] | An array of text strings to be revealed, each on a new line. |
width | "fit-content" or "100%" | "fit-content" | Specifies the width of the reveal container. |
boxColor | string | "#5046e6" | Custom color for the reveal overlay. |
duration | number | 0.5 | Duration of the animation in seconds for the overlay and text reveal. |
className | string | "" | Additional classes to style the container or text elements. |