Usage

The Book3D component is fully customizable with smart defaults. Use it out-of-the-box or customize every aspect.

Basic Usage (Default)

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

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

This displays a beautiful RareUI-branded book with 6 pre-filled pages about RareUI.

Custom Cover

Add your own cover image and title:

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

Custom Pages

Define your own page content:

const customPages = [
  {
    title: "Introduction",
    content: "Welcome to my book. This is the first page with an introduction."
  },
  {
    image: "/illustration.jpg",
    caption: "A beautiful illustration"
  },
  {
    title: "Chapter 1",
    content: "The story begins here..."
  },
  {
    quote: "Design is not just what it looks like and feels like. Design is how it works.",
    author: "Steve Jobs"
  }
];

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

Fully Customized

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

Props

Prop	Type	Default	Description
src	string	undefined	Cover image URL. If not provided, shows RareUI branding.
title	string	undefined	Title displayed on cover.
subtitle	string	undefined	Subtitle displayed on cover.
pages	PageData[]	[...]	Array of page content objects. Defaults to RareUI demo pages.
width	number	230	Book width in pixels.
height	number	350	Book height in pixels.
className	string	undefined	Additional CSS classes for the container.

PageData Interface

Each page in the pages array can have the following properties:

interface PageData {
  title?: string      // Page title
  content?: string    // Main text content
  image?: string      // Image URL
  caption?: string    // Image caption (not currently used)
  quote?: string      // Blockquote text
  author?: string     // Quote attribution
}

Page Types

You can create different types of pages:

Text Page:

{
  title: "Chapter 1",
  content: "Your text content here..."
}

Image Page:

{
  image: "/path/to/image.jpg",
  caption: "Optional caption"
}

Quote Page:

{
  quote: "The only limit is your imagination.",
  author: "Unknown"
}

Mixed Content:

{
  title: "Chapter 2",
  content: "Some text...",
  image: "/image.jpg"
}

Features

• Interactive 3D Animation: Hover to open, click pages to flip
• Realistic Physics: Smooth page-turning animations with natural easing
• Bi-directional Navigation: Click right to advance, click left to go back
• Smart Defaults: Beautiful RareUI branding when no customization provided
• Fully Customizable: Override cover, title, and all page content
• TypeScript Support: Full type safety with defined interfaces
• Responsive: Configurable dimensions to fit your layout

Interactions

1. Hover → Book opens (cover flips to the left)
2. Click right page → Flip to next page
3. Click left page → Flip back to previous page
4. Mouse leave → Book closes automatically

Tips

• Keep content text concise (50-100 words) for best readability
• Use high-quality images with good contrast for the cover
• Limit pages to 4-6 for optimal user experience
• The book resets to page 1 when closed