A sentence with a tinted pill whose word tumbles out and in while the pill eases to the new width and color. A hairline inside the pill shows the time until the next word.
npx shadcn@latest add https://hyperblur.dev/r/text-swap-pill.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-swap-pill.tsx.
import { TextSwapPill } from "@/components/hyperblur/text-swap-pill"
<TextSwapPill prefix="Made for" words={["startups", "studios", "teams"]} className="text-4xl font-semibold" />| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["founders", "designers", "engineers", "agencies"] | Words shown inside the pill in order. |
| colors | string[] | ["#2f7bff", "#f97316", "#22c55e", "#a855f7"] | Pill color for each word, repeated when there are more words than colors. |
| prefix | string | "Built for" | Text before the pill. |
| suffix | string | "" | Text after the pill. |
| interval | number | 2.4 | Seconds each word stays. |
| progress | boolean | true | Show the countdown hairline inside the pill. |
| pauseOnHover | boolean | true | Hold the current word while the pointer is over the sentence. |