Dithered 404

Component 18

About

Bayer-pixel 404 section: a fireball cursor scorches the glyph, burns it into embers and smoke, then reforms. Optional soft realistic fire.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dithered 404 to your project and fits it to your theme.

Code

How Dithered 404 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

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

const settings = {
  color: "#18181B",
  pixelSize: 4,
  dither: true,
  interactive: true,
}

// The stock light/dark colors. While the color is still a stock value, the
// component follows the page theme on its own.
const STOCK_COLORS = ["#18181b", "#e4e4e7"]

export default function Dithered404Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  const stock = STOCK_COLORS.includes(s.color.trim().toLowerCase())

  return (
    <div className="flex min-h-[520px] w-full items-center justify-center bg-background p-4">
      <div className="relative h-[480px] w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-background">
        <Dithered404
          className="absolute inset-0"
          color={stock ? undefined : s.color}
          pixelSize={s.pixelSize}
          dither={s.dither}
          interactive={s.interactive}
        />
      </div>
    </div>
  )
}