Wave Bars

A row of bars drawn like an audio waveform. At rest they keep their recorded shape. While playing each bar swells and settles out of step with its neighbours, and progress tints the bars already played. With reduced motion the bars hold still. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add wave-bars

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/wave-bars.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { WaveBars } from "@/components/ui/wave-bars";

export default function Example() {
  return <WaveBars playing progress={0.4} />;
}

Props