components / sound-bars
sound-bars.
the little dancing meter that marks the row currently playing. pure css, no state — each bar's period and phase come from its index, so the pattern is identical on the server and the client. paused and reduced-motion hold resting heights rather than flattening.
sm
md
lg
accent
click the row to pause the meter.
installation
bunx @justin06lee/chrome@latest add sound-barsprops
| name | type | default | description |
|---|---|---|---|
| bars | number | 4 | how many bars (1–12). |
| paused | boolean | false | freeze the bars low. |
| size | 'sm' | 'md' | 'lg' | 'md' | |
| accent | string | 'currentColor' | css color of the bars; inherits the row it sits in by default. |
| speed | number | 1.1 | seconds for one full cycle of the slowest bar. |
| label | string | null | 'playing' | screen-reader text; null when an adjacent label already says it. |
| className | string | - |