Bookshelf

A shelf of cloth-bound books. Pull one out and it opens on the desk: covers swing on a hinge and pages turn by the corner.

byUrvish Mali from Uselayouts

Installation

terminal

pnpm dlx layro-cli add @iurvish/bookshelf

npx layro-cli add @iurvish/bookshelf

npx layro-cli add @iurvish/bookshelf

bunx layro-cli add @iurvish/bookshelf

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, type PointerEvent as ReactPointerEvent, type ReactNode, type Ref } from "react";

/* ───────────── Paper: a sheet turned by one corner ───────────── */

// Geometry of a sheet of paper being turned by one corner.
//
// Page space: the turning page spans x ∈ [0, W] measured from the spine, y ∈ [0, H] downward.
// Its free corner C = (W, cy) (cy = 0 for the top corner, H for the bottom) is pulled to M.
//
// 1. Paper doesn't stretch. The corner stays within W of the spine corner on its own edge, and within
//    the page diagonal √(W²+H²) of the spine corner on the opposite edge.
// 2. A flat sheet folded so C lands on M creases along the perpendicular bisector of CM: