Animations & Motion
Stroke Fill
SVG text animates from stroke to fill with smooth transition.
textanimationsvgstrokefill
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | Elegance | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
strokeWidth | number | 1.5 | Width of the stroke |
strokeColor | string | stroke-zinc-100 | Color of the stroke |
fillColor | string | #ffffff | Color of the fill |
fontFamily | string | font-[900] | Font family class |
fontSize | string | text-8xl | Font size of the text |
fontWeight | string | uppercase | Font weight of the text |
tracking | string | tracking-widest | Letter spacing |
animationDuration | number | 3 | Animation duration in seconds |
fillDelay | number | 2 | Delay before fill animation |
fillDuration | number | 1 | Duration of fill animation |
className | string | Additional CSS classes |