A pin art board drawn on canvas: the pointer presses the pins down, they glow in the accent where pushed and rise back slowly, so every stroke leaves an imprint that fades.
Leave a mark
Pins settle back in a few seconds
npx shadcn@latest add https://hyperblur.dev/r/hover-pin-board.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-pin-board.tsx.
import { HoverPinBoard } from "@/components/hyperblur/hover-pin-board"
<div style={{ height: 280 }}><HoverPinBoard><h2>Leave a mark</h2></HoverPinBoard></div>| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 13 | Distance between pins in pixels. |
| radius | number | 46 | Size of the pressing area in pixels. |
| recovery | number | 2.6 | Roughly how many seconds a pressed pin takes to rise back. |
| accent | string | "#2f7bff" | Accent color for focus rings, highlights and glows. |
| pinColor | string | "#d9d9d9" | Color of a raised pin head, as hex. |
| autoPlay | boolean | true | Draw a looping stroke across the board while nobody is touching it. The real pointer, a tap or keyboard focus takes over at once. |
| children | ReactNode | Content on top of the board. The board fills its parent, so give the parent a height. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |