Voice Recording Card

npx shadcn add https://try.pungrumpy.com/r/voice-recording-card.json

A signal-capture card with a radial HUD, pulsing center trigger, and a live timer that starts counting the moment recording begins. The visualizer responds with a noisy tick ring, a slow dashed rotation, and subtle breathing to keep the interface alive without being loud.

How It Works

The card renders a layered visualizer stage with three motion tiers:

1. Noisy tick ring — A 120-tick radial ring uses deterministic per-tick variance and staggered timing to simulate live audio energy without a canvas.
2. Dashed track rotation — The middle dashed ring rotates once per minute during recording, reinforcing continuous capture.
3. Center pulse + state — The center indicator stays square at rest, becomes rounded and red when recording, and emits a faint pulse ring for confirmation.

The timer counts from 00:00:00:00 on play and stops on pause. All animation is gated by prefers-reduced-motion and pauses when off-screen to keep performance stable.