CSS-driven 3D page-flip flipbook for Strata CSS. Renders HTML pages or PDFs with an organic page-flip animation. Drag to flip, sounds, 6 presets, responsive.

Installation

npm install @strata-packages/flipbook

Quick Start

<link rel="stylesheet" href="flipbook.css">
<script src="flipbook.js"></script>

<!-- Zero-config: existing children become pages -->
<div id="book">
  <div>Page 1</div>
  <div>Page 2</div>
</div>
<script>StrataFlipbook('#book')</script>

Or pass content explicitly:

<div id="book"></div>
<script>
  StrataFlipbook('#book', {
    content:    '.my-pages',   // selector, NodeList, or Element[]
    preset:     'magazine',
    pagination: 'dots',
    drag:       true,
    exportable: true,
    sound:      { enabled: true },
  })
</script>

PDF Viewer

<script>pdfjsLib.GlobalWorkerOptions.workerSrc = '...'</script>
<div id="book"></div>
<script>
  StrataFlipbook('#book', { source: 'pdf', content: '/doc.pdf' })
</script>

Presets

notebook (default) · magazine · paperback · hardcover · comic · minimal

Pagination modes

controls (default) · dots · input · thumbnails · none · or array e.g. ['controls', 'dots']

Peer dependencies

Package	When needed
`pdfjs-dist`	`source: 'pdf'`
`html2canvas`	Export HTML source to PDF
`pdf-lib`	Any PDF export

All MIT or Apache-2.0. None inject inline styles or JS.

See CLAUDE.md for full API reference.

Documentation

Full API reference, options and live examples: https://strata-css-docs-site.vercel.app/packages/flipbook

@strata-packages/flipbook is part of Strata CSS — a JIT CSS framework that pairs Bootstrap-style component classes with Tailwind-style on-demand generation, cascade layers instead of !important, variants (hover:, group-hover:, peer-checked:), arbitrary values and three built-in themes.

Framework docs — https://strata-css-docs-site.vercel.app
Source and issues — https://github.com/AftabIbrahimKazi/strata
Framework on npm — strata-css

Other Strata packages

Package	What it does
`@strata-packages/chart`	Three.js chart component. Works standalone or with Strata CSS.
`@strata-packages/cursorfx`	Modular cursor effects — one shared engine, ten opt-in presets. Works standalone or with Strata CSS.
`@strata-packages/forms`	Interactive form controls for Strata CSS — custom select with every variant developers need.
`@strata-packages/modal`	Lightweight modal component. Works standalone or with Strata CSS.
`@strata-packages/offcanvas`	Lightweight offcanvas drawer component. Works standalone or with Strata CSS.
`@strata-packages/picker`	Date, time, and datetime picker for Strata CSS. Works standalone or with Strata.
`@strata-packages/shopmap`	Lightweight, theme-aware map component with terrain, hypsometric tinting, and procedural hillshading. Zero API keys. Free for commercial use.
`@strata-packages/skeleton-loader`	Lightweight skeleton loader plugin. Works standalone or with Strata CSS.