Drop Text | Clover UI

Dropping into place.

Customize

Split by

Text

Speed1.0

Stagger0.065

Bounce0.35

Drop distance40

Installation

pnpm dlx shadcn@latest add @clover-ui/drop-text

import { DropText } from "@/components/drop-text";

<DropText stagger={0.065}>Dropping into place.</DropText>

PropType

Default"words"

How far each piece falls, in pixels.

Default40

Default1

Default0.5

Default0.05

Default0

Set 0 for no bounce.

Default0.35

Classes added once the text lands.

Defaulttrue

Waits until the text scrolls into view.

Defaultfalse

Defaulttrue