vibecodng.com

Free MCP betaIndex and tools live

Measured entry

magicui-orbiting-circles

background-effectunclassifiedmotion on file

A React and TypeScript registry component that arranges child elements on an animated circular path, with controls for direction, timing, radius, path visibility, and item size. It ships as source and relies on Tailwind utility classes, a project-level cn helper, and an orbit keyframe plus theme animation token.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of magicui-orbiting-circles at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-orbiting-circles at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-orbiting-circles 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-orbiting-circles
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal12.6 KB (77.2 KB build, 64.6 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>/src/lib/utils (imported by src/cut/orbiting-circles.tsx): ENOENT: no such file or directory, open '<sandbox>/src/lib/utils'

Verdict

A focused decorative component that builds and mounts cleanly in the prepared harness, with no observed overflow or accessibility violations. It needs a shadcn-style setup because the bare project lacks the expected utility helper and styling configuration.

Use it if

  • You need a decorative orbit diagram for integrations, technologies, or product capabilities.
  • Your React app already uses Tailwind and can absorb registry source into its component system.
  • You want orbit direction, speed, radius, and path visibility controlled through component props.

Skip it if

  • Your project does not use Tailwind and you do not want to recreate the animation and utility styling.
  • The orbiting items carry essential content or navigation that must remain easy to scan and operate.
  • You require built-in reduced-motion behavior rather than adding that treatment in your own styles.

Install

Installation record for magicui-orbiting-circles
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 the aliased lib/utils module with a cn class-merging helper, configure the matching path alias, ensure Tailwind processes the component classes, and register the orbit keyframes and animation theme token. Add your own reduced-motion rule if the effect is not essential.

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

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.