vibecodng.com

Free MCP betaIndex and tools live

Measured entry

8bitcn-feature3

feature-gridskeuomorphismmotion on file

A client-side shadcn registry block that presents feature cards in a looping, keyboard-aware Embla carousel with pixel-art controls and Press Start typography. It ships with retro badge, card, and carousel wrappers, and relies on Tailwind utilities, shadcn primitives, a cn helper, class-variance-authority, Embla, and the declared utility packages.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of 8bitcn-feature3 at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of 8bitcn-feature3 at 768 pixels wide
Harness screenshot at 768 pixels wide. This viewport scrolled sideways.
Harness screenshot of 8bitcn-feature3 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-feature3
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375, 768
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal43.2 KB (108.6 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.20s
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>re-75e6cb979d15/src/components/ui/8bit/badge.tsx".

Verdict

A coherent retro carousel that builds and mounts cleanly, with useful keyboard controls and no automated accessibility findings. The narrow and mid-width renders spill beyond the viewport, however, so treat responsive containment as required work rather than shipping it unchanged.

Use it if

  • You need a swipeable feature showcase for a game, retro product, or campaign landing page.
  • Your interface already uses shadcn conventions and can absorb the included retro wrappers.
  • You are prepared to tune responsive containment before release.

Skip it if

  • Any horizontal page overflow on phone or tablet layouts is a release blocker and you cannot revise the arrow positioning.
  • Your brand cannot support a pixel font or chunky arcade-style borders.
  • You want a static feature grid with no carousel runtime or interaction cost.
  • Your content policy forbids loading the bundled font from Google.

Install

Installation record for 8bitcn-feature3
Declared dependenciesradix-ui, embla-carousel-react, 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 client-component support, Tailwind and matching theme tokens, the cn alias helper, base badge, card, and button primitives, the included retro wrappers and stylesheet, Embla, class-variance-authority, radix-ui, clsx, and tailwind-merge. Configure the component import aliases and decide whether to keep or self-host the font.

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 feature-grid pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.