Animation

Falling Text

Words fall like physical bodies — gravity, wall / floor collision, body-to-body bouncing, and cursor drag-to-pick-up. Words start at their typeset position and release into the simulator on trigger. Reactbits' original uses matter-js; this port ships a minimal in-house AABB physics simulator so there's no extra runtime dependency.

Angular adaptation of an effect by David Haz / reactbits.dev.

Import

import { WrFallingText } from 'ngwr/falling-text';

Playground

Hover this block. Each word falls and you can drag them around.
<wr-falling-text
  text="Hover this block. Each word falls and you can drag them around."
  trigger="hover"
  [gravity]="980"
  fontSize="1.5rem"
/>

Customize

Trigger
Gravity
980
Font Size
Text

API

NameDescriptionTypeDefault
textrequiredText to render. Words are separated by spaces.string— (required)
highlightWordsPrefix-match keywords. Matching words get the wr-falling-text__word--hl class.readonly string[][]
triggerWhen to release the words into the simulator.'auto' | 'scroll' | 'hover' | 'click''auto'
gravityGravity in pixels/sec².number980
fontSizeFont size as a CSS length.string'1rem'
2022 – 2026 © Roman Khegayv12.0.0