A blueprint style button whose outline is drawn around its perimeter on hover, led by a bright comet that keeps circling afterwards. Corner ticks spring outward and a click flashes the face.
Parametric CAD that runs in a browser tab.
npx shadcn@latest add https://hyperblur.dev/r/button-trace.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-trace.tsx.
import { ButtonTrace } from "@/components/hyperblur/button-trace"
<ButtonTrace shortcut="R">Request access</ButtonTrace>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Request access" | Button label. |
| accent | string | "#7fb3ff" | Color of the traced line, the comet glow and the corner ticks. |
| radius | number | 4 | Corner radius in pixels, followed exactly by the traced line. |
| duration | number | 0.9 | Seconds the outline takes to draw. |
| shortcut | string | "R" | Keyboard hint shown after the label. Pass an empty string to hide it. |
| size | "sm" | "md" | "lg" | "md" | Font size preset; padding and every inner part scale with it. |