A chunky 3D button that tilts toward the pointer with a moving glare and a shadow that shifts opposite the tilt. It sways on its own until touched.
Hyperblur Pro
$12/mo
Every effect and template.
npx shadcn@latest add https://hyperblur.dev/r/button-tilt-glare.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-tilt-glare.tsx.
import { ButtonTiltGlare } from "@/components/hyperblur/button-tilt-glare"
<ButtonTiltGlare variant="solid" tilt={14}>Unlock Pro</ButtonTiltGlare>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Button label. |
| variant | "solid" | "light" | "dark" | "solid" | Face and edge colors. |
| accent | string | "#2f7bff" | Brand color used for fills, borders, rings and the focus outline. |
| size | "sm" | "md" | "lg" | "md" | Height, padding and font size preset. |
| tilt | number | 14 | Maximum rotation in degrees at the button edge. |
| sway | boolean | true | Keeps a slow idle sway going while the pointer is away. |
| loading | boolean | false | Shows a spinner, sets aria-busy and ignores clicks while true. |
| disabled | boolean | false | Dims the button and removes it from interaction. |