Page curlPro
A small magazine you read by dragging page corners, with a real fold, lit curl, and flick to turn.
Live · keyboard ready
Issue 04
Slow rooms
Page 1 of 8
- Editorial and brand showcases where paper is part of the story.
- Menus, catalogs, and yearbooks with a handful of spreads.
- Use carousel or a scrolling page for long content or content people search.
- Use a document viewer for dense text that needs zoom and selection.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { PageCurl } from "@/components/arc/page-curl/page-curl"; export function Lookbook() { return ( <PageCurl label="Autumn lookbook" style={{ width: 540 }} pages={[<Cover key="cover" />, <Intro key="intro" />, <Plate key="plate" />]} /> );}PageCurl
A small book or magazine that opens on its cover. On first view the cover corner curls up and settles next to a "Drag the corner" hint. Tap the right page to go forward and the left page to go back, or drag a page: it folds along a line that follows the pointer, showing its back, a lit curl, and a shadow on the page below. A page count with previous and next controls sits underneath.
PropTypeDefaultDescription
pagesRequiredReactNode[]–Page contents in reading order. Page one is the cover and sits alone on the right.spreadnumber–Controlled spread. 0 shows the cover; spread n shows pages 2n and 2n + 1 (one-based).defaultSpreadnumber0Initial spread when uncontrolled.onSpreadChange(spread: number) => void–Called when a page finishes turning.pageAspectnumber0.72Page width divided by height.labelstring"Book"Accessible name of the book.teasebooleantrueCurls the cover corner once when the book first comes into view, and a little on hover until the first turn.hintReactNode | null"Drag the corner"Hint under the lower outer corner, shown until the first interaction. Pass null to hide it.controlsbooleantrueShows the page count with previous and next buttons under the book.classNamestring–Extra class on the root. Its width holds two pages side by side.styleCSSProperties–Inline styles on the root.- ArrowRightorPageDown
- Turns to the next spread.
- ArrowLeftorPageUp
- Turns to the previous spread.
- Tab
- Moves from the book to the previous and next page buttons.
- The book is a focusable group with aria-roledescription="book" and the label as its name.
- A polite status reads the visible pages, such as "Page 2 and 3 of 8".
- Only the resting pages are in the accessibility tree; the turning copies are aria-hidden.
- Previous and next are real buttons with labels and disable at the covers. The visible count and the hint are decorative duplicates of the status.
- The fold line is the perpendicular bisector between the corner and the pointer, so the page follows the finger from where it was grabbed.
- The corner is held within a page width of the spine, like paper bound on one side.
- The flap is a mirror of the sheet across the fold with a lit curl at the crease; the page below gets a soft shadow at the fold.
- Release projects the pointer's momentum: past the middle or a flick turns the page on a spring that keeps the release velocity; otherwise it lays back down.
- The first time the book is mostly in view, the cover corner lifts about a quarter of the page on a soft spring, holds, and lays back down. Until the first turn, entering the book with a mouse repeats it at half the size, at most every 2.5 seconds.
- Hovering a corner lifts it. Hovering a page shows a chevron at its outer edge for the direction a tap turns. Taps, arrow keys, and the buttons turn along a lifted arc.
- The hint fades out for good after the first drag, tap, key, or button press.
- The closed book slides to center on its cover and back cover.
- Reduced motion swaps spreads without the curl and skips the tease.
- Page size derives from the root width, so a 288px wide book still shows two readable pages.
- Each page is one tap and drag target with touch-action pan-y, so vertical swipes still scroll the page on touch.
- Fold geometry is computed once per frame from two motion values; clip paths and a matrix update without React renders.
- Up to three copies of a page render while it turns; only the resting spread renders otherwise.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for short, visual sequences: lookbooks, menus, reports, zines, and portfolios.
- Keep pages simple and fixed in size; each page renders into a slot of the same width and aspect ratio.
- An even number of pages ends on a back cover alone on the left.
- Make page one a real cover with a title, so the closed book reads as something to open.
The full library index for assistants is at /llms.txt.