vibecodng.com

Free MCP betaIndex and tools live

Measured entry

8bitcn-not-found-brick-breaker

formskeuomorphism

A client-side error page that turns a missing route into a playable canvas brick-breaker game, with keyboard, pointer, and touch input plus a route-home action. It ships as a shadcn registry block with its game engine, retro stylesheet, and local wrappers around badge, button, card, and keyboard-hint UI. It expects React, Next.js Link, Tailwind theme utilities, path aliases, and a cn helper.

Specimen
Harness screenshot of 8bitcn-not-found-brick-breaker at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-not-found-brick-breaker at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of 8bitcn-not-found-brick-breaker at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for 8bitcn-not-found-brick-breaker
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal56.8 KB (122.2 KB build, 65.4 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 1.11s
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-bf31e582feef/src/components/ui/8bit/badge.tsx".

Verdict

A distinctive idea with thoughtful input support, but this publication is not ready to adopt unchanged. The verified build fails because its retro badge wrapper imports a base badge module that is absent. Bare use also needs a shadcn-style setup, so teams needing a dependable drop-in error page should avoid it until the registry wiring is fixed.

Use it if

  • You want a playful missing-route screen that visitors can interact with before returning home.
  • Your app already uses the expected shadcn structure, Tailwind theme tokens, and Next.js routing.
  • You are prepared to repair and verify the registry dependency wiring before release.

Skip it if

  • You need a drop-in component that builds successfully as published.
  • Your error page must stay lightweight, restrained, or free of game mechanics.
  • Your project does not use Next.js or cannot accommodate the shadcn aliases and base primitives without adaptation.

Install

Installation record for 8bitcn-not-found-brick-breaker
Declared dependenciesradix-ui, clsx, tailwind-merge
Missing on installnone
Bare installfails once the shadcn-style helpers are removed, so it needs that setup
Providerno provider required in the harness

In a non-shadcn project, add the expected source aliases and cn utility, Tailwind theme tokens, the base badge, button, and card primitives, the retro wrappers and stylesheet, the bundled game engine, and the packages used by those wrappers. Replace Next.js Link if your router differs, and provide or self-host the referenced retro font. The missing base badge import must be resolved before the component will build.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/TheOrcDev/8bitcn-ui
License
MIT
Record published
2026-08-15

Alternatives

Other published entries for the form pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.