Book.js
Realistic 3D page-flip for the web. Three.js + custom shader. Vanilla core + framework adapters.
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/[email protected]/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: reduceswaps 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
