Animations & Motion
Liquid Motion
Gooey filter creates liquid blob animation around text.
textanimationliquidgooeyfilter
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | FLUIDITY | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textColor | string | text-white | Color of the text |
textSize | string | text-8xl | Size of the text |
blob1Color | string | bg-indigo-500 | Color of the first blob |
blob1Size | string | w-32 h-32 | Size of the first blob |
blob2Color | string | bg-purple-500 | Color of the second blob |
blob2Size | string | w-24 h-24 | Size of the second blob |
blob1Duration | number | 5 | Animation duration for first blob |
blob2Duration | number | 7 | Animation duration for second blob |
blurAmount | number | 10 | Blur amount for the gooey filter |
filterId | string | goo | ID of the SVG filter |
className | string | Additional CSS classes |