One page at a time

layout: "single" keeps one page on screen whatever the container’s width, click: "corners" leaves the middle of the page to whatever it holds, and the fixed width and height are used as they are.

OpenPageFlip

A page-turn effect for the web

Drag a corner

Pick up any corner and pull. Let go past the middle and the page turns. Let go early and it settles back.

Or just click

A click on either half turns the page that way. On a touch screen, a swipe does the same.

Hard and soft

Covers are hard: they swing as one rigid sheet. Inner pages bend along the fold, like paper.

Any HTML

Pages are ordinary elements. Text, images, forms, video: whatever a page holds keeps working.

The end

single-page.ts

import "@openpageflip/core/styles.css";
import { type Book, createBook } from "@openpageflip/core";

export function mount(container: HTMLElement): Book {
  return createBook(container, {
    width: 300,
    height: 420,
    layout: "single", // one page at a time, however wide the container is
    click: "corners", // only a click near a corner turns the page
    flipDuration: 600,
  });
}