Error39: Calm 404

A calm 404: an oversized ghosted code, an apology that settles in word by word, a pill back to the front door, and a short row of small-caps links to the places people were probably looking for.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/error39?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/error39?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/error39.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports error39Demo alongside the block: the exact props behind the preview above. Spread it to get a working error page in one line.

import { Error39, error39Demo } from "@/components/beste/block/error39";

export default function Page() {
  return <Error39 {...error39Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Error39 } from "@/components/beste/block/error39";

export default function Page() {
  return (
    <Error39
      code="404"
      heading="This page has gone for a walk."
      description="It may have moved, or it may never have been here."
      button={{ label: "Back to the front door", href: "/", tone: "dark" }}
      links={[
        { label: "Book a first session", href: "/book" },
        { label: "Read the journal", href: "/journal" },
      ]}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Everything runs on animate with trigger="mount" rather than on scroll. An error page is one screen tall by definition, so waiting for a scroll into view would leave most of it invisible.
• code is a free string, not a number, so "404", "500" or "Not found" all render the same way with no parsing.
• It is set at text-foreground/20, so the code reads as a watermark behind the message rather than as the headline; the h1 is the sentence, which is what a screen reader should announce first.
• The copy waits on 0.5 + heading.split(" ").length * 0.07, matching the word stagger, so the explanation lands as the last word of the message settles.
• The shortcut links wrap with separate row and column gaps, so a long list breaks into tidy lines on a phone instead of one cramped row.
• Their arrows lift only under motion-safe:, so the affordance is dropped for reduced motion while the links keep working.
• The section is min-h-svh and centres its content on both axes, so it fills the viewport whether or not your layout wraps it in a header and footer.