Drag the button back against a stretching band and let go. It slings forward, overshoots and settles on a spring.
Ready to go out?
Pull the band back, then let go.
npx shadcn@latest add https://hyperblur.dev/r/micro-sling-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-sling-button.tsx.
import { MicroSlingButton } from "@/components/hyperblur/micro-sling-button"
<MicroSlingButton onSling={(power) => console.log(power)}>Ship it</MicroSlingButton>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Sling" | Button label. |
| maxPull | number | 72 | Farthest the button can be pulled back, in pixels. Drags beyond it meet rubber-band resistance. |
| accent | string | "#2f7bff" | Button fill, band and focus ring color. |
| disabled | boolean | false | Block interaction and dim the button. |
| idle | boolean | true | Replay a scripted pull and release until the pointer arrives. |
| onSling | (power: number) => void | Called on release or on a tap or key press with a power from 0 to 1. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element that holds the band and the button. |