Page Flip

A book-style page flip you can drag through

page-flip-tw

Roofline ridge cutting across the skyline

Customize

Page Width

220

Page Height

320

Page Radius

Perspective

1200

Spine Shift

110

Turn Angle

180

Peek Angle

Duration

0.55

Stagger

0.08

Shadow

0.30

Page Color

Close On LeaveInteractive

Props

Name	Type	Default	Description
`pages`	PageFlipLeaf[]	`5 leaves`	Leaves of the book. Each entry takes front, back, optional alt text and an id.
`pageWidth`	number	`220`	Width of a single leaf in pixels.
`pageHeight`	number	`320`	Height of a single leaf in pixels.
`pageRadius`	number	`4`	Corner radius of a leaf in pixels.
`pageColor`	string	`"#f4f4f4"`	Paper colour showing through while an image loads.
`perspective`	number	`1200`	Perspective depth of the scene. Lower values exaggerate the turn.
`spineShift`	number	`110`	How far the book slides aside once a leaf is turned.
`turnAngle`	number	`180`	Angle a turned leaf rotates through, in degrees.
`peekAngle`	number	`10`	Angle an unopened leaf tilts to when the pointer is over it.
`duration`	number	`0.55`	Seconds a single turn takes.
`stagger`	number	`0.08`	Seconds added per leaf when the whole book closes at once.
`ease`	"easeInOut" \| "easeOut" \| "circOut" \| "backOut"	`"easeInOut"`	Easing curve of the turn.
`shadow`	number	`0.3`	Drop shadow strength behind each leaf. Set to 0 to remove.
`trigger`	"click" \| "hover"	`"click"`	Interaction that turns a leaf. Hover riffles through the book.
`closeOnLeave`	boolean	`true`	Close every turned leaf when the pointer leaves the scene.
`interactive`	boolean	`true`	Enable pointer and keyboard interaction.
`className`	string	`-`	Optional className applied to the root.
`style`	CSSProperties	`-`	Optional inline style applied to the root.

pagesPageFlipLeaf[]

Leaves of the book. Each entry takes front, back, optional alt text and an id.

Default5 leaves

pageWidthnumber

Width of a single leaf in pixels.

Default220

pageHeightnumber

Height of a single leaf in pixels.

Default320

pageRadiusnumber

Corner radius of a leaf in pixels.

Default4

pageColorstring

Paper colour showing through while an image loads.

Default"#f4f4f4"

perspectivenumber

Perspective depth of the scene. Lower values exaggerate the turn.

Default1200

spineShiftnumber

How far the book slides aside once a leaf is turned.

Default110

turnAnglenumber

Angle a turned leaf rotates through, in degrees.

Default180

peekAnglenumber

Angle an unopened leaf tilts to when the pointer is over it.

Default10

durationnumber

Seconds a single turn takes.

Default0.55

staggernumber

Seconds added per leaf when the whole book closes at once.

Default0.08

ease"easeInOut" | "easeOut" | "circOut" | "backOut"

Easing curve of the turn.

Default"easeInOut"

shadownumber

Drop shadow strength behind each leaf. Set to 0 to remove.

Default0.3

trigger"click" | "hover"

Interaction that turns a leaf. Hover riffles through the book.

Default"click"

closeOnLeaveboolean

Close every turned leaf when the pointer leaves the scene.

Defaulttrue

interactiveboolean

Enable pointer and keyboard interaction.

Defaulttrue

classNamestring

Optional className applied to the root.

Default-

styleCSSProperties

Optional inline style applied to the root.

Default-