A keycap button driven by a real spring: it squashes into its base while pressed, sinks deeper the longer you hold, and rebounds past rest with a wobble on release. Works with pointer, Space and Enter.
npx shadcn@latest add https://hyperblur.dev/r/button-spring-press.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-spring-press.tsx.
import { ButtonSpringPress } from "@/components/hyperblur/button-spring-press"
<ButtonSpringPress shortcut="⌘ ↵" onPress={() => deploy()}>Deploy</ButtonSpringPress>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Deploy" | Button label. |
| shortcut | string | "⌘ ↵" | Space separated keys drawn as small keycaps. Empty string hides them. |
| variant | "accent" | "dark" | "light" | "accent" | Accent cap, graphite cap or white cap. |
| accent | string | "#2f7bff" | Cap color for the accent variant, glow and focus ring. |
| depth | number | 6 | Travel of the cap in pixels. |
| stiffness | number | 520 | Spring stiffness. Higher snaps back faster. |
| damping | number | 16 | Spring damping. Lower wobbles longer. |
| chargeTime | number | 700 | Milliseconds of holding for a full charge. |
| onPress | (strength: number) => void | undefined | Called on release inside the button with the hold strength from 0 to 1. |
| disabled | boolean | false | Disables interaction and dims the control. |