vibecodng.com

Free MCP betaIndex and tools live

Measured entry

magicui-cool-mode

hover-effectspatialmotion on file

A client-side React wrapper that turns pointer or touch presses on its child into a burst of colorful circles, emoji, or image particles. It ships as a shadcn registry source file and depends only on React hooks plus browser DOM and animation APIs.

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

Verdict

A fun, self-contained accent for occasional calls to action, with no styling framework lock-in. Use it selectively: the global particle layer and always-running animation loop are heavier than the simple wrapper API suggests.

Use it if

  • You want a playful press-and-hold response on a prominent button or link.
  • You need particle content that can switch between circles, emoji, and an image URL.
  • You are comfortable reserving the effect for optional visual feedback rather than conveying state.

Skip it if

  • Your interface must respect reduced-motion preferences without modifying the component.
  • You want an effect triggered by hover alone, since this implementation starts on press or touch.
  • You cannot justify a continuously scheduled animation loop for a decorative interaction.

Install

Installation record for magicui-cool-mode
Declared dependenciesnone declared
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

Copy the client component into the project and import it from your own component path. A non-shadcn React app needs no extra package or utility CSS, but it must support client-side hooks and browser DOM APIs. Add your own reduced-motion handling if required.

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