Misfire
A full-width 404 section in three variants — a knock-over-able physics "404" pile (Scree), a sonar scope behind a "Signal lost" readout (Sonar), and a split-flap board that keeps trying the route and lands on NOT FOUND (Terminus). Real h1, labelled search form, home link, suggestion chips; settled frames under reduced motion.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/misfireManual — install dependencies, then copy the source
npm install motion matter-jsProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | MisfireVariant | "pile" | Visual treatment: - pile — a "404" whose digits are physics bodies you can knock over and fling. - signal — a sonar scope behind a "Signal lost" readout with a blinking status. - board — a split-flap board that keeps trying the path and lands on NOT FOUND. |
| path | string | "/old-page" | The requested path that could not be found — shown in the copy/visual. |
| homeHref | string | "/" | Primary "Back home" link target. |
| homeLabel | string | "Back home" | Label of the home link. |
| onSearch | (query: string) => void | Called with the trimmed query when the search form is submitted. When omitted the form submits natively (GET ?q= to homeHref). | |
| searchPlaceholder | string | "Search the site" | Placeholder of the search field. |
| suggestions | MisfireSuggestion[] | [] | Link chips offered as likely destinations. |
| title | string | "Page not found" | Real h1 text — always present for assistive tech and SEO. |
| description | string | per-variant line | Short copy under the heading. |
| accentColor | string | "#7dd3fc" | The single accent hue (pile highlight digit, scope phosphor, status lamp). |
| cycle | number | 4000 | Board variant: ms for one full try-and-fail cycle. |
| paused | boolean | false | Freeze every animated piece at its settled frame. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "title" | "onSubmit"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.