Cassette Teardown
The Cassette comes apart from the front as you scroll: the top shell with its window, the tape path, the two reels, the pressure pad on its spring, the guide rollers and the bottom shell, each casting its shadow on the bench from one lamp.
Built with Cassette
What it is for
Prove that an interface part is built like hardware: a product-page section where a real object, the Cassette, is taken apart while the visitor scrolls, each part named by a leader line and given its turn with one line on what it does, and the pressure pad explaining the small part that lets a deck read the tape at all.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 6 days. Want one email that morning?
Datasheet
- Mechanism
- Scroll driven exploded view, Sticky pinned frame, Spring smoothed progress, Strip walls lit by normals, Lamp true cast shadows, Pre blurred shadow crossfade, Projected leader labels, Object drawing reuse, Solved tape path, Container query layout
- Stack
- Vanilla ES modules, Css 3d transforms, Canvas 2D
- Needs
- Cassette
- States
- 11 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- ClosedAt the top of the section the cassette lies assembled on the bench, larger than it will be parted: the top shell with its window, its print and its screws over the two reels; the card says six parts and invites the scroll.
- OpeningThe top shell rises clear and draws back to stand over the stack; the other parts part evenly up the stack on a spring; the hubs turn with the scroll; each shadow slides away from the lamp, widens and pales with the height; the labels fade in with their leaders.
- A part on showIn its share of the scroll the part rises clear and turns to the camera; its label, leader and dot go to full ink, its stop key presses and lights green, the card shows its name and line, and a polite live region reads them.
- The pressure padThe pad lifts out of the stack, grows and tips toward the camera so the felt, the leaf spring and the plate it is riveted to can be read.
- The reelsThe hubs lift out of the wound tape, so the six teeth inside each, the clamp that holds the tape's end and the pack's own hole are seen.
- ClosingAfter the bottom shell the parts settle back into each other, the top shell comes down onto the stack, the shadows draw in to contact patches, and the cassette grows to its closed size; the card says it is back together.
- Stop keysSix keys, one per part, scroll to its turn (smoothly, or at once with reduced motion); the one on show is aria-current.
- FinishesThe shell is the Cassette's own: clear plastic on a light finish, smoked on a dark one, its edges and print from the finish's tokens on a page that carries them, any of the twelve. The steel, the nylon, the felt and the tape are what they are.
- PhoneHeading, stage, card and keys in one column, three keys to a row, only the part on show named; the cassette is seen from higher so the stack is short enough to be drawn large; no sideways scroll at 390 px. A short frame drops the sentence, then the kicker.
- Reduced motionNo travel: the scroll position picks a still, closed or apart with that part on show, and the keys jump there at once; the hubs stand still. Every line is still read.
- Off screenNothing runs: the spring sleeps when it settles and no frame is asked for while the section is out of view.
Notes
The physics is in the light: every face and wall is lit by one lamp, and every part's shadow on the bench grows, softens and slides away from that lamp as it rises.
Original. Both shell halves, the hubs and the wound tape are the Cassette's own baked drawing, taken from a cassette mounted out of sight at the size this needs (the far half without its pad and rollers, which the Cassette now hands over as its own layer); the pressure pad, the rollers, the posts and the tape ribbon are drawn here, the tape on the route the Cassette solves. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own, as WOFF2.
Anatomy
Scroll driven exploded view, Sticky pinned frame, Spring smoothed progress, Strip walls lit by normals, Lamp true cast shadows, Pre blurred shadow crossfade, Projected leader labels, Object drawing reuse, Solved tape path, Container query layout
Usage notes
Prove that an interface part is built like hardware: a product-page section where a real object, the Cassette, is taken apart while the visitor scrolls, each part named by a leader line and given its turn with one line on what it does, and the pressure pad explaining the small part that lets a deck read the tape at all. The physics is in the light: every face and wall is lit by one lamp, and every part's shadow on the bench grows, softens and slides away from that lamp as it rises.
Options
| Option | Type | Description |
|---|---|---|
| kicker | text | Printed small above the heading. Empty leaves it out. |
| title | text | Heading |
| lede | text | Left out on a short screen, where the cassette needs the room. |
| finish | enum | Auto takes the page’s own finish tokens if it has them (any of the twelve), then its data-finish, then the visitor’s system. The shell is the Cassette’s own: clear plastic on a light finish, smoked on a dark one. The steel, the nylon, the felt and the tape are what they are in every finish. |
| spacing | number | How far apart the parts stand up the stack, as a share of the default gap. The cassette is sized so the whole stack fits. |
| captions | boolean | The card with each part’s line. Off, the lines are still read out to a screen reader. |
Methods
- cassette
- scene
- progress
- go
- update
- destroy
How it works
Original. Both shell halves, the hubs and the wound tape are the Cassette's own baked drawing, taken from a cassette mounted out of sight at the size this needs (the far half without its pad and rollers, which the Cassette now hands over as its own layer); the pressure pad, the rollers, the posts and the tape ribbon are drawn here, the tape on the route the Cassette solves.