Falling Text
Text Effects
Matter.js-powered word physics text where words break apart, fall, bounce, and can be dragged with the mouse.
Loading preview...
Customize
Trigger:
Text
Gravity0.7
Mouse Stiffness0.9
Font Size
Wireframes
Background
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | Sentence rendered and converted into physical word bodies. |
highlightWords | string[] | [] | Words (prefix matching) to highlight before the physics starts. |
highlightClassName | string | 'text-ignite font-semibold' | Tailwind classes used for highlighted words. |
trigger | 'auto' | 'scroll' | 'click' | 'hover' | 'auto' | How the effect starts. |
backgroundColor | string | 'transparent' | Matter renderer background color. |
wireframes | boolean | false | Render Matter.js wireframes for debugging. |
gravity | number | 1 | Vertical gravity strength. |
mouseConstraintStiffness | number | 0.2 | Drag stiffness when grabbing words. |
fontSize | string | '1rem' | Font size of the text before split. |
className | string | '' | Additional classes for the outer container. |