ListeningPill

Granola-style floating recording indicator. Bars + REC + duration + stop. Draggable + floating optional.

Inspired by Granola live-meeting pill, Loom floating recorder.

Preview

What it looks like.

Usage

Drop it into your app.

import { ListeningPill } from '@locara/components'

<ListeningPill
  level={rmsLevel}
  durationSeconds={duration}
  onReturn={() => app.focus()}
  onStop={() => recorder.stop()}
  floating
  draggable
/>

Or copy the source into your repo: locara add listening-pill

Design notes

Why it works this way.

Pass `floating` to render as `position: fixed` in the top-right. `draggable` lets the user reposition it. The Granola product invented this UI — when you're recording in the background, you always know audio is captured, and you can return to the main UI with one click.