# Demo (/docs/demo)













## Recorded demos [#recorded-demos]

These clips are generated from the built TUI, not mocked screenshots.

<video preload="metadata" poster="/demo/radiocli-fullscreen.png" aria-label="Now Playing cycling receiver visualizers and display colors">
  <source src="/demo/radiocli-now-playing.webm" type="video/webm" />
</video>

<img alt="Library with favorites, recent stations, and imported streams" src="__img0" />

<img alt="Explore world map with geotagged station results" src="__img1" />

<img alt="Search results for tokyo jazz" src="__img2" />

<img alt="Nearby stations using approximate location lookup" src="__img3" />

<img alt="Stats screen cycling display colors" src="__img4" />

Regenerate the assets from the repo root with:

```bash
npm run build
npm run demo:assets
```

The recorder expects `vhs`, ImageMagick's `magick`, FFmpeg, `mpv`, and network access.
It writes the demo assets and full-screen screenshot to `apps/docs/public/demo`.

## Manual Demo Flow [#manual-demo-flow]

The best demo is a short terminal recording that shows the product loop:

1. Start `radiocli`.
2. Open Countries and press `w` for the world map.
3. Search for `tokyo jazz`.
4. Tune a station.
5. Open diagnostics.
6. Show the command palette.
7. Quit cleanly.

Generate a scripted transcript:

```bash
npm run demo:script
```

Record an interactive demo with asciinema, if installed:

```bash
asciinema rec assets/demo.cast --command "radiocli"
```

Convert the cast to a GIF with `agg`, if installed:

```bash
agg assets/demo.cast assets/demo.gif
```

Before recording, run through [Install](./getting-started/install.mdx) and keep
[TUI Controls](./getting-started/tui-controls.mdx) nearby.