The label is stacked above an alternate label. Hover rolls the letters upward one by one to reveal the second line.
Atlas & Oak
We take on six projects a year and answer every email.
npx shadcn@latest add https://hyperblur.dev/r/button-stacked-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-stacked-text.tsx.
import { ButtonStackedText } from "@/components/hyperblur/button-stacked-text"
<ButtonStackedText hoverLabel="Let's go">Get started</ButtonStackedText>| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | "Get started" | Resting label. Also used as the accessible name unless aria-label is set. |
| hoverLabel | string | "Let's go" | Label revealed on hover and focus. |
| stagger | number | 24 | Delay between letters in milliseconds. |
| variant | "outline" | "solid" | "outline" | Bordered transparent pill or accent filled pill. |
| accent | string | "#2f7bff" | Accent color used for the focus ring, highlights and the solid variant. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |
| idle | boolean | true | Plays a short roll on its own while the button is untouched, so it looks alive before any interaction. |
| loading | boolean | false | Shows a spinner, sets aria-busy and blocks clicks. |
| disabled | boolean | false | Disables the button and dims it. |