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.
What it is for
A progress display people read at a glance and want to touch.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- 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
- Stack
- Vanilla ES modules, Canvas 2D, CSS
- Needs
- Nothing, no dependencies
- States
- 13 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe packs show the progress; the scale under the window reads the right pack's edge; the loop is asleep.
- RunningThe hubs turn at tape speed (4.76 cm/s × speed): the near-empty hub fast, the full one slowly.
- New valuesetProgress() or a media seek: the packs roll to the value and the hubs spin up as in fast-forward, then stop.
- Turning a hubPress 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.
- Dragging acrossPress anywhere off the packs and drag sideways: one cassette width winds the whole tape.
- KeyboardArrows step 1 % (5 s with media), Page keys ten times that, Home and End go to the ends; Space plays and pauses bound media.
- MediaBound to an audio or video element it follows timeupdate, play, pause, seeked and ratechange, and scrubbing sets currentTime.
- Read-onlyValues from code only; the hand does nothing and aria-readonly says so.
- Smoke and clearEverything inside shows through: the packs, the tape path round the corner rollers, the pressure pad; the hub bores and the holes show the page.
- Black and whiteAn opaque shell, clear only in a wide window across both hubs.
- Paper labelA paper label with a stadium cut-out round the window, the title and note printed on it.
- Off screen or hiddenThe loop pauses; off screen the packs land on the value; a returning tab advances one clamped frame.
- Reduced motionThe packs jump to the value and the hubs stand still; no frame is requested.
Notes
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 <audio> or <video> 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. It is a real slider (0–100 %, or seconds), keyboard-operable, with a read-only mode for pure readouts.
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.
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
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.