A soft light follows the pointer across the face while the border brightens near the cursor. It drifts on its own until the pointer arrives.
Ship the part your users actually see.
Two minutes to install. No config, no lock-in.
npx shadcn@latest add https://hyperblur.dev/r/button-spotlight.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-spotlight.tsx.
import { ButtonSpotlight } from "@/components/hyperblur/button-spotlight"
<ButtonSpotlight accent="#2f7bff">Start building</ButtonSpotlight>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Start building" | Button label. |
| variant | "solid" | "outline" | "solid" | Dark filled surface or transparent surface with a border. |
| accent | string | "#2f7bff" | Accent color used for the focus ring, highlights and the solid variant. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |
| loading | boolean | false | Shows a spinner, sets aria-busy and blocks clicks. |
| disabled | boolean | false | Disables the button and dims it. |