Drip Text
Letters drip down on hover with random skew offsets, spring back on leave.
Component Showcase
Drip Text
Letters drip down on hover with random skew offsets, spring back on leave.
GSAPElastic
Interactive Playground
Adjust sliders and values to preview changes in real-time
text
The text phrase displayed on screen.
stagger
Delay step (seconds) added progressively to each character animation.
yOffset
Max random pixel translation distance the letters drip downwards.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "MELON" | The text phrase displayed on screen. |
| stagger | number | 0.04 | Delay step (seconds) added progressively to each character animation. |
| yOffset | number | 16 | Max random pixel translation distance the letters drip downwards. |