A light 404 page written as a typed letter on airmail paper. The apology types itself out, then a red 404 return to sender stamp thumps onto the sheet.
Error 404
Stockholm · Returned to sender
npx shadcn@latest add https://hyperblur.dev/r/notfound-letter.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/notfound-letter.tsx.
import { NotfoundLetter } from "@/components/hyperblur/notfound-letter"
<NotfoundLetter signature="Margot Lindqvist" />| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | Code printed on the stamp, the postage and the dateline. |
| salutation | string | "Dear reader," | First typed line. |
| paragraphs | string[] | 2 sample paragraphs | Body of the letter, typed after the salutation. |
| signature | string | "Margot Lindqvist" | Handwritten style signature that fades in when typing ends. |
| signatureRole | string | "Head of the Lost & Found desk" | Line under the signature. |
| dateline | string | "Stockholm · Returned to sender" | Small text at the top left of the sheet. |
| stampLabel | string | "Return to sender" | Text under the code inside the round stamp. |
| primary | { label: string; href: string } | { label: "Back to the homepage", href: "/" } | Primary button under the letter. |
| secondary | { label: string; href: string } | { label: "Report a broken link", href: "/contact" } | Secondary button under the letter. |
| typingSpeed | number | 1 | Typing speed multiplier. |
| accent | string | "#c2412d" | Ink color of the stamp and the airmail stripes. |
| onTypingComplete | () => void | Called once the full letter has been typed. |