vibecodng.com

Free MCP betaIndex and tools live

Measured entry

magicui-meteors

background-effectaurora-meshmotion on file

A client-side React background effect that renders randomized meteor spans after mount. It ships as source through a shadcn registry, uses Tailwind utilities plus a registry-supplied keyframe, and imports a local cn helper backed by clsx and tailwind-merge.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of magicui-meteors at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of magicui-meteors at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-meteors 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-meteors
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal30.0 KB (95.5 KB build, 65.5 KB baseline)
Bare modeFAIL
Provider requiredNO
Demo usedwritten from the component source API

What the harness recorded

BARE BUILD

✗ Build failed in 1.04s
error during build:
[vite:load-fallback] Could not load <sandbox>re-16dbb9fb17e6/src/lib/utils (imported by src/cut/meteors.tsx): ENOENT: no such file or directory, open '<sandbox>re-16dbb9fb17e6/src/lib/utils'

Verdict

A tidy source-copy effect for Tailwind interfaces, with clean mounting and accessibility checks. It needs a shadcn-style setup because the bare project cannot resolve its local utility import. Clip the host container and add motion preferences before production use.

Use it if

  • You want a decorative meteor layer inside a clipped hero, card, or promotional panel.
  • Your app already uses Tailwind and a shadcn-style source-copy workflow.
  • You are comfortable with a randomized effect that begins after client mount.

Skip it if

  • Your project does not use Tailwind or does not want registry CSS and utility conventions.
  • You need deterministic meteor positions for snapshots or art-directed compositions.
  • Your container cannot clip overflow, especially on narrow screens.
  • You need a motion-free decorative layer without adding your own reduced-motion treatment.

Install

Installation record for magicui-meteors
Declared dependenciesclsx, 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 a compatible path alias and local cn helper using clsx and tailwind-merge, ensure Tailwind processes the component classes, and copy the meteor animation variable and keyframes into the global theme CSS. The host should be positioned and clip overflow.

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