A glossy gummy button you can grab and pull: the body stretches toward the pointer with rubber-band resistance and wobbles back on a spring when released. It also leans slightly toward the cursor on hover.
Peach Fuzz Hoodie
Heavyweight fleece · Unisex
npx shadcn@latest add https://hyperblur.dev/r/button-elastic-stretch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-elastic-stretch.tsx.
import { ButtonElasticStretch } from "@/components/hyperblur/button-elastic-stretch"
<ButtonElasticStretch accent="#ff5c8a">Add to cart</ButtonElasticStretch>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Add to cart" | Button label. |
| accent | string | "#ff5c8a" | Base color of the candy body and its colored shadow. |
| stretch | number | 1 | How strongly the body deforms as it is pulled. 0 keeps it rigid and only moves it. |
| icon | ReactNode | bag icon | Icon before the label. Pass null to hide it. |
| size | "sm" | "md" | "lg" | "md" | Font size preset; padding and every inner part scale with it. |