Snake 404

Installation

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

Or from the public GitHub registry:

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

Usage

Pin it inside a relatively positioned section. The snake finds its own way to the nearest pellet. Each meal travels down the body as a bulge, and the snake grows by one when the bulge reaches the tail.

"use client"

import { Snake404 } from "@/components/ui/snake-404"

export function NotFound() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden bg-background">
      <Snake404 />
      <div className="pointer-events-none 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>
  )
}

Click the field, then steer with the arrow keys or WASD. On touch screens, swipe. Hitting a wall or the snake's own body ends the game: the snake blinks and autopilot starts again. Press Esc, or move focus away, to hand control back. Keep overlays pointer-events-none so clicks reach the field.

The green Nokia screen:

<Snake404 lcd />

Other status codes. Only the digits 0–9 are drawn.

<Snake404 code="500" />

Step cell by cell like the phone did:

<Snake404 smooth={false} speed={10} />

Props