--- title: Flip Book description: A hardcover photo book whose pages turn and bend in 3D. category: Cards tier: pro url: https://ui.dimaac.com/components/flip-book registry: https://api.dimaac.com/v1/ui/r/flip-book.json registry_auth: Authorization: Bearer --- # Flip Book A hardcover photo book with one landscape photo printed across every spread. Click a page, drag it by hand or press the arrow keys and it turns in 3D on a custom page-turn ease: the page is cut into thin hinged strips so it bends while it turns, it shades as it tilts away from the light and casts a shadow on the page below. The cover is a stiff board that slides the book to the middle when it closes, the page stacks thin and thicken as you read, and going past the last spread riffles back to the first one, fast and motion-blurred. Captions and a page count sit under the book, real buttons turn the pages, screen readers hear each spread, and with reduced motion the spreads simply change without turning. ## Install This is a Pro component: its source is for buyers of Pro Components, a Templates plan or All-Access, and is not on this page. It installs from the authenticated registry, with the licence key in an environment variable. 1. Merge the registry into components.json (the key is never written into the file): ```json { "registries": { "@dimaac-pro": { "url": "https://api.dimaac.com/v1/ui/r/{name}.json", "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" } } } } ``` 2. Put the licence key in `.env.local` (keep it out of git; never print or commit it). Ask the owner for it if it isn't set: ```bash DIMAAC_LICENSE_KEY=your-licence-key ``` 3. Add the component: ```bash npx shadcn@latest add @dimaac-pro/flip-book ``` The registry item is https://api.dimaac.com/v1/ui/r/flip-book.json and answers only with `Authorization: Bearer ` (or `X-License-Key`). It answers 401 without a key, 403 for a key that isn't valid, and 402 for a key whose purchase doesn't include Pro components (see https://ui.dimaac.com/pricing). Dependencies: ```bash pnpm add gsap @gsap/react npm install gsap @gsap/react ``` By hand: Unlock the code on https://ui.dimaac.com/components/flip-book with your licence key, then: 1. Install the packages it uses: gsap, @gsap/react. 2. Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/flip-book.tsx. 3. It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS. 4. Import it with import { FlipBook } from "@/components/dimaac/flip-book" and give its parent a size: it fills it. ## Usage ```tsx import { FlipBook } from "@/components/dimaac/flip-book"; ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `pages` (required) | `FlipBookPage[]` | - | The spreads, in order. Each photo is split across the left and right page. | | `duration` | `number` | `0.85` | How long one page turn takes, in seconds. | | `ease` | `string` | `".42,.05,.25,1"` | The page-turn ease: four cubic-bezier numbers ("x1,y1,x2,y2") or a GSAP ease name like "power3.inOut". | | `startOpen` | `boolean` | `false` | Start on the first spread instead of the closed cover. | | `autoplay` | `number` | `0` | Turn a page by itself every this many seconds. 0 turns it off. Pauses while the pointer is over the book. | | `shadow` | `number` | `0.4` | How dark the shadows are: the page shading, the shadow a turning page casts and the one under the book. 0 to 1. | | `showCaption` | `boolean` | `true` | Show the caption and page count under the book. | | `keyboard` | `boolean` | `true` | The arrow keys turn pages (when nobody is typing in a field and the book is on screen). | | `title` | `string` | `"Photo Book"` | The words on the cover. Also the book's name for screen readers. | | `subtitle` | `string` | `""` | A smaller line under the cover title. | | `coverSrc` | `string` | `""` | A photo tipped onto the cover. Leave it empty for a plain cloth cover. | | `coverColor` | `string` | `"#2f3530"` | The colour of the cover boards. | | `ratio` | `number` | `1.6` | Width of one spread divided by its height. | | `className` | `string` | `""` | Extra classes for the outer box. Give it a size (it fills it). | ## Credits - Alpine dawn: Viri Gutiérrez, Lummi (https://www.lummi.ai/photo/an-empty-snowy-mountain-with-pink-sunrise-on-the-hori-270fdea6-887e-4d89-8205-3eab907f3fb0-HgoCN), Lummi License - Golden dunes: Pablo Stanley, Lummi (https://www.lummi.ai/photo/desert-dunes-and-mountain-range-bfczd), Lummi License - Palm pool: Binks AI, Lummi (https://www.lummi.ai/photo/serene-minimalist-scene-with-palm-trees-pba-c), Lummi License - Lone tree: alexaperios, Lummi (https://www.lummi.ai/photo/solitary-tree-in-desert-wsyns), Lummi License - Concrete balconies: Mariate, Lummi (https://www.lummi.ai/photo/minimalist-architectural-design-b8bbc), Lummi License - Turquoise shallows: Mikiwa, Lummi (https://www.lummi.ai/photo/serene-ocean-aerial-view-kjab6), Lummi License - Red wall interior: Siren Media, Lummi (https://www.lummi.ai/photo/modern-interior-with-red-wall-6k-hl), Lummi License - White corner: Mikiwa, Lummi (https://www.lummi.ai/photo/modern-building-corner-dr5dz), Lummi License ## Source The source of a Pro component is for buyers of Pro Components, a Templates plan or All-Access. Install it with the commands above, or unlock it on https://ui.dimaac.com/components/flip-book. ## Agent prompt ```text Add the Flip Book component () from DiMaac UI to this project. It is a Pro component, so its source needs the owner's DiMaac licence key (Pro Components, a Templates plan or All-Access). Docs: https://ui.dimaac.com/components/flip-book 1. Add the Pro registry to components.json (merge it into "registries"). Don't write the key into the file: { "registries": { "@dimaac-pro": { "url": "https://api.dimaac.com/v1/ui/r/{name}.json", "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" } } } } 2. The owner puts their licence key in .env.local (keep it out of git): DIMAAC_LICENSE_KEY=your-licence-key Ask them for it if it isn't set. Never print it or commit it. 3. Install it with: npx shadcn@latest add @dimaac-pro/flip-book The registry item is https://api.dimaac.com/v1/ui/r/flip-book.json and wants the header "Authorization: Bearer ". Then use it like this: import { FlipBook } from "@/components/dimaac/flip-book"; It imports gsap, @gsap/react; the CLI installs them. It uses Tailwind v4 classes, so make sure Tailwind scans that folder. Give its parent a size, keep light and dark mode working and keep its prefers-reduced-motion fallback. Full index for agents: https://ui.dimaac.com/llms.txt ```