Images or items that burst around the cursor when it enters an element.
Unlock component
One license unlocks every pro feature for life, including the ones we haven't built yet.
Already have an account? Sign in
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The hover target. |
items | ReactNode | — | The nodes that burst from the cursor, usually images. |
driftAmount | number | 200 | How far items drift away from the cursor, in pixels. |
duration | number | 1.1 | How long an item drifts before it fades away, in seconds. |
burstCount | number | 8 | How many items scatter on each burst. |
spin | number | 200 | How much an item can rotate during its flight, in degrees, in either direction. Crank it past 360 to make items spin on themselves. 0 keeps them straight. |
linger | number | 0 | How long an item holds after it stops drifting, before it scales away, in seconds. |
render | ReactElement | function | <span/> | Override the wrapper element. |
Motion
React animation library.