A lost in space 404 page with an illustrated astronaut that floats and slowly spins over an outlined code, twinkling stars, a glowing planet horizon and pointer parallax.
Error 404
The page you were looking for drifted out of orbit. It may have been moved, renamed, or it never launched at all.
npx shadcn@latest add https://hyperblur.dev/r/notfound-astronaut.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/notfound-astronaut.tsx.
import { NotfoundAstronaut } from "@/components/hyperblur/notfound-astronaut"
<NotfoundAstronaut title="Lost in space" accent="#8b5cf6" />| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | Outlined code behind the astronaut. |
| eyebrow | string | "Error 404" | Small label above the headline. |
| title | string | "Lost in space" | Main headline. |
| subtitle | string | "The page you were looking for drifted out of orbit..." | Helper text under the headline. Hidden when empty. |
| primary | { label: string; href: string } | { label: "Take me home", href: "/" } | Main button. |
| secondary | { label: string; href: string } | { label: "Report this link", href: "mailto:..." } | Secondary button for reporting the link. |
| onReport | () => void | Called when the report button is clicked. | |
| stars | number | 90 | Number of stars. Positions are deterministic. |
| parallax | boolean | true | Shift the star layers and astronaut with the pointer. Ignored for touch. |
| accent | string | "#8b5cf6" | Planet glow, visor tint and primary button color. |
| className | string | Extra classes on the section. | |
| style | CSSProperties | Inline styles on the section. |