# Cassette

A clear cassette as a progress bar. The right pack grows as the work goes on and the hubs turn while it runs, the emptier one faster. Your finger winds the tape.

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

> 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

## Anatomy

Conserved tape area, Tape driven hubs, Solved tape path, Hub locked scrub, Anisotropic bow tie sheen, Room fixed sheen, Embossed clear moulding, True printed scale, Media binding, Sleeping loop, Fit to host

## Usage notes

A progress display people read at a glance and want to touch. Given a number it is the progress of an upload, a render or export, a migration, an agent's run: the hubs turning while it works and stopping when it waits. Bound to an or element it is a player's position for a podcast, a voice memo or a call recording, speaking "2:14 of 5:30" and seeking when wound.

## Options

| Option | Type | Description |
| - | - | - |
| progress | number | How far the work has gone: the tape on the right. Turn a hub in the preview to wind it. |
| playing | boolean | The hubs turn: work in progress, or playing. |
| speed | number |  |
| shell | enum | Smoke and clear show everything inside; black and white only through the window. Clear prints in black, for light pages. |
| hubs | enum | The screws follow the hubs. |
| finish | enum | Auto makes a smoked shell the page’s own: clear plastic in the finish’s tint on a light finish, smoked plastic with the finish’s bright edges and markings on a dark one (lit from within on Phosphor and Night). Plain keeps the shell exactly as chosen. A clear, black or white shell is always itself. |
| tape | enum | Brown ferric oxide, or near-black chrome. |
| length | enum | How big a full pack is: its tape’s length times its thickness. |
| paper | boolean | A paper label round the window, or print straight on the shell. |
| title | text | What is on the tape: the job, the file, the run. |
| side | text | One letter in the box, or empty. |
| note | text | A second, smaller line. |
| scale | boolean |  |
| light | number | 0 is from above, clockwise. The tape’s sheen points at it and stays there while the packs turn. |
| size | number | 0 fits its frame; any other value is its width, shrunk only to fit. |
| readonly | boolean | A readout: values from code only, not the hand. |
| label | text | Accessible name |

## Methods

- value
- playing
- update
- setProgress
- play
- pause
- destroy

## States

1. **At rest**: The packs show the progress; the scale under the window reads the right pack's edge; the loop is asleep.
2. **Running**: 
3. **New value**: setProgress() or a media seek: the packs roll to the value and the hubs spin up as in fast-forward, then stop.
4. **Turning a hub**: Press on a pack and turn: the hub follows the finger exactly and the other follows the tape; input fires on every change, change when it lifts.
5. **Dragging across**: Press anywhere off the packs and drag sideways: one cassette width winds the whole tape.
6. **Keyboard**: 
7. **Media**: Bound to an audio or video element it follows timeupdate, play, pause, seeked and ratechange, and scrubbing sets currentTime.
8. **Read-only**: Values from code only; the hand does nothing and aria-readonly says so.
9. **Smoke and clear**: Everything inside shows through: the packs, the tape path round the corner rollers, the pressure pad; the hub bores and the holes show the page.
10. **Black and white**: An opaque shell, clear only in a wide window across both hubs.
11. **Paper label**: A paper label with a stadium cut-out round the window, the title and note printed on it.
12. **Off screen or hidden**: The loop pauses; off screen the packs land on the value; a returning tab advances one clamped frame.
13. **Reduced motion**: The packs jump to the value and the hubs stand still; no frame is requested.

## How it works

Original. Canvas 2D, drawn in millimetres. The far half, the near half, a hub, the hub's fixed sheen and a full pack are baked once per size and style; a frame is the far half, two pack shadows, the solved tape path, two packs clipped to their annuli, two turned hubs with unturned sheen, and the near half. The Walkman (spring door, latching keys) is the next piece built on it.