A metallic, glass or blue button with a specular highlight that slides across its surface, a lit edge bevel and a subtle tilt that follow the pointer. A scripted highlight plays until the pointer arrives.
Studio plan
Unlimited projects, one calm price.
npx shadcn@latest add https://hyperblur.dev/r/button-specular.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-specular.tsx.
import { ButtonSpecular } from "@/components/hyperblur/button-specular"
<ButtonSpecular tone="blue">Start free trial</ButtonSpecular>| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "chrome" | "glass" | "blue" | "chrome" | Surface treatment. Glass blurs whatever sits behind the button. |
| tilt | number | 6 | Maximum tilt in degrees toward the pointer. Use 0 to keep the button flat. |
| shine | number | 1 | Strength of the highlight, streaks and edge light from 0 to 1. |
| idle | boolean | true | Keep a slow scripted highlight moving while the pointer is away. |
| children | ReactNode | Button label. Icons and text both work. | |
| ...rest | ButtonHTMLAttributes<HTMLButtonElement> | Forwarded to the button element, including onClick and disabled. |