# Pin Screen Teardown

The Pin Screen comes apart from the front as you scroll: the machined frame, the pressed pins standing out in the shape of a word, the bed of flush pins, the guide plate with a hole for every pin, the back plate and the case, each casting its shadow on the bench from one lamp.

Block · With a Pass · https://tactileui.dev/blocks/pin-screen-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/pin-screen-teardown (https://tactileui.dev/docs/registry-and-mcp). It lands in tactile/pin-screen-teardown/, with what it is built with beside it.

Load the stylesheet as well as the module, or it renders unstyled: tactile/pin-screen/pin-screen.css and tactile/pin-screen-teardown/pin-screen-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, { PinScreen }) from tactile/pin-screen-teardown/pin-screen-teardown.mjs. Every option has a default; tactile/pin-screen-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, Marching squares relief outline, Texture not element per pin, Container query layout

## Usage notes

Prove that an interface part is built like hardware: a product-page section where a real object, the Pin Screen, 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 guide plate explaining what lets a thousand pins slide without touching. 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. The pins are never an element each: the field is taken from the live component as textures, and the word they press is traced and stood up as a wall of rods.

## 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 pin screen needs the room. |
| text | text | The word pressed into the pins. The board is drawn again with it; a short word makes taller letters. |
| 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 Pin Screen is drawn in that finish: the frame, the plate and the pins; the back plate and the case follow its frame. |
| spacing | number | How far apart the parts stand up the stack, as a share of the default gap. The pin screen 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

- pinScreen
- scene
- progress
- go
- update
- destroy

## States

1. **Closed**: At the top of the section the pin screen lies assembled on the bench, larger than it will be parted: the machined frame round the board, the word standing proud of the pins under the lamp, each letter a wall of rods with its heads on top; the card says six parts and invites the scroll.
2. **Opening**: The frame rises clear and the levels part evenly up the stack on a spring; the pressed pins come off the bed and leave their places open; each shadow slides away from the lamp, widens and pales with the height; the frame's lip shadow leaves the bed as the frame lifts; the labels fade in with their leaders.
3. **A part on show**: In its share of the scroll the part rises clear and tips to the camera, and the stack opens round it like an accordion, the frame standing over it like a lid; 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 pressed pins**: The word lifts off the bed: six millimetres of rods under a plane of polished heads, and the bed under it shows the same word as open holes. The word's shadow on the bed softens and slides as it rises.
5. **The guide plate**: The plate comes forward with every hole open, one to every pin, so the lattice the pins slide through is seen against the bed above and the back plate below.
6. **Closing**: After the case the parts settle back into each other, the frame comes down onto the case, the shadows draw in to contact patches, and the pin screen 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**: On a page carrying the kit's tokens the Pin Screen is drawn in that finish, any of the twelve, through a live Pin Screen; on its own, aluminium or graphite (steel pins). A dark finish's guide plate is lifted to gunmetal so its holes show.
9. **Pressed word**: The word is an option (twelve characters): the board is drawn again with it, traced again, and every wall and shadow follows.
10. **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.
11. **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. Every line is still read.
12. **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. The plate, the flush pins, the heads, the holes and the frame are the Pin Screen's own baked drawing, taken from a Pin Screen mounted out of sight at the size this needs (it hands over paintBoard(open), which paints its plate with chosen holes open, and its layers); the word's outline is traced from the pins that stand out, and the back plate, the case and the shadows are drawn here.