vibecodng.com

Free MCP betaIndex and tools live

Measured entry

magicui-pixel-image

image3d

A registry-delivered client React component that splits one image into clipped tiles, fades them in with randomized timing, and can reveal color from grayscale. It ships as a TypeScript component and depends on React, Tailwind utility classes, and a cn helper imported through the project alias.

Specimen
Harness screenshot of magicui-pixel-image at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-pixel-image at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-pixel-image 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 magicui-pixel-image
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal26.7 KB (92.1 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 5.09s
error during build:
[vite:load-fallback] Could not load <sandbox>/src/lib/utils (imported by src/cut/pixel-image.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A focused retro reveal with useful controls, but the supplied demo does not prove the intended result and the repeated image semantics need correction before production. It needs a shadcn-style setup because the bare project cannot resolve its shared utility import.

Use it if

  • You want a decorative image reveal for a campaign hero, portfolio cover, or editorial feature.
  • Your app already has Tailwind and the usual shadcn project alias and class helper.
  • You need configurable tile grids and reveal timing without adding an animation library.

Skip it if

  • You need the image to carry clean accessible alternative text, since the component repeats a generated label for every tile and exposes no alt prop.
  • You want a plain responsive image rather than many overlapping image elements and randomized reveal timing.
  • You need convincing visual verification from the included demo, which omits the required image source and renders broken-image text.

Install

Installation record for magicui-pixel-image
Declared dependenciesnone declared
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 Tailwind with the utilities used here, configure the project alias, and provide the cn class-combining helper, or replace that import with a local equivalent. Pass a valid image source and consider adding a single caller-controlled alt value while hiding duplicate tile images from assistive technology.

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/magicuidesign/magicui
License
MIT
Record published
2026-08-13

Alternatives

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