FallingText

1.0.0

Marketing headline whose words fall with a physics-like tumble on click, hover, auto, or scroll, with semantic highlights and a static reduced-motion reading.

npx jabkit add falling-text

Component Data

ID: falling-text
Category: marketing
Version: 1.0.0
Added: 2026-09-09
Type: block
Keyboard nav: Yes
Reduced motion: Yes

marketingtextanimationheadlinephysicsfallinggravityinteractive

Dependencies

clsx
tailwind-merge

Examples

Default

<div className="bg-background text-foreground">
      <FallingText {...fallingTextMocks.default} />
    </div>

Variants

<div className="bg-background text-foreground">
      <FallingText {...fallingTextMocks.alternate} />
    </div>