@vysmo/flipbook Component DOM Built on Transitions

Flip Book for the modern web.

WebGL flipbook around the page-curl mesh transition. Drop-in component or headless API. Click, drag-scrub mid-flip, keyboard nav. Drag-scrub is the ecosystem-native hook.

~3 KB gzipped
0 runtime deps
WebGL2 renderer

$ pnpm add @vysmo/flipbook View on GitHub

Page14

Component

flipbook

Settings

Axis

Behavior

Flip duration2000 ms

Drag commit threshold0.50

Tilt0.12

Autoplay interval4.00 s

What you ship

Container element in, headless flipbook out. Click halves, drag corners mid-flip, arrow keys — all wired by default.

import { createFlipbook } from "@vysmo/flipbook";

const flip = createFlipbook({
  container: document.querySelector("#book")!,
  pages: ["/p1.jpg", "/p2.jpg", "/p3.jpg", "/p4.jpg"],
  axis: "horizontal",
  loop: true,
});

Powered by

Flip Book composes @vysmo/transitions (the page-curl mesh shader), @vysmo/animations (commit / revert tweens), and @vysmo/easings. Three small libraries, one drop-in component.

Read the full docs