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-

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.