A word in a sentence that rolls to the next on a 3D drum, with the words before and after curving away above and below.
pnpm dlx shadcn@latest add @latheui/word-drumPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Word Drum is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native span attributes. It sits inline and inherits the text style around it.
| Prop | Type | Default | Description |
|---|---|---|---|
| words* (required) | string[] | — | The words, in order. |
| interval | number | 2200 | Milliseconds each word stays. |
| faces | number | 10 | Faces on the drum. More faces make a gentler curve; the words repeat to fill them. |
| direction | "up" | "down" | "up" | Which way the drum rolls. |
| peek | number | 0.55 | How much of the neighbouring words shows, from 0 to 1. |
| pauseOnHover | boolean | true | Stop while the pointer is over it. |
| label | string | — | Read out instead of the changing words. The words joined with "or" by default. |
| curve | Curve | spring with a little give | How the drum turns. Any curve from the Animation Lab. |
| duration | number | — | Milliseconds, for curves that are not springs. |
<WordDrum words={words} interval={1400} faces={16} peek={0.2} curve={{ type: "expo", direction: "out" }} duration={600} />