A customizable React component for splitting and animating text.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| text | string | Yes | OpenReactHub Split Text | The text to split and animate. |
| className | string | No | '' | Additional CSS classes for styling the container. |
| delay | number | No | 0 | Initial delay (in milliseconds) before the animation starts. |
| speed | number | No | 1 | Multiplier for the animation speed (higher = faster, lower = slower). |
| easing | (t: number) => number | No | undefined | Custom easing function to control the animation curve. |
| direction | 'up' | 'down' | 'left' | 'right' | No | 'up' | The direction from which the animation starts. |
| pause | boolean | No | false | Pauses or resumes the animation. |
| repeat | number | No | 1 | Number of times the animation should repeat. Use `0` for infinite repeats. |
| staggerDelay | number | No | 30 | Delay (in milliseconds) between animating each character. |
| loop | boolean | No | false | Enables infinite animation looping (alternative to `repeat={0}`). |
| onComplete | () => void | No | undefined | Callback function that fires when a single animation cycle completes. |
| highlightOnHover | boolean | No | true | Adds hover effects for each character. |
| animateByWord | boolean | No | false | Split text into either words or characters |
| hoverColor | string | No | 'red' | Specifies the color for hover effects (requires `highlightOnHover`). |