Book renders artwork as a physical book rather than a flat image: a cover, a blurred spine shadow, and a visible block of pages hinged on the cover's right edge. On hover the whole object turns, and because the rotation is a real 3D transform the page block turns with it instead of sliding behind it.
Use it wherever a cover is the subject — a library, a reading list, a chapter index. For a plain image in a frame, use Media.
Book fills the box you give it and keeps its own cover proportions, so size it from the outside — a maxWidth on the parent, or a grid cell. It takes every Flex prop, so aspectRatio, radius and the spacing tokens work as usual.
Pass href to make the whole book a link. It renders through ElementType, so internal routes get client-side navigation and external ones get the right rel.
children render above the artwork, inside a dark-themed column, so text sits legibly on top of a cover. Leave src off entirely to get a blank cover you compose yourself.
The tilt is hover-gated and switched off under prefers-reduced-motion. On touch devices the cover stays square-on: there is no hover to return from, and a permanently rotated cover reads as a rendering fault rather than a style.
