book.js

Realistic 3D page-flip for the web. Three.js + custom shader. No flat-triangle fakes.

Packages

Package	What
@bookjs/core	Vanilla TypeScript, all options live here. Peer-deps on three.
@bookjs/react	React component wrapper.
@bookjs/vue	Vue 3 SFC wrapper.
@bookjs/svelte	Svelte 5 component wrapper.
@bookjs/astro	Astro component with client:visible hydration.
@bookjs/themes	Optional starter themes (hardcover, minimal, paperback).

Examples

• examples/vanilla — plain HTML + importmap, no build.
• examples/astro — full Astro 5 project.

Quick start (vanilla)

<canvas id="book"></canvas>
<script type="importmap">
  { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js" } }
</script>
<script type="module">
  import { Book } from "https://cdn.jsdelivr.net/npm/@bookjs/core/dist/index.js";
  new Book(document.getElementById("book"), {
    pages: [
      { type: "cover", title: "On Folding Pages" },
      { type: "html",  content: "<h2>Abstract</h2><p>...</p>" },
      { type: "image", src: "/page-3.png" },
    ],
  });
</script>

Quick start (Astro)

---
import { Book } from "@bookjs/astro";
---
<Book
  client:visible
  pages={[
    { type: "cover", title: "On Folding Pages" },
    { type: "html",  content: "<h2>Abstract</h2><p>...</p>" },
  ]}
/>

Design principles

• No auto-flip on hover. The drag is the interaction.
• Three.js is a peer dependency. We don't bundle it; you bring it.
• CDN + importmap stays viable. No build step required for the simple case.
• Framework adapters are thin. All logic lives in core.
• An accessible HTML fallback always renders. SEO + screen readers see real text, not a canvas.
• Reduced motion is respected. prefers-reduced-motion: reduce swaps pages instantly.

Dev

npm install
npm run build              # build all packages
npm run dev:vanilla        # serve examples/vanilla on :4173
npm run dev:astro          # run the Astro example