Flip Book

Pro

A hardcover photo book whose pages turn and bend in 3D.

Cards · ProInstall ↓Open preview ↗

Loading the demoNew tab ↗

Customize

Turn time0.85 s

Ease

Start open

Autoplay0.0 s

Shadow0.40

Caption

Cover#2f3530

Spread ratio1.60

Your code

<FlipBook pages={pages} />

Changes show live and stay in the address, so a link keeps them.

Code

This one is a Pro component

Pro components come with Pro Components, any Templates plan or All-Access. Sign in, or enter your licence key, to see the code here and copy it, or install it with the shadcn CLI below.

Install

With the shadcn CLI

Pro components install from a private registry that checks your licence key (Pro Components, a Templates plan or All-Access). Set it up once per project. The key stays in an environment variable and never goes into components.json.

1. Add the registry

Merge this into components.json.

components.json

{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

2. Add your key

Put it in .env.local (or your shell) and keep that file out of git. The CLI fills in ${DIMAAC_LICENSE_KEY} from it.

.env.local

DIMAAC_LICENSE_KEY=your-licence-key

3. Add the component

npx shadcn@latest add @dimaac-pro/flip-book

@dimaac-pro is the registry from step 1. More in Docs

By hand

npm install gsap @gsap/react

Install the packages it uses: gsap, @gsap/react.
Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/flip-book.tsx.
It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS.
Import it with import { FlipBook } from "@/components/dimaac/flip-book" and give its parent a size: it fills it.

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).

Use with AI

Agent prompt

Paste it into Claude Code, Cursor or any coding agent, or open it straight in a chat. It carries your Customize settings.

Prompt

Add the Flip Book component (<FlipBook />) 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 <licence key>".

Then use it like this:
import { FlipBook } from "@/components/dimaac/flip-book";
<FlipBook pages={pages} />

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

Open in Claude ↗Open in ChatGPT ↗

Files agents read

llms.txt: Every component and how to install it
flip-book.md: This page as Markdown: install, props and the full source

About

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.

Installs to: components/dimaac/flip-book.tsx
Uses: gsap, @gsap/react
Tags: gsap, 3d, book, drag, images, gallery

Alpine dawn by Viri Gutiérrez on Lummi (Lummi License). Golden dunes by Pablo Stanley on Lummi (Lummi License). Palm pool by Binks AI on Lummi (Lummi License). Lone tree by alexaperios on Lummi (Lummi License). Concrete balconies by Mariate on Lummi (Lummi License). Turquoise shallows by Mikiwa on Lummi (Lummi License). Red wall interior by Siren Media on Lummi (Lummi License). White corner by Mikiwa on Lummi (Lummi License).