purrfect uiComponents

Voice bars

Thin bars jumping between heights on a staggered loop, for a mic that is listening.

Behaviour

  • Bars are currentColor, so they follow the text colour and the theme.
  • Each bar has a fixed sequence of heights (no Math.random), so the server HTML matches the client; every bar moves, and no height is shared by all bars at once.
  • One CSS keyframe scales each bar from its bottom: transform only, no JavaScript per frame. It pauses while off screen.
  • The stagger is a negative delay, so every bar is already moving on the first paint.
  • Wide bars ([&>span]:w-2 and up) get squashed round caps at short heights, since scale stretches the cap; the default 2px bars don't show it.
  • Decorative and hidden from screen readers, unless you pass aria-label (then it is an img).
  • Reduced motion: the bars hold still at their first height and only pulse in opacity.

Props

PropTypeDescription
barsnumberdefault 12How many bars.
durationnumberdefault 1Seconds for one loop of a bar through its four heights.
staggernumberdefault 0.08Seconds between one bar starting and the next.
classNamestringMerged onto the root; set the height (h-8 by default), gap and colour (text-*) here.

Installation

npx shadcn@latest add https://purrfectui.com/r/voice-bars.json

How to use

import { VoiceBars } from "@/components/ui/voice-bars";

<VoiceBars className="text-foreground" />
<VoiceBars bars={20} className="h-5 text-primary" aria-label="Listening" />

Source code

Loading…

Credits

Ported from armour.vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.

0