Bayer-pixel 404 section: a fireball cursor scorches the glyph, burns it into embers and smoke, then reforms. Optional soft realistic fire.
"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>
)
}