Not found

Installation

Usage

In Next.js, render it from app/not-found.tsx. That file handles unknown URLs and every notFound() call, and Next.js answers with a 404 status.

Copyimport Link from "next/link";
 
import { NotFound } from "@/components/asciicn/not-found";
import { Button } from "@/components/ui/button";
 
export default function NotFoundPage() {
  return (
    <main className="flex min-h-svh flex-col items-center justify-center">
      <NotFound
        actions={
          <>
            <Button asChild>
              <Link href="/">Back home</Link>
            </Button>
            <Button asChild variant="outline">
              <Link href="/docs">Browse the docs</Link>
            </Button>
          </>
        }
      />
    </main>
  );
}

The code is set in the page's own typeface at a heavy weight, then sampled into glyphs. Each sample knows how far it sits from the edge of a digit. Two gusts per loop sweep across the code and wear its edges down a few samples deep, so it changes shape without ever breaking up. Grains lift off the tops and right-hand faces, arc downwind in accent and fade as they settle, and the hole each one leaves fills back in as it lands. Faint wind ripples run through the sand. The loop lasts 16 seconds.

The terminal line types $ cd <path>, answers cd: no such file or directory: <path> and waits at a blinking cursor. Without path it reads window.location.pathname after mount, so the server markup and the first client render match. command and message change the two lines, for a failed request rather than a missing page:

Copy<NotFound
  code="500"
  title="Something broke"
  path="/api/orders"
  command="curl -f"
  message="(22) the server returned 500"
/>

Examples

Something broke

A 500 page with a curl line, a red accent and a stronger wind.

Inside a card

compact shrinks the art, the terminal line and the type, for a missing record inside an app.

Classic ramp

The standard charset at a 12px cell. The sand thins from @ to . toward its edges, and the grains in flight are . and :.

Props

Notes

• The art is a canvas of real glyphs and is labelled with the code (role="img"). The terminal line, the title and the description are DOM text, so they are readable, selectable and translatable. Screen readers get the error line once, not letter by letter.
• The motion is a function of time on a 16 second loop, so a still frame needs no history. Under prefers-reduced-motion the art holds the stillTime frame, the terminal line prints at once and the cursor stays lit.
• The art pauses offscreen and in hidden tabs, and follows the theme: ink glyphs on the page, the accent from the --ascii-color-* tokens.
• The code fits its box, so a three-digit code and a word such as "gone" both work. Short codes read best.