Image Pageflip

A perspective book of double-sided image leaves - peek on hover, flip on click, optional autoplay and spine centering. Bundled photos install under components/3d/image-pageflip/images.

Default

Click a page or use Prev / Next. Hover peeks the top leaf. Demo photos ship with the install.

Loading…

Installation

CLI

npx @sonojs/ui@latest add image-pageflip

Also needsnpm i lucide-react

Usage

page.tsx

"use client"

import { ImagePageflip } from "@/components/3d/image-pageflip"

export default function Page() {
  return (
    <ImagePageflip
      pageWidth={230}
      pageHeight={330}
      spineShift
      showPageNumbers
    />
  )
}

Props

Prop	Type	Default	Description
pages	PageFlipLeaf[]	bundled demo	Leaves with front/back images and optional meta.
defaultTurnedIndex	number	0	Initial turned leaf count (uncontrolled).
turnedIndex	number	-	Controlled turned leaf count.
onPageChange	(turned, total) => void	-	Fires after a flip.
pageWidth	number	230	Single page width in px.
pageHeight	number	330	Single page height in px.
perspective	number	1300	CSS perspective in px.
peekAngle	number	14	Hover peek degrees.
turnAngle	number	180	Full flip degrees.
duration	number	0.65	Flip duration in seconds.
spineShift	boolean	true	Center a two-page spread when open.
accentColor	string	"#2563EB"	Badge accent color.
autoplay	boolean	false	Auto-advance leaves.
showControls	boolean	true	Prev / Reset / Next toolbar.
interactive	boolean	true	Click leaves to flip.
className	string	-	Outer wrapper classes.