A 404 page where the zero is a ringed planet and the two fours orbit it in 3D, passing behind and in front. A mission HUD with a radar shows the lost path, over a parallax starfield with a passing comet.
We lost the signal somewhere past the old docs. The page may have moved, or the link was mistyped before launch. Requested /docs/v1/telemetry-api.
npx shadcn@latest add https://hyperblur.dev/r/notfound-orbit.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/notfound-orbit.tsx.
import { NotfoundOrbit } from "@/components/hyperblur/notfound-orbit"
<NotfoundOrbit path="/old-page" onReport={(path) => console.log(path)} />| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | Three characters: the middle one is the planet, the outer two orbit. |
| title | string | "This page drifted out of orbit" | Main heading. |
| message | string | Paragraph under the heading. | |
| path | string | "/docs/v1/telemetry-api" | Missing path shown in the HUD and the text. |
| primary | { label: string; href: string } | { label: "Return to base", href: "/" } | Main button. |
| secondary | { label: string; href: string } | { label: "Search the docs", href: "/docs" } | Second button. |
| onReport | (path: string) => void | Called by the report link. | |
| accent | string | "#fb923c" | Planet, radar and glow color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |