Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Jam Session Music Block for Ark UI

A latency budget for a remote jam: five players with pings, a buffer size group that works out the delay for each, bars with Playable, Tolerable and Too slow, a verdict, and a room code with a real Copy button.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let players check whether a remote jam will hold together, with this latency budget for React with Ark UI. It holds a Jamlatch room in a hairline frame with a plus mark on each corner, in three bands. The first has the room code in mono type with a real Copy Button, and a Toggle Group of buffer sizes (64, 128, 256 and 512 samples at 48 kHz, worked out as 1.3, 2.7, 5.3 and 10.7 ms). Five players follow, each with initials, a Badge for the instrument, a city and a ping; the one-way delay is half the ping plus the buffer, drawn as a bar on a shared 0 to 60 ms scale with ticks at 30 and 45 ms and a word beside it: Playable up to 30 ms, Tolerable up to 45, Too slow past that. A verdict line is worked out from the five delays, such as "Everyone under 45 ms: playable with care". Join session is the one primary Shine Button and says it is not connected here. For remote rehearsals, band tools and music classes.

FAQ

How are the delays worked out?

A buffer of N samples at 48 kHz lasts N divided by 48 thousandths of a second, so 128 samples is 2.7 ms. A player's one-way delay is half their ping plus that buffer, kept in tenths of a millisecond so no rounding error shows: a ping of 86 ms with a 64 sample buffer is 43.0 plus 1.3, or 44.3 ms. The grade follows from the number: up to 30 ms Playable, up to 45 ms Tolerable, past that Too slow.

What does the verdict say?

It looks only at the slowest player. At 30 ms or under it says everyone is playable, at 45 or under it says playable with care, and past that it counts the players over 45 ms. Change the buffer and the bars, the words and the verdict all move together, and the status line speaks the new buffer with the verdict.

How are the grades shown without colour?

Each grade has a glyph and a word, and the bars differ by weight: Playable is solid, Tolerable is a lighter fill and Too slow is hatched with an outline. Only the Too slow glyph takes the destructive colour. The two ticks at 30 and 45 ms give the bars a scale you can read in greyscale.

Does the Copy button really copy?

Yes: it writes the room code to the clipboard and the status line says so. The code is invented. Join session connects to nothing and says so; to make it real, open your own audio session from the join handler and replace the typed pings with measurements from your relay.

What stays local?

Everything: the five players and their pings are typed example figures, the buffer choice lives in the page and nothing is measured, connected or played. Latency in a real session also depends on the network path and the audio interface, which this demo does not model.

How does it look on a phone?

The code and the Copy button sit on one line with the buffer group below, each player's bar drops under their name and city, and the verdict and the foot follow. The foot status wraps in a reserved two-line slot, so the Join button never moves.