vibecodng.com

Free MCP betaIndex and tools live

Measured entry

magicui-confetti

background-effectunclassifiedmotion on file

A client-side React confetti component distributed as a shadcn registry item. It exposes a canvas effect that can fire automatically or through a ref, plus a button that launches canvas-confetti from the click position. It depends on canvas-confetti and its types, and imports the registry's shared Button component.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of magicui-confetti at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-confetti at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of magicui-confetti 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-confetti
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal18.5 KB (83.9 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.90s
error during build:
[vite]: Rollup failed to resolve import "class-variance-authority" from "<sandbox>/src/components/ui/button.tsx".

Verdict

A focused celebration effect with useful button and imperative entry points. It builds and mounts cleanly in the prepared environment, but it needs a shadcn-style setup rather than working as a bare drop-in because the shared Button chain requires additional project infrastructure.

Use it if

  • You want a brief celebration after a release, purchase, achievement, or other clearly successful action.
  • You need both a ready-made trigger button and an imperative API for firing the effect from application logic.
  • Your project already uses shadcn conventions and can reuse its shared Button component.

Skip it if

  • Your interface must avoid nonessential motion or you do not plan to provide a reduced-motion alternative.
  • You only need a static success state and do not want an additional animation dependency.
  • Your component system cannot accommodate the shadcn Button import, path alias, and styling conventions.

Install

Installation record for magicui-confetti
Declared dependenciescanvas-confetti, @types/canvas-confetti, radix-ui
Missing on installcanvas-confetti, @types/canvas-confetti
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 canvas-confetti and its type package, then provide or replace the imported Button. Keeping the supplied Button also requires class-variance-authority, the relevant Radix UI dependency, the class-name utility, compatible styling, and the configured component path alias.

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.