Vibeset

Falling text

Before falling, the words are normal paragraph text. On release, where each one sits is measured and it moves to absolute position in that very spot in the same frame: there is no jump, and since they stay in the DOM in order, a reader reads the whole sentence wherever each word ends up. The physics is written here, with no library: axis-aligned boxes that fall with gravity, stay inside the box and resolve collisions pairwise along the axis where they overlap least, sharing velocities with the bounce and repeating several times per step, which is what stops a pile from sinking. The step is fixed and real time is spent in chunks of that size; when everything is almost still, the loop stops. You can grab a word and throw it, and it is released with a button as well as with a click.

And the React Bits original: Falling Text

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Falling Text, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For a playful moment on a creative landing: a sentence that falls apart when something happens. Not for text that has to be read.

Watch out for

It grabs attention and reads badly. Put the real text elsewhere on the page and keep this as decoration. It brings matter-js physics (MIT, 0.9 MB installed).

Accessibility

It mentions reduced motion but carries not a single aria attribute: a screen reader gets loose letters or words.