Skip to main content

​
Overview

Book3D uses CSS perspective and transformStyle: preserve-3d combined with Framer Motion to create a realistic 3D book. Hovering opens the cover, clicking pages flips through them sequentially, and leaving the component closes the book automatically. No Three.js or WebGL required.

​
Installation

npx rareui@latest add book-3d
Requires framer-motion as a peer dependency.
npm install framer-motion

​
Usage

import { Book3D } from "@/components/rareui/3D elements/book-3d";

export default function App() {
  return <Book3D />;
}

​
Props

​
src
string
URL of an image to use as the book cover background. If omitted, the default RareUI branding cover is shown.
​
title
string
Title text displayed on the cover in a large serif font.
​
subtitle
string
Subtitle text displayed below the title on the cover in small uppercase tracking.
​
width
number
default:"230"
Book width in pixels.
​
height
number
default:"350"
Book height in pixels.
​
pages
PageData[]
default:"[...RareUI demo pages]"
Array of page content objects. Defaults to a set of RareUI demo pages. Each PageData object can contain:
  • title?: string — Page heading
  • content?: string — Body text
  • image?: string — Image URL displayed on the page
  • caption?: string — Image caption (reserved for future use)
  • quote?: string — Blockquote text
  • author?: string — Quote attribution
​
className
string
Additional CSS classes applied to the outermost container.

​
Examples

​
Custom cover with title

<Book3D
  src="/my-book-cover.jpg"
  title="My Awesome Book"
  subtitle="By Jane Doe"
/>

​
Custom pages

const myPages = [
  {
    title: "Introduction",
    content: "Welcome. This is the first page."
  },
  {
    image: "/illustration.jpg",
    caption: "A beautiful illustration"
  },
  {
    quote: "Design is how it works.",
    author: "Steve Jobs"
  }
];

<Book3D
  src="/cover.jpg"
  title="My Book"
  pages={myPages}
/>

​
Larger format

<Book3D
  src="/fantasy-cover.jpg"
  title="The Chronicles"
  subtitle="An Epic Tale"
  width={250}
  height={380}
  pages={myCustomPages}
/>

​
Interactions

GestureEffect
HoverOpens the book — cover flips left, body tilts in 3D
Click right pageFlips to the next page
Click left (flipped) pageFlips back to the previous page
Mouse leaveBook closes and resets to page 1
Keep content text under 100 words for best readability at the default size. Limit pages to 4–6 for optimal UX — too many pages makes navigation tedious.

​
Features

CSS 3D Transform

Uses perspective, transformStyle: preserve-3d, and rotateY to achieve a convincing 3D book effect without WebGL.

Realistic Page Flip

Pages animate with a custom cubic bezier easing [0.23, 1, 0.32, 1] and staggered delays for natural motion.

Bi-directional Navigation

Click either side of an open page to advance or go back, with debounce protection against rapid clicking.

Fully Customizable

Override cover image, title, subtitle, dimensions, and all page content via props.

Build docs developers (and LLMs) love

Get started for freeTalk to us