Browse components
Falling Text
A paragraph whose words tumble down and pile up with real physics on hover, click or view, then can be grabbed and tossed around.
Installation
npx shadcn@latest add @glint-ui/falling-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/falling-text.json
Usage
import { FallingText } from "@/components/ui/falling-text";
<div className="h-96">
<FallingText trigger="hover" highlightWords={["move", "ship"]} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "React components that move you. Drop them in, drag them around, and ship interfaces people remember." | Paragraph to drop. |
| highlightWords | string[] | ["move","drag","ship","remember"] | Words drawn in the accent color (punctuation ignored). |
| trigger | "hover" | "click" | "view" | "auto" | "hover" | What drops the words. `auto` drops them right after mount. |
| gravity | number | 1 | Gravity strength. |
| restitution | number | 0.4 | Bounciness. |
| highlightColor | string | "#a3e635" | Accent color for highlighted words. |
| className | string | — | Extra classes for the root element. |