Text Scatter
Interactive letter scatter effect
text-scatter-tw
Bounce Back.
Customize
Tweak the props liveText
1
Scatter Effect
200
90°
Timing
1s
2s
Props
| 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
Default:
requiredclassNamestringAdditional CSS classes for the container element
Default:
""asReact.ElementTypeHTML element to render as the container
Default:
"h1"velocitynumberInitial velocity of the scattered letters
Default:
200rotationnumberMax rotation in degrees when scattered
Default:
90scalenumberScale factor when scattered
Default:
1returnAfternumberDelay in seconds before returning to original position
Default:
1durationnumberDuration of the scatter animation
Default:
2