Text whose letters drop, tumble and bounce away from the cursor.
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 | string | — | The text content. |
radius | number | 80 | Distance in px around the cursor within which letters drop. |
gravity | number | 510 | Downward acceleration in px/s². |
bounce | number | 0.3 | Fraction of the fall speed kept on each floor bounce, from 0 (dead stop) to 1. |
respawnDelay | number | 0.1 | Seconds a fallen letter rests on the floor before returning home. |
fadeDuration | number | 0.05 | Seconds of the fade out and fade in when a letter returns home. |
explodeOnClick | boolean | true | Blast nearby letters outward on click. |
webglEnabled | boolean | true | Render through WebGL, or fall back to plain DOM text. |
zIndex | number | 0 | Render order inside the shared canvas. |
pixelRatio | number | 2 | Cap on the glyph atlas resolution. |
render | ReactElement | function | <span/> | Override the wrapper element. |