shadcn.io is not affiliated with official shadcn/ui
DJ Deck Music Block for Ark UI
Two decks with turning platters and a mixer between them: Sync that matches tempo within the pitch range, a Camelot key check, a crossfader with two curves and its channel levels, and no audio.
Installation
Overview
Match two tracks with this DJ deck for React with Ark UI. It holds Mixhall's decks in a hairline frame with a plus mark on each corner, as three cells on shared hairlines: Deck A, the mixer and Deck B, which stack on a phone with the mixer between them. Each deck loads a track from a Native Select, draws a platter that turns slowly while it plays, and shows its tempo, its Camelot key and its pitch beside a Play or Pause Button. The mixer has Sync, which matches Deck B to Deck A and says it ("B plus 3.2% to 124.0 BPM", refused beyond the 8% pitch range), a key check from the Camelot rule ("8A and 9A: compatible, one step"), a Slider crossfader with a Toggle Group for the curve, Smooth or Sharp, and two bars for the channel levels it works out ("A 71%, B 71% at the centre"). Play both is the one Shine Button. Nothing sounds. For DJ tools, mixers and any two things you balance against each other.
FAQ
How do I add my own tracks?
Edit TRACKS: each has an id, a title, an artist, a tempo in tenths of a beat per minute (1240 is 124.0) and a Camelot key such as 8A. Both selects list every track. Sync, the pitch and the key check are worked out from the two loaded tracks, so nothing is typed twice.
What does Sync do?
It moves Deck B to Deck A's tempo and reports the pitch it needed, for example "B plus 3.2% to 124.0 BPM". A deck's pitch range is 8%: if the tracks are further apart than that, Sync refuses and says how far it would have to go. Reset B puts Deck B back at its own tempo, and loading a track gives that deck its own tempo.
How is the key check worked out?
Camelot codes sit on a wheel of twelve numbers with A (minor) and B (major). The same code is a perfect match, the same number with the other letter is a relative major and minor, and a neighbouring number with the same letter is one step. Two steps is a lift to use with care and anything further is a clash; 12 and 1 are neighbours.
What are the two crossfader curves?
Smooth is an equal-power fade, so both channels read 71% at the centre and the loudness stays level. Sharp is a cut: both channels are at full level at the centre and one drops away only as you move toward the other end. The two bars show the levels that the current position and curve give, and the slider says them in words.
What stays local, and how do I wire it for real?
Everything: the decks, the pitch and the crossfader live in the page, and no audio plays in this demo. The platters turn only while a deck is playing and not at all with reduced motion. To make it real, feed the two channel levels and each deck's playback rate into your audio engine from levelsOf and bpmB.