WaveStrip

A compact, seven-bar waveform that sits inline with text, for example next to a "now playing" caption. It is the small sibling of WaveformMeter.

import { WaveStrip } from 'jarvis-react-ui';

Inline with text

WaveStrip renders a 12px tall inline-flex <span>, so it lines up with small caption text. Put a mirrored strip on the other side of the text for a symmetric look.

import { WaveStrip } from 'jarvis-react-ui';

export default function NowPlaying() {
    return (
        <div className="flex items-center gap-2 text-[10px] uppercase tracking-[1px] text-text-secondary">
            <WaveStrip />
            <span>Now playing · Back in Black</span>
            <WaveStrip mirrored />
        </div>
    );
}

Paused

With active={false} the bars collapse to dim 2px stubs and stop moving. Toggle it with your playback state.

import { useState } from 'react';
import { Pause, Play } from 'lucide-react';
import { IconButton, WaveStrip } from 'jarvis-react-ui';

export default function Paused() {
    const [playing, setPlaying] = useState(false);

    return (
        <div className="flex items-center gap-3 text-[10px] uppercase tracking-[1px] text-text-secondary">
            <IconButton
                icon={playing ? Pause : Play}
                label={playing ? 'Pause' : 'Play'}
                size="sm"
                onClick={() => setPlaying((v) => !v)}
            />
            <WaveStrip active={playing} />
            <span>{playing ? 'Playing' : 'Paused'}</span>
        </div>
    );
}

Accessibility

• The strip is aria-hidden; the text next to it must carry the meaning (for example "Playing" or "Paused").
• It has no interactive behavior and plays no sound.

API