How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
The book
- It is made of leaves. Each leaf has a front and a back, so five leaves give ten pages: the front cover, eight inside pages and the back cover. The book is two pages wide; each page is 5:7 (portrait), so the open book is 10:7.
- It sizes itself to the width of its box (never wider than 1100px, and never taller than the screen) and everything inside is measured against that width, so it looks the same at any size. Pages are designed on a 500 by 700 grid (--u is one grid pixel).
- It is seen from slightly above (tipped 6° back) with strong perspective (2600px), so the turning leaf has real depth.
- At the start and at the end the book is shut, so it shifts sideways to keep its single visible page centred: the front cover is centred before it opens, the back cover after it closes. The shift is eased with the opening and closing, not a jump.
Turning
- One turn takes 0.95s with an ease-in-out. A leaf swings 180° about the spine, lifts up to 28px off the book as it passes the vertical, and sets down on the other side.
- Shading follows the turn: the leaf darkens on one side and brightens on the other at its peak and returns to normal when flat. Resting pages have a soft shadow along the spine.
- Jumping several pages at once (the Home and End keys) turns the leaves one after another, 0.11s apart, like riffling a book.
Controls
- Click: the right page turns forward, the left page turns back. When the book is shut at the front, a click anywhere opens it; shut at the back, a click anywhere goes back.
- Drag: press on a page and pull sideways (more than 6px counts as a drag). The leaf follows the pointer exactly. Let go past 30% of the way and it finishes turning; before that it springs back. Works with mouse, pen and touch (vertical swipes still scroll the page).
- Keyboard: the book can be focused (Tab). Left and right arrows turn one page, Home goes to the cover, End to the back cover. Focus shows an outline.
- Buttons: "←" and "→" under the book, disabled at either end, with a live label between them ("Cover", "Pages 2–3", "Back cover") that screen readers announce.
- Links and buttons inside pages work normally and never start a drag.
- Pages that are not currently visible are removed from the tab order and from screen readers (inert). Fallbacks: with "reduce motion" on, pages change instantly with no lift and no riffle. If a photo fails to load the page still turns normally.