62

Dithered 404

A Bayer-pixel 404 section — the pointer becomes a dithered fireball that scorches the glyph, burns it into embers and smoke, then reforms.

Bold 404 printed as ordered Bayer pixels — or turn Dither off for a soft, realistic fire like Shader Fire. Move over the type: the cursor is a coal. Linger and the glyph scorches dark, then burns into embers and smoke. Leftover type stays put until you burn it. After most of the number is gone, it assembles again and you can burn it once more. Press d to switch theme.

Lost page
404
Props
#18181B
Pixel size
4

Ordered Bayer pixels — off is a soft realistic fire

Fireball follows the pointer

Installation

pnpm dlx shadcn@latest add @23rd/dithered-404

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/dithered-404

Usage

Pin it inside a relatively positioned section. Default theme="auto" follows shadcn / next-themes (class on <html>). Pass color to set the glyph ink to any hex.

"use client"

import { Dithered404 } from "@/components/ui/dithered-404"

export function NotFound() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden bg-background">
      <Dithered404 color="#E8B45A" />
      <div className="relative z-10 flex min-h-svh flex-col items-center justify-end px-6 pb-16 text-center">
        <p className="text-sm text-muted-foreground">
          This page could not be found.
        </p>
      </div>
    </section>
  )
}

Force a palette if the parent theme should not drive it:

<Dithered404 theme="light" />
<Dithered404 theme="dark" />

Honors prefers-reduced-motion (static 404, no fireball).

Print the same scene as a soft fire instead of Bayer pixels:

<Dithered404 dither={false} />

Props

PropTypeDefault
colorstringtheme ink
pixelSizenumber4
brushnumber28
interactivebooleantrue
ditherbooleantrue
theme"light" | "dark" | "auto"auto
classNamestringReact only
classstringSvelte only