Skip to content

1.0.0

Choose a tag to compare

@gfazioli gfazioli released this 07 Jun 06:30
· 10 commits to master since this release

✨ Features

  • 📖 Multi-page book — stack any number of two-sided pages and turn them by dragging any point of the free edge in any direction: corner, mid-edge, up or down, forward or back. The page beneath shows through the curl.
  • 🎯 Compound API<Book><Book.Page><Book.Page.Front/><Book.Page.Back/></Book.Page></Book>, or the data-driven pages={[{ front, back }]} form. Any JSX goes inside a face: text, images, MDX, even a canvas.
  • 🧭 Controlled navigationpage / defaultPage / onPageChange with face-based indices: drive the book from arrows, dots, sliders or keyboard. Programmatic turns animate like a real drag, with turnOrigin (top / middle / bottom) controlling how the corner arcs.
  • 🌀 Two rendering paths — the default flat variant is a pure-DOM reflection fold (SSR-safe, interactive at rest, zero canvas); the opt-in rounded variant draws a true 3D curl on WebGL with a lit specular ridge, tuned by curlRadius, falling back to flat automatically on any WebGL failure.
  • 📚 Hard coverswithCover turns the first and last pages RIGID around the spine, and the closed book is compact: centered on the play-zone, sliding into the two-page spread as the cover opens (disabled under prefers-reduced-motion).
  • 🃏 Riffle — multi-page jumps flip through every page in between with compressed timing (riffleDuration), queued one page in flight at a time; works from dots, sliders, or any big page jump.
  • 🎨 Reveal layerrevealBackground at both levels: on the Book as the inside-cover base, per-page as a side-aware layer under the resting sheet.
  • 🧬 Inherited props — visual and gesture props set on the Book cascade to every page via context; any page can override locally. Book.Page also works standalone.
  • 🖐️ Gestures — drag, side-aware swipe, click-to-turn; mobileScrollSupport keeps vertical scrolling working on touch; flipThreshold, swipeDistance, swipeTimeThreshold and flippingTime tune the feel.
  • ⌨️ Accessibility — keyboard turns (arrows, Home, End), screen-reader live region with pageAnnouncement, respects prefers-reduced-motion.
  • 💅 Full Styles API — selectors (root, restSheet, curlSheet, shadowLayer, revealLayer, face, page) and CSS variables, themeable like every Mantine component.
  • 📡 EventsonFold (with phase: grab / drag / settle) and onFlip for reacting to every stage of a turn.

📝 Summary

First public release of @gfazioli/mantine-book: a realistic iBooks-style book for React built on Mantine. Stack two-sided pages and turn them by dragging any point of the free edge — or programmatically via controlled navigation — with a pure-DOM reflection fold (flat) or a true 3D WebGL curl (rounded). Hard covers, riffle through big jumps, full keyboard accessibility and the complete Mantine Styles API, in a package that stays quiescent at rest (no rAF, no canvas until you ask for it).


What's Changed

  • Curl: realistic page-curl via perpendicular-bisector reflection fold by @gfazioli in #1
  • chore(curl): review cleanups — styles-api drift, flipThreshold default, CLAUDE.md by @gfazioli in #2
  • feat(curl): soft curl shadows derived from the crease by @gfazioli in #3
  • feat(curl): rounded variant — true 3D WebGL page-curl by @gfazioli in #4
  • docs(curl): per-prop demos + shadowColor in the rounded variant by @gfazioli in #5
  • feat(book): Book — the multi-page public API by @gfazioli in #6
  • feat(book): turnOrigin — simulated corner grab for programmatic turns by @gfazioli in #7
  • feat(book): reveal layer — inside-cover base on Book, per-page revealLayer by @gfazioli in #8
  • fix: review quick wins — npm-facing description, reduced-motion settle, doc accuracy by @gfazioli in #9
  • feat(book): keyboard navigation and screen-reader semantics by @gfazioli in #10
  • feat(book): turn queue — one page in flight, serialized turns with accelerated riffle by @gfazioli in #11
  • Shared WebGL pool, riffle duration, 100-page demo, smooth rounded turns by @gfazioli in #12
  • PR-D: test hardening — close the 9 coverage gaps from the pre-publish review by @gfazioli in #13
  • withCover: rigid hard covers + the compact closed book by @gfazioli in #14
  • Docs audit: canonical structure, complete Props, live multi-file demos by @gfazioli in #15

New Contributors

Full Changelog: https://github.com/gfazioli/mantine-book/commits/1.0.0