Five full-screen 404 pages, from digits that fall and stack on springs to a split-flap departure board, stretchy pointer-following type, a terminal route trace and a searchable signpost.
Falling blocks
falling-blocks.tsxThe 404 digits and a few word blocks drop into a pile on bouncy springs; drag any block and it springs back, press it to bump it.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Kiln" | Name in the top bar and buttons. |
path | string | — | The path that wasn't found, shown in the copy. |
heading | string | — | Main heading. |
description | string | — | Supporting paragraph. |
homeHref | string | "/" | Where the brand and back button point. |
onSearch | () => void | — | Called when the search button is pressed. |
links | { label: string; href: string; hint?: string }[] | — | Helpful pages listed beside the pile. |
className | string | — | Classes for the outer section. |
Flip panels
flip-panels.tsxAn airport split-flap board where every cell rattles through the alphabet to spell the cancelled route, with live departures to pick instead.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Meridian" | Brand in the header. |
path | string | — | Missing path, spelled out on the board. |
width | number | 18 | Characters per board row. |
heading | string | — | Main heading under the board. |
description | string | — | Supporting paragraph. |
departures | { path: string; label: string; status: string }[] | — | Alternative destinations listed as departures. |
homeHref | string | "/" | Where the brand links. |
className | string | — | Classes for the outer section. |
Elastic type
elastic-type.tsxGiant 404 glyphs stretch, skew and lean toward the pointer, then snap back on jelly springs; a wobble button pokes them from the keyboard.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Pliant" | Brand in the header. |
homeHref | string | "/" | Where the brand links. |
code | string | "404" | Characters rendered as stretchy type. |
heading | string | — | Line under the digits. |
description | string | — | Supporting paragraph. |
primaryAction | { label: string; href: string } | — | Volt button. |
secondaryAction | { label: string; href: string } | — | Secondary button. |
links | { label: string; href: string }[] | — | Header navigation links. |
className | string | — | Classes for the outer section. |
Terminal trace
terminal-trace.tsxA terminal types out a route trace that fails with HTTP 404, then lists ranked suggestions and accepts real `cd`, `ls` and `help` commands.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Gantry" | Product name in the copy. |
homeHref | string | "/" | Where the back button points. |
host | string | "gantry.dev" | Host shown in the trace. |
path | string | — | The missing path being traced. |
suggestions | { path: string; title: string; match: number }[] | — | Closest pages, with a 0–100 match score. |
typingSpeed | number | 18 | Milliseconds per typed character. |
onNavigate | (path: string) => void | — | Called when a suggestion is picked or `cd <path>` is run. |
className | string | — | Classes for the outer section. |
Wayfinder
wayfinder.tsxA trail signpost whose arms swing in and sway on hover, beside a search combobox that filters pages with highlighted matches.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | "Switchback" | Brand in the header and search label. |
homeHref | string | "/" | Where the brand links. |
heading | string | — | Main heading. |
description | string | — | Supporting paragraph. |
signs | { label: string; href: string; direction: "left" | "right" }[] | — | Arms on the signpost. |
pages | { title: string; href: string; section: string; keywords?: string[] }[] | — | Searchable pages. |
onSelect | (page: WayfinderPage) => void | — | Called when a result is chosen with Enter or a click. |
className | string | — | Classes for the outer section. |
Install the whole set
Installs every 404 pages variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Every page has a real h1 that states the error; decorative digits and art are aria-hidden or labelled as a single image.
- Interactive pieces (draggable blocks, suggestions, signposts, the search combobox) are buttons or links reachable by keyboard, with arrow-key navigation where lists are involved.
- Under reduced motion, falls, flaps and stretches are skipped and content renders in its final state.