Chromatic slices of the label jitter on hover and keyboard focus, then snap clean when the pointer leaves. A brief glitch also fires now and then while idle.
uplink-07 stopped answering
retrying in 00:12, 3 attempts left
npx shadcn@latest add https://hyperblur.dev/r/button-glitch-hover.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-glitch-hover.tsx.
import { ButtonGlitchHover } from "@/components/hyperblur/button-glitch-hover"
<ButtonGlitchHover accent="#2f7bff">Reconnect</ButtonGlitchHover>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Reconnect" | Button label. |
| variant | "outline" | "solid" | "outline" | Dark outlined button or an accent filled button. |
| 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. |
| idle | boolean | true | Plays a short glitch burst on its own while the button is untouched, so it looks alive before any interaction. |
| loading | boolean | false | Shows a spinner, sets aria-busy and blocks clicks. |
| disabled | boolean | false | Disables the button and dims it. |