← All components Composites

ListeningSurface

Granola/Superwhisper-style full panel for a recording session. Voice orb or waveform + live transcript + controls.

Inspired by Granola, Superwhisper, ChatGPT voice mode.

Preview

What it looks like.

Granola's listening surface. Orb pulses to the level; the partial transcript scrolls below.

Listening00:12

We can ship the audit-drawer this week, the visual-regression baseline this Friday.

so I think the main thing

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { ListeningSurface } from '@locara/components'

const [level, setLevel] = useState(0)
const [partial, setPartial] = useState('')
const [final, setFinal] = useState('')
const [duration, setDuration] = useState(0)

<ListeningSurface
  state="listening"
  level={level}
  durationSeconds={duration}
  partial={partial}
  lastFinal={final}
  onPause={() => recorder.pause()}
  onStop={() => recorder.stop()}
/>

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

Design notes

Why it works this way.

The orb-and-waveform variants are interchangeable. Use 'orb' for chat-style voice surfaces (mirrors ChatGPT/Claude voice mode); use 'waves' for dictation-style apps where the user is focused on accuracy rather than presence. The partial transcript is italic + muted to clearly signal 'not committed yet.'