A dark 404 section where a tiny pixel explorer wanders a grid maze looking for the exit. Point anywhere on the grid, or use the arrow keys, and it finds a path toward you.
This page moved, or it never existed. Our little explorer is looking for it too. Point anywhere on the grid to guide the search.
npx shadcn@latest add https://hyperblur.dev/r/notfound-maze.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/notfound-maze.tsx.
import { NotfoundMaze } from "@/components/hyperblur/notfound-maze"
<NotfoundMaze title="Lost in the grid" accent="#34d399" />| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | Error code shown in the badge and the map label. |
| title | string | "You wandered off the map" | Main heading. |
| subtitle | string | "This page moved, or it never existed..." | Supporting paragraph. |
| hint | string | "Move the pointer, or use the arrow keys" | Small hint under the buttons. |
| primary | { label: string; href: string } | { label: "Take me home", href: "/" } | Primary button. |
| secondary | { label: string; href: string } | { label: "Browse the docs", href: "/docs" } | Secondary button. |
| cols | number | 15 | Columns in the maze grid (minimum 5). |
| rows | number | 9 | Rows in the maze grid (minimum 5). |
| speed | number | 1 | Walking speed multiplier. |
| accent | string | "#34d399" | Color of the explorer, the exit and the target marker. |
| onExitReached | () => void | Called each time the explorer steps onto the exit cell. |