Falling Text
NewPro
Words that drop into a pile under a small gravity simulation, then can be dragged and thrown around.
Click or press Enter to drop the words, then throw them
Customize
Trigger
1×
0.3
Installation
Falling Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy falling-text.tsx into components/ui and run npm install motion.
Usage
import { FallingText, type FallingTextHandle } from "@/components/ui/falling-text";
const words = useRef<FallingTextHandle>(null);
<FallingText ref={words} text="Gravity always wins" highlight={["gravity"]} trigger="view" />
<button onClick={() => words.current?.reset()}>Reset</button>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text, split into words. |
| trigger | "click" | "hover" | "view" | "click" | What makes the words fall. Click also works with Enter and Space. |
| gravity | number | 1 | Multiplier for the pull of gravity. |
| bounce | number | 0.3 | How much words bounce, from 0 to 0.9. |
| height | number | 320 | Height of the box the words fall into, in pixels. |
| highlight | string[] | [] | Words drawn in the accent color, matched without case or punctuation. |
| accentColor | string | "#ff784f" | Color of the highlighted words. |
| ref | Ref<FallingTextHandle> | — | Exposes drop() and reset(). |
| className | string | — | Extra classes for the box. |
Dependencies: motion