Falling Text

Characters fall with gravity + bounce creating a playful entrance.

Default

Every prop is wired to the controls underneath. Words are physics bodies, so you can grab and throw them once they fall.

UI Library is a library of animated and interactive Vue components designed to streamline UI development and simplify your workflow.

Hover Me

Trigger

Gravity0.56

Mouse Constraint Stiffness0.9

Prop	Type	Default	Description
`text`	`string`	`""`	The text content to display and eventually animate.
`highlightWords`	`string[]`	`[]`	List of words or substrings to apply a highlight style.
`highlightClass`	`string`	`"highlighted"`	CSS class name for highlighted words.
`trigger`	`'click' \| 'hover' \| 'auto' \| 'scroll'`	`"auto"`	Defines how the falling effect is activated.
`backgroundColor`	`string`	`"transparent"`	Canvas background color for the physics world.
`wireframes`	`boolean`	`false`	Whether to render the physics bodies in wireframe mode.
`gravity`	`number`	`1`	Vertical gravity factor for the physics engine.
`mouseConstraintStiffness`	`number`	`0.2`	Stiffness for the mouse drag constraint.
`fontSize`	`string`	`"1rem"`	Font size applied to the text before it falls.

Keyboard shortcuts and ARIA behavior.

The words are plain text in the DOM until the effect starts, so screen readers read the sentence in order.
The effect is pointer driven: with the click or hover trigger it does not start from the keyboard, so use the auto trigger when the text must always fall.