Falling Text

`<pura-falling-text>` is the React Bits style falling text: on trigger (hover, click or scroll into view) every word of the slotted sentence lets go, falls under gravity, bounces off the container floor and stacks into a pile. The physics is a tiny in-house 2D loop (gravity, restitution, wall and floor collision, simple stacking) driven by requestAnimationFrame that only updates each word span's transform, so there is no canvas and no external engine. `trigger` picks what releases the words, `gravity` and `restitution` tune the fall and the bounce, `scatter` the sideways kick at release. Release velocities are seeded from the text itself, so the same sentence always falls the same way. SSR and pre-JS render the sentence intact and readable; the animated copy is aria-hidden while the original stays the accessible text. Reduced motion never drops anything. Each instance registers in `window.__puraFallingTexts` by `data-pura-id` with `{ trigger, words, drop, reset }`, and mirrors its state in `data-pura-falling-state`.

Preview

<!-- hero headline that collapses on hover -->
<pura-falling-text style="font-size: 2rem; font-weight: 700; --pura-falling-text-height: 40vh;">
  Everything you build eventually comes down.
</pura-falling-text>

<!-- drops once when scrolled into view, heavier and less bouncy -->
<pura-falling-text trigger="view" gravity="1.6" restitution="0.25" scatter="0.4" style="--pura-falling-text-height: 240px;">
  Gravity always wins in the end.
</pura-falling-text>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/falling-text.js"></script>

import "./pura/lib/falling-text.js";