# 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.

Block · With a Pass · https://tactileui.dev/blocks/cassette-teardown

> The code and styling for this block 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/cassette-teardown (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/cassette-teardown/, with what it is built with beside it.

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

Then mount(element, options, { Cassette }) from tactile/cassette-teardown/cassette-teardown.mjs. Every option has a default; tactile/cassette-teardown-example.html shows it running. The sample copy (headings, labels, figures) is placeholder: replace it with the page's own.

## 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

## States

1. **Closed**: At 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.
2. **Opening**: The 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.
3. **A part on show**: In 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.
4. **The pressure pad**: The 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.
5. **The reels**: The 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.
6. **Closing**: After 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.
7. **Stop keys**: Six keys, one per part, scroll to its turn (smoothly, or at once with reduced motion); the one on show is aria-current.
8. **Finishes**: The 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.
9. **Phone**: Heading, stage, card and keys in one column, three keys to a row, only the part on show named. A short frame drops the sentence, then the kicker.
10. **Reduced motion**: No 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.
11. **Off screen**: Nothing runs: the spring sleeps when it settles and no frame is asked for while the section is out of view.

## 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.