# 404 (Moonarc)

A 404 page: the code scrambles into place from random digits, rings spread slowly behind it, and the headline, copy and one link home arrive in three beats.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/not-found-section` (license key required)
- Tier B · category section · trigger load
- Readout: `<NotFoundSection code="404">`
- Browser support: widely (every browser)
- Measured cost: 0 B JS of its own · uses TextScramble + runtime + Reveal (with dependencies 3.9 kB raw; CSS 9.9 kB raw)
- Page: https://moonarc.dev/components/not-found-section/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `level` | `1 | 2` | `1` | Heading level of the headline: 1 on a page's own hero, 2 under another h1 (a demo, or a block further down). |
| `code` | `string` | `'404'` | The code; scrambles from digits. |
| `headline` | `string` | `'Page not found.'` | Headline. |
| `copy` | `string` | none | A sentence. |
| `home` | `{ href, label }` | `{ href: '/', label: 'Back home' }` | The one link. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'start' | 'center'` | `'center'` | Text alignment. |

## Usage

```astro
---
// src/pages/404.astro
import NotFoundSection from '@/components/moonarc/pro/NotFoundSection.astro';
---
<NotFoundSection headline="Page not found." copy="This page has moved or never existed." home={{ href: '/', label: 'Back home' }} />
```

## Reduced motion

The code is shown; rings are static; text fades.

## With ClientRouter

Inherits every part; nothing to wire.

## Craft

- Scramble at 120 ms per digit: slow, because three digits at 30 ms would be over before the eye arrived.
- Rings at 5 s with 5 in flight, the slowest ripple in the library, so the page feels calm.
- One link, home: a lost reader needs one clear way back.

## Replaces

- 404 pages (Tailwind Plus)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/not-found-section` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: text-scramble, ripple, reveal.