Interactive Book
An interactive 3D book with realistic page-turning animations and hover effects.
The Art of UI
ObsidianUI
The Art of UI
Interactive Edition
Chapter One
Once upon a time, in a land of beautiful UI components, there lived a developer who dreamed of creating the perfect interactive experience...
The journey was long, but the destination was worth every line of code written with passion and purpose.
Chapter Two
The developer discovered the power of Framer Motion, and with it, brought life to static interfaces. Buttons danced, cards floated, and users smiled.
Animation was not just decoration—it was communication, guiding users through experiences with grace and clarity.
The End
And so, with glassmorphism effects and smooth transitions, the developer created components that stood the test of time. The end... or just the beginning?
Thank you for reading. May your code be clean and your animations smooth.
The End
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/interactive-book.json"Install Manually
Install dependencies
Copy the source code
Copy into components/ui/interactive-book.tsx
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| coverImage | string | Required | URL for the book cover image |
| bookTitle | string | 'Book Title' | Title displayed on cover |
| bookAuthor | string | 'Author Name' | Author name on cover |
| pages | BookPage[] | Required | Array of page objects |
| width | number | string | 350 | Book width in pixels |
| height | number | string | 500 | Book height in pixels |