# Deck

A player for a DJ booth, made of the kit's own materials. A screen with the whole loop as an overview strip and a zoomed waveform scrolling past the playhead on its beat grid, both drawn from the audio you hear; a jog wheel you scratch and nudge; cue and play keys; a tempo fader; up to eight pads; and a back panel you flip to, where the line out plugs in.

Object · With a Pass · https://tactileui.dev/objects/deck

> The code and styling for this object come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Use it

With a Pass, install it with npx shadcn add @tactile/deck (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/deck/.

Load the stylesheet as well as the module, or it renders unstyled: tactile/deck/deck.css. In a bundler such as Vite, import each CSS file next to the module import; in plain HTML, link it.

Then new Deck(element, options) from tactile/deck/deck.mjs. Every option has a default; example.html in the folder shows it running. The sample copy (headings, labels, figures) is placeholder: replace it with the page's own.

## Anatomy

Audio made in the page, Waveform from the heard samples, Scrolling beat grid, Platter scratch as grains, Rim tempo nudge, Quantised hot cues, Beat loops, Latency held picture, Declared mixer channel, Two faced 3d flip, Container query layout

## Usage notes

The player half of a booth, or a media player that wants to look and behave like hardware: a music app, a podcast editor, a sample pad, an audio tool's landing page. It plays a loop made in the page, shows it as two waveforms, lets you cue it, loop it, scratch it and bend its tempo, and says which mixer channel it feeds. Alone it plays through the room; with a Mixer it plugs into a channel and the cable between them is drawn on the back panels.

## Options

| Option | Type | Description |
| - | - | - |
| track | enum | The loop on the deck. Both are made in the page; nothing is streamed. |
| name | text | Printed on the deck and read out by a screen reader. |
| side | enum | The front panel, or the back with the line out, the link ports and the power. The deck turns over. |
| pads | number | How many performance pads: four to eight. |
| padMode | enum | Hot cue: press an empty pad to set a cue, a lit one to jump to it. |
| screen | enum | Bands colours low, mid and high in three tints of the lamp; solid is one. |
| range | number | How far the tempo fader goes either way. |
| out | number | The mixer channel its line out feeds. With a mixer connected, change it and the cable moves. |
| label | text | Empty reads the name and "a player". |

## Methods

- update
- connect
- flip
- playing
- play
- pause
- destroy

## States

1. **Stopped**: The playhead stands; the screen shows the loop, the cues and the time left. Nothing sounds, and nothing has been asked of the browser.
2. **Playing**: The zoomed waveform scrolls past a fixed playhead on its beat grid (a line a beat, a numbered one a bar); the overview lights the played part; the platter turns; the beat lamps follow. The picture is held back by the output latency so it matches what is heard.
3. **Cue**: While playing it goes back to the cue point and stops. Stopped away from the cue it sets the cue here; stopped on the cue, holding it plays and letting go returns.
4. **Scratch**: A hand on the face of the jog holds the loop and follows the hand, played as short grains at the hand's speed, forward or reversed; letting go carries on from where it left.
5. **Nudge**: A hand on the rim bends the tempo by up to ten percent while it moves; the wheel on the jog does the same by a notch.
6. **Hot cues**: Four to eight pads: an empty one sets a cue at the playhead (to a sixteenth), a set one jumps to it, Clear removes one. Each cue is a flag on the waveform and a tick on the overview.
7. **Loops**: In Loop mode a pad loops a quarter of a beat up to thirty-two from the beat before the playhead; pressing it again leaves. The loop is shaded on both waveforms.
8. **Tempo**: 
9. **Back panel**: The deck turns over to its line out (left and right), link ports, USB and power, and a selector for the mixer channel the line out feeds. Change the channel and the cable moves.
10. **Keyboard**: Every control is reachable by Tab. The jog is a slider: arrows step a sixteenth, up and down a beat, Page keys a bar, Home goes to the cue.
11. **Finishes**: All twelve, Tactile and Quiet: faces, the jog's rim and the pads read the kit's tokens. One lamp; the screens stay dark glass.
12. **Reduced motion**: The deck does not turn over and the platter does not spin; the picture updates about eight times a second.

## How it works

Original. The two loops are tables of sixteenth-note steps rendered sample by sample in the page (originals/components/shared/desk/loops.mjs), and the waveforms and the meters read the frames analysed from those same samples. It needs the Tactile UI Kit's stylesheets on the page (panel, key, toggle key, fader, seg, select, lamp); the Code tab's example links them from /kit/. It shares its desk helpers with the Mixer.