Book Shelf

a shelf of twelve books. press a spine and that book comes out of the row, turns to face you and lands in the middle of the stage with a scrim behind it.

key insight: the thing arriving in the centre is the object that was on the shelf, turned. the spine is the box's front face and the cover its right face, so bringing the cover to the reader is one rotation and nothing is faded into anything. a modal grown out of a card is two elements and a crossfade.

the scrim is a plane in the same 3D scene at translateZ(100px), since a preserve-3d context paints by depth and ignores z-index. no backdrop-filter on it: chrome cuts the backdrop where the book sits and leaves two seams the height of the stage.