Text effects

Physics drop text

A sentence breaks into words that fall, tumble and bounce under simulated gravity, then settle and can be flicked around with the pointer.

Componentsfallintoplacewithrealgravityandphysics

Words settle at the bottom, then you can grab and flick them around.

Using Physics drop text

A sentence breaks into words that fall, tumble and bounce under simulated gravity, then settle and can be flicked around with the pointer.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: text, gravity, highlightColor, trigger

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2301Ascii Art HeadingText effectsA large word is rendered as a mosaic of monospaced characters whose density mimics the letterforms, gently rippling and tilting toward the pointer.

2830Split flap displayText effectsA row of mechanical flip-board tiles cycles through a list of short phrases, and only the tiles whose letter changes tumble through a few random flaps before landing.

2824Cascading Letter RevealText effectsA headline that reveals itself letter by letter with a soft rise and fade as it enters view, then holds steady once finished.

2320Circular hover speed ringText effectsA phrase spins slowly around a circle until the pointer arrives, then snaps to a fast spin and grows slightly before easing back once the pointer leaves.

2327Count Up NumberText effectsA large numeral that springs from a starting value up to a target once it scrolls into view, overshooting slightly before it settles.

2826Elastic weight headlineText effectsA single line of huge uppercase letters whose weight, width and slant swell around a lagging, eased cursor position.