Team Radio
A radio message from the pit wall: who is talking to whom, a live trace of the audio and the transcript arriving word by word.
The clip on this page is synthesised for the project: no real recording, no real voice, and the names are the fictional grid. Real team radio is the broadcaster’s, so nothing of it is shipped here and the card never appears on the Replay page.
Given `src`, the card owns a play/stop control and never plays on its own. On the first play it opens an `AudioContext`, wires the element through an `AnalyserNode`, and draws the real level each frame with the words timed from the audio clock. Given an `envelope` (levels 0–1 at `envelopeRate` samples per second) instead, a rising edge of `play` runs the message on the animation clock with no audio at all, and `onComplete` fires at its end.
Serve `src` from the same origin, or from a host that sends CORS headers. Web Audio silences a cross-origin clip without them, so the message plays with no sound and a flat trace. A `key` change remounts the card for a new `src`.
The trace is the `waveform` item: the base `Waveform` of ElevenLabs UI (MIT), trimmed to a canvas of level bars and installed alongside. It is hidden from assistive technology; the transcript is real text, read once, and the control has a plain name.
The card wipes in when it mounts, so mount it when the message comes in. Under reduced motion there is no wipe, no pulse on the live dot and no pop on the words: they appear at their time.
Preview
Team radio, RACE ENGINEER to EVO: Box, box.
Playground
Audio plays the synthesised clip through an analyser; envelope runs precomputed levels with no sound.
Who is speaking, as printed on the sub line.
The car the message is for.
How big the card is.
Installation
Register the boxbox namespace once per project:
bunx shadcn@latest registry add @boxbox=https://react-boxbox.vercel.app/r/{name}.jsonThen add the component:
bunx shadcn@latest add @boxbox/team-radio
Props
| Name | Type | Default | Description |
|---|---|---|---|
| source | 'audio' | 'envelope' | audio | Audio plays the synthesised clip through an analyser; envelope runs precomputed levels with no sound. |
| from | string | RACE ENGINEER | Who is speaking, as printed on the sub line. |
| to | 'EVO' | 'MSO' | 'TRE' | 'NVA' | 'AQU' | 'SDA' | EVO | The car the message is for. |
| size | 'md' | 'sm' | md | How big the card is. |
Dependencies
- motion