Falling Text

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.

React Three Fiber
React renderer for Three.js.

Motion
React animation library.

WebGL Provider (Atelier)
A single shared WebGL canvas for the whole app.

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.

React Three Fiber
React renderer for Three.js.

Motion
React animation library.

WebGL Provider (Atelier)
A single shared WebGL canvas for the whole app.

API