A split 404 page with a giant code torn by chromatic glitch slices, a scanline sweep and a terminal log that types out the failed request.
The link may be broken, or the page was moved during our last deploy. Head back home, or tell us where you found it.
npx shadcn@latest add https://hyperblur.dev/r/notfound-glitch.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/notfound-glitch.tsx.
import { NotfoundGlitch } from "@/components/hyperblur/notfound-glitch"
<NotfoundGlitch title="This page slipped through the cracks" primary={{ label: "Back to home", href: "/" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | The large glitching code. |
| eyebrow | string | "Error 404 · signal lost" | Small pill above the headline. |
| title | string | "This page slipped through the cracks" | Main headline. |
| subtitle | string | "The link may be broken..." | Helper text under the headline. Hidden when empty. |
| lines | string[] | ["$ open /reports/q3-legacy", ...] | Terminal lines typed one after another. Pass an empty array to hide the terminal. |
| primary | { label: string; href: string } | { label: "Back to home", href: "/" } | Main button, usually the homepage. |
| secondary | { label: string; href: string } | { label: "Report broken link", href: "mailto:..." } | Secondary button for reporting the broken link. |
| onReport | () => void | Called when the report button is clicked. | |
| accent | string | "#ff3864" | Glitch channel, status dot and second terminal line color. |
| className | string | Extra classes on the section. | |
| style | CSSProperties | Inline styles on the section. |