On hover the label slides left while an arrow slides in beside it. Clicking loops the arrow out the right edge and back in.
Why the slow web is coming back
npx shadcn@latest add https://hyperblur.dev/r/button-arrow-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-arrow-reveal.tsx.
import { ButtonArrowReveal } from "@/components/hyperblur/button-arrow-reveal"
<ButtonArrowReveal onClick={() => router.push("/story")}>Read the story</ButtonArrowReveal>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Read the story" | Button label. |
| variant | "solid" | "outline" | "solid" | Accent pill or a bordered transparent 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. |
| loading | boolean | false | Shows a spinner, sets aria-busy and blocks clicks. |
| disabled | boolean | false | Disables the button and dims it. |