A terminal style button printed on a dot grid: a scan beam sweeps it while idle, dots light up in a halo around the cursor, and a click sends a bright ring of dots rippling out from the pointer.
npx shadcn@latest add https://hyperblur.dev/r/button-dot-matrix.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-dot-matrix.tsx.
import { ButtonDotMatrix } from "@/components/hyperblur/button-dot-matrix"
<ButtonDotMatrix status="v2.4.1">Deploy to edge</ButtonDotMatrix>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Deploy to edge" | Button label. |
| accent | string | "#3dffa2" | Color of the lit dots, the status LED and the tag. |
| pitch | number | 6 | Distance in pixels between dots in the grid. |
| status | string | "v2.4.1" | Small tag 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. |