A 404 page with a flickering neon code and an unplugged cable whose plug and socket throw sparks. The retry button plugs it back in with a short reconnect animation.
We couldn't connect you to that page. It may have been moved or deleted, or the address has a typo.
npx shadcn@latest add https://hyperblur.dev/r/notfound-broken-plug.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/notfound-broken-plug.tsx.
import { NotfoundBrokenPlug } from "@/components/hyperblur/notfound-broken-plug"
<NotfoundBrokenPlug onRetry={() => console.log("retry")} accent="#ffb020" />| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | Neon code above the illustration. Each character flickers on its own. |
| title | string | "Looks like this link came unplugged" | Main headline. |
| subtitle | string | "We couldn't connect you to that page..." | Helper text under the headline. Hidden when empty. |
| retryLabel | string | "Retry connection" | Label of the retry button. |
| retryMessage | string | "Reconnected. The line is fine, the page just isn't there." | Status message shown after each retry. |
| primary | { label: string; href: string } | { label: "Go to homepage", href: "/" } | Homepage button. |
| secondary | { label: string; href: string } | { label: "Report a problem", href: "mailto:..." } | Text link for reporting the problem. |
| onRetry | () => void | Called when the retry animation starts. | |
| onReport | () => void | Called when the report link is clicked. | |
| accent | string | "#ffb020" | Neon glow, sparks and retry button color. |
| className | string | Extra classes on the section. | |
| style | CSSProperties | Inline styles on the section. |