KQ-1198 · TAPE/REELS
Tape Reels
An inline loader drawn as a cassette whose tape winds from one reel to the other. The two packs are sized from the tape itself — their areas always add up to the same length — and each reel turns by the tape that moves over its own pack's radius, so the emptying reel speeds up while the filling one slows, as real tape does; given progress the tape follows it on the glide spring, and without it a motor winds at a steady tape speed and rewinds fast on a move ease. Dragging the cassette sideways pulls the tape 1:1, rubber-banded at the ends, and a release coasts to where the throw would rest on glide with the release velocity (or glides back to the progress, since the job owns the tape); holding Left or Right winds it the same way.
Side B windingDrag sideways, or hold Left or Right, to wind the tape by hand.
winding · side a · 0%
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/tape-reels
Props
- label
- string
- default "Loading"
- What is loading: the loader's accessible name, shown beside the cassette unless hideLabel. On this glyph label is the cassette's paper label, so the text is the label.
- hideLabel
- boolean
- default false
- Keep the label for assistive technology only.
- size
- number
- default 24
- The glyph's box in px, crisp from 16 to 64. Below 24 each hub shows one notch and the tape path drops out; below 44 the screws, rollers' detail, handwriting and window glint.
- speed
- number
- default 1
- How fast the motor winds (about 9 s for the whole tape at 1) and rewinds, 0.5 to 2.
- progress
- number
- default —
- How much tape is on the take-up reel, 0 to 1; the caption becomes a progressbar. Omitted, the tape winds and rewinds on a loop.
- shell
- "clear" | "smoke" | "ivory"
- default "clear"
- The cassette's plastic: clear shows the whole mechanism in the page's own tint, smoke darkens it, ivory is opaque so only the window shows the packs.
- sticker
- boolean
- default true
- The paper label across the shell — a colour band, ruled lines and handwriting at 44 px and up — with the window cut through it.
- sound
- boolean
- default false
- A click when a scrub grabs and lets go of the tape (and on a jog), and a whir while it is pulled that follows the faster reel's spin. The motor is silent.
- disabled
- boolean
- default false
- The tape keeps winding but cannot be scrubbed or jogged.
- className
- string
- default —
- Classes for the root, an inline-flex row of the cassette and its caption.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Loading" | What is loading: the loader's accessible name, shown beside the cassette unless hideLabel. On this glyph label is the cassette's paper label, so the text is the label. |
| hideLabel | boolean | false | Keep the label for assistive technology only. |
| size | number | 24 | The glyph's box in px, crisp from 16 to 64. Below 24 each hub shows one notch and the tape path drops out; below 44 the screws, rollers' detail, handwriting and window glint. |
| speed | number | 1 | How fast the motor winds (about 9 s for the whole tape at 1) and rewinds, 0.5 to 2. |
| progress | number | — | How much tape is on the take-up reel, 0 to 1; the caption becomes a progressbar. Omitted, the tape winds and rewinds on a loop. |
| shell | "clear" | "smoke" | "ivory" | "clear" | The cassette's plastic: clear shows the whole mechanism in the page's own tint, smoke darkens it, ivory is opaque so only the window shows the packs. |
| sticker | boolean | true | The paper label across the shell — a colour band, ruled lines and handwriting at 44 px and up — with the window cut through it. |
| sound | boolean | false | A click when a scrub grabs and lets go of the tape (and on a jog), and a whir while it is pulled that follows the faster reel's spin. The motor is silent. |
| disabled | boolean | false | The tape keeps winding but cannot be scrubbed or jogged. |
| className | string | — | Classes for the root, an inline-flex row of the cassette and its caption. |