Letters that scatter on hover and fall back into place
| Name | Type | Default | Description |
|---|---|---|---|
text | string | required | The text content to render and animate |
className | string | "" | Additional CSS classes for the container element |
as | React.ElementType | "h1" | HTML element to render as the container |
velocity | number | 200 | Initial velocity of the scattered letters |
rotation | number | 90 | Max rotation in degrees when scattered |
scale | number | 1 | Scale factor when scattered |
returnAfter | number | 1 | Delay in seconds before returning to original position |
duration | number | 2 | Duration of the scatter animation |
textstringThe text content to render and animate
requiredclassNamestringAdditional CSS classes for the container element
""asReact.ElementTypeHTML element to render as the container
"h1"velocitynumberInitial velocity of the scattered letters
200rotationnumberMax rotation in degrees when scattered
90scalenumberScale factor when scattered
1returnAfternumberDelay in seconds before returning to original position
1durationnumberDuration of the scatter animation
2