Pin Screen Teardown

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, Marching squares relief outline, Texture not element per pin, Container query layout

Stack

Vanilla ES modules, Css 3d transforms, Canvas 2D

Needs

Pin Screen

States

12 documented

Version

0.1.0

Licence

With a Pass

States

1. ClosedAt 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. OpeningThe 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 showIn 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 pinsThe 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 plateThe 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. ClosingAfter 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 keysSix keys, one per part, scroll to its turn (smoothly, or at once with reduced motion); the one on show is aria-current.
8. FinishesOn 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 wordThe word is an option (twelve characters): the board is drawn again with it, traced again, and every wall and shadow follows.
10. PhoneHeading, stage, card and keys in one column, three keys to a row, only the part on show named; the pin screen is seen from higher and the parts stand closer so it can be drawn large; no sideways scroll at 390 px. A short frame drops the sentence, then the kicker.
11. Reduced motionNo 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 screenNothing runs: the spring sleeps when it settles and no frame is asked for while the section is out of view.