On hover the label slides away and a looping ticker of the same words runs through a soft edge fade. A diagonal arrow chip swaps for a fresh arrow at the same moment.
Brand systems for hardware startups.
npx shadcn@latest add https://hyperblur.dev/r/button-marquee.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-marquee.tsx.
import { ButtonMarquee } from "@/components/hyperblur/button-marquee"
<ButtonMarquee accent="#c8ff4d">Book a demo</ButtonMarquee>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Book a demo" | Button label. |
| marquee | string | children | Text repeated in the ticker. Falls back to the label when it is a string. |
| accent | string | "#c8ff4d" | Color of the arrow chip, the separators and the hover glow. |
| speed | number | 7 | Seconds for one full loop of the ticker. |
| size | "sm" | "md" | "lg" | "md" | Font size preset; padding and every inner part scale with it. |