vibecodng.com

Free MCP betaIndex and tools live

Measured entry

magicui-lens

image3dmotion on file

A client-side React magnifier that renders its children twice, revealing the enlarged copy through an animated circular mask. It ships as a shadcn registry component, uses Motion for the reveal, and relies on utility classes for positioning, clipping, rounding, and stacking.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of magicui-lens at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-lens at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-lens 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-lens
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal63.5 KB (129.0 KB build, 65.5 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A focused, dependable magnifier with static and pointer-following modes. It built and mounted cleanly, stayed contained across the tested layouts, and produced no automated accessibility findings. The desktop interaction is convincing, but touch and keyboard movement need custom work.

Use it if

  • You need a hover magnifier for product imagery, diagrams, or other detail-heavy media.
  • You want either pointer-following behavior or a fixed lens position for a guided comparison.
  • Your React interface already uses Motion and utility-class styling, or can accommodate them.

Skip it if

  • Touch interaction is primary, since the moving lens listens to mouse movement rather than pointer or touch input.
  • Keyboard users must be able to reposition the magnified area, since focus only supports dismissing the hover state.
  • Repeating complex interactive children would create duplicate controls or confusing semantics.

Install

Installation record for magicui-lens
Declared dependenciesmotion
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn React project, install Motion, copy the client component, and provide the utility classes it uses through Tailwind or equivalent CSS. Ensure the surrounding app supports client-side state and masking styles.

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-17

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.