A closed book opens its cover as you start scrolling — then a page turns in the middle to reveal a new spread. Pure CSS 3D, no library. Editorial / library energy.
A 3D book sits closed at the start of the scroll. As you begin scrolling, the cover rotates open from its left edge in 3D, exposing the first spread. As you continue, a single page turns in the middle, revealing a fresh spread underneath. The pattern: scroll = read. Beautiful for novel sites, recipe books, museum / library projects, and any storytelling page that wants to feel like a physical artifact.
A book container with perspective and transform-style: preserve-3d. Two static pages (left + right) form the open spread at inset halves of the book. On top of the right half sits the cover, which has transform-origin: left center and rotates rotateY(-180deg) when --p:0.25. As --p grows further (~0.45 onward), a separate .bk-flip page (positioned over the right half) rotates from 0° to -180° — that's the page turn. The math: rotateY(min(0deg, -180deg × (--p - 0.45) × 3)) means the flip starts at --p ≥ 0.45.
Scroll inside. The cover swings open first, then a page turns mid-scroll revealing a new spread.
It is a small philosophical claim, but a true one: the things you choose to wait for are the things that turn out to matter.
This is a book about patience. About waiting for cloth to dye, for bread to rise, for someone to call back. About the gap between hitting send and hearing a reply.
The author wrote these pages slowly on purpose. Read them the same way.
There is no rush in print. The page has been here for centuries and it will be here when you put the book down.
Scroll a little further and the page will turn.
This is the back of page 13. As you scroll, you'll rotate it left — and reveal pages 14 and 15 underneath.
Build a 3D scroll-driven book that opens its cover and turns a page. Sticky pin (top:0 height:100vh perspective:1800px) inside a 2600px-tall section. Inside the pin a "book" container (640×420, transform-style:preserve-3d, transform:rotateX(20deg)). Inside the book: a vertical SPINE strip down the middle (16px wide, brown gradient), and two STATIC pages — .bk-page.left (right:50%) and .bk-page.right (left:50%) — each cream paper background with serif (Cormorant Garamond) text including a chapter label, an italic-accented headline, paragraphs, and a folio page number. On top of the right page place a COVER element (right:0, left:50%, transform-origin:left center, transform:rotateY(calc(-180deg * min(1, var(--p) * 4)))) — the cover swings open from the spine as --p crosses ~0.25. The cover has a deep violet gradient + a centered italic title "The book of quiet things" + author + edition info. Below the cover (z-index lower) place a FLIP page element with transform:rotateY(calc(min(0deg, -180deg * (var(--p) - 0.45) * 3))) — this page is the back of the right spread that turns starting around --p:0.45, revealing whatever's printed on the static right page beneath. Add backface-visibility:hidden to cover and flip so their backs don't bleed through. Show a "State: CLOSED / OPENING / OPEN / TURNING" readout. Use peak-at-middle easing so the whole sequence reverses on scroll-up.