vibecodng.com

Free MCP betaIndex and tools live

Measured entry

ruixen-visualizer-button

buttonliquid-glassmotion on file

A client-side React play and pause control with an animated canvas equalizer and liquid-glass styling. It ships as a shadcn registry component, imports Motion, and relies on browser Audio, Web Audio, and canvas APIs. The supplied audio URL must allow cross-origin playback for real visualization.

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

What the harness recorded

CONSOLE

Access to audio at 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' from origin 'http://127.0.0.1:44939' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CONSOLE

Failed to load resource: net::ERR_FAILED

BARE BUILD

Access to audio at 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' from origin 'http://127.0.0.1:33961' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Verdict

A polished concept with a self-contained visual treatment, but it is not production-ready unchanged. Fix the button labeling and focus behavior, use a compatible audio host, and investigate the inconsistent larger-viewport captures before adopting it.

Use it if

  • You need a compact audio preview control with play and pause feedback.
  • Your app runs this component on the client and can serve a CORS-enabled audio source.
  • You are prepared to add an accessible name and visible keyboard focus treatment.

Skip it if

  • You need an accessible control without modifying the source, since the button has no discernible name.
  • Your audio host does not permit cross-origin playback, because the control can appear active even when playback fails.
  • You need verified responsive rendering now, since the harness produced blank captures at larger viewports.
  • You cannot accept the added Motion dependency and continuous canvas animation.

Install

Installation record for ruixen-visualizer-button
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, add Motion, place the file behind a client boundary, and provide a CORS-enabled audio URL. No shadcn provider is required. Add an accessible label, keyboard focus styling, and playback error handling before release.

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/ruixenui/ruixen.com
License
MIT
Record published
2026-08-18

Alternatives

Other published entries for the button pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.