LCD Meter

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/lcd-meter

UsageCopy Anchor Link

import { LcdDisplay } from "@/components/ui/lcd-display";
import { LcdMeter } from "@/components/ui/lcd-meter";

<LcdDisplay>
  <LcdMeter aria-label="Input level" source={analyser.meter} />
</LcdDisplay>

The meter lives on an LCD Display's screen, so it takes that screen's ink, glass, dot grid and glow, and it can share the screen with settings rows and the status pixel. It follows your theme the same way: dark pixels on a backlit glass in light mode, glowing ink in dark mode, in the theme's --primary or a fixed hardware ink.

With no children, it draws one row per channel (labelled L and R for a pair), each with a track, a held peak and a readout, then the scale and a CLIP flag. The metering is Level Meter's: the same sources, ballistics, peak hold and clip hold.

AnatomyCopy Anchor Link

<LcdDisplay>
  <LcdMeter>
    <LcdMeterChannel index={0}>
      <LcdMeterLabel />
      <LcdMeterTrack>
        <LcdMeterBar />
        <LcdMeterHold />
      </LcdMeterTrack>
      <LcdMeterValue />
    </LcdMeterChannel>
    <LcdMeterScale />
    <LcdMeterClip />
  </LcdMeter>
</LcdDisplay>

The meter is a three-column grid: labels, tracks and readouts. Each LcdMeterChannel is one row of it; the scale sits under the tracks and the CLIP flag under the readouts. A readout inside a channel shows that channel, and one outside shows the loudest.

ExamplesCopy Anchor Link

InksCopy Anchor Link

The meter has no colours of its own. Set variant on the display for a fixed hardware ink, or appearance="dark" for a dark screen on a light page.

SegmentsCopy Anchor Link

Segments are whole dots of the display's grid: 3 dots wide with a 1-dot gap by default. A lit segment lights whole, never in part. Set --lcd-meter-segment to one dot for a fine ladder, or --lcd-meter-gap to 0px for a solid bar.

<LcdMeter className="[--lcd-meter-segment:var(--lcd-display-pitch)]" />
<LcdMeter className="[--lcd-meter-gap:0px]" />

Peak and RMSCopy Anchor Link

Layer an rms bar over a dimmed peak bar for a dual meter.

<LcdMeterTrack>
  <LcdMeterBar className="opacity-40" />
  <LcdMeterBar measure="rms" />
  <LcdMeterHold />
</LcdMeterTrack>

MicrophoneCopy Anchor Link

Custom rows take labels of any length. The meter moves its tracks onto the screen's dot grid, so segments never cut a dot in half.

Feeding dataCopy Anchor Link

A meter accepts levels three ways, as Level Meter does. See Feeding data.

// A source: subscribes and paints itself, no React renders.
<LcdMeter source={analyser.meter} />

// Values: for slow data. Ballistics smooth the movement.
<LcdMeter peakDb={-9.1} rmsDb={-18} />

// A handle: for callers that own their own frame loop.
const meter = useRef<LevelMeterActions>(null);
meter.current?.paint({ channels: [{ peakDb: -9.1 }] });
<LcdMeter actionsRef={meter} />

The meter uses the audio taper by default, which gives the loud end of the range most of the track, like a recorder's screen. Pass taper="linear" for equal distance per dB.

ThemingCopy Anchor Link

The screen has one ink, so zones show as a bracket printed over the clip zone and a CLIP flag that inverts while the signal clips. data-zone is there if you want to style them yourself.

AccessibilityCopy Anchor Link

• The meter has role="meter" with its value in dB, updated at most four times a second. Give it a name with aria-label or aria-labelledby.
• The CLIP flag is a button that turns the flag off, and announces clipping to screen readers.
• With reduced motion, the meter shows the current level four times a second instead of animating, and the CLIP flag inverts without a transition.

API referenceCopy Anchor Link

LcdMeterCopy Anchor Link

Takes LevelMeter's data and scale props, except orientation, variant, segments and size. The size comes from the display.

LcdMeterChannelCopy Anchor Link

LcdMeterBarCopy Anchor Link

LcdMeterValueCopy Anchor Link

Takes DbReadout's props.

LcdMeterScaleCopy Anchor Link

LcdMeterClipCopy Anchor Link

Takes ClipIndicator's props. Children replace the word CLIP.