ComponentsKinetic
Kinetic beat
Words hit on a beat.
Installation
$ npx shadcn@latest add @textlab/kinetic-beatNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { KineticBeat } from "@/components/textlab/kinetic-beat/kinetic-beat";
<KineticBeat text="Make it loud" bpm={128} variant="slam" />Variants
popslambounceProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | Words to hit, one per beat. |
| variant | "pop" | "slam" | "bounce" | "pop" | Scale up with overshoot, crash down from large, or hop in. |
| bpm | number | 120 | Beats per minute. |
| loop | boolean | true | Start over after the last word. |
| rest | number | 2 | Silent beats at the end of each loop. |
| as | ElementType | "div" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Music, events and launch teasers.
- Short punchy slogans of three to six words.
Skip it
- Information people need to read at their own pace.
- Long sentences.
Accessibility and motion
Accessibility
- The whole sentence is read once from a hidden copy.
- Pauses when scrolled out of view.
Motion
- One word per beat; at 120 BPM that is two words a second.
- Exits are quick so each hit lands clean.
Reduced motion. The sentence appears whole and still.
Performance
- One interval and one animated word at a time.