# Page Turn Book
> Drag a page and it curls around a real cylinder, then throws over with momentum and settles.
Canonical: https://gsapvault.com/effects/page-turn-book
Live demo: https://gsapvault.com/demos/page-turn-book/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Draggable, InertiaPlugin |
| Techniques | page-turn, 3d-transforms, draggable, momentum, pointer-effects, micro-interaction |
| Uses Lenis | No |
## Overview
A page-turn effect that bends the paper instead of rotating it flat. Each leaf is laid out as a row of vertical strips positioned along a fold polyline, so as you drag, the page curls around a moving cylinder, a specular band travels down the fold, and a cast shadow slides across whatever is underneath.
Draggable drives the turn and InertiaPlugin throws it: a lazy nudge springs back, a firm drag commits to the next spread, and a hard flick riffles two or three pages over in sequence. Nothing is a fixed animation, so the page sits wherever your hand left it.
## Features
- Real cylindrical curl built from vertical strips chained along a fold polyline, not a flat rotateY
- Per-strip Lambert shading, so the highlight travels down the fold and the reverse side reads darker
- Cast shadow that tracks the leading edge across the page below and crosses to the facing page mid-turn
- InertiaPlugin throw with page snapping: nudge and it springs back, flick and it commits
- Riffle on a hard flick, carrying two or three leaves over in a staggered cascade
- Backface content revealed through the turn, so the reverse of each leaf is a real page
- Single-page phone layout hinged on the left edge, with the strip count reduced automatically
- Prev/next controls, arrow-key paging and a live region announcing the current spread
## Use Cases
- Fashion lookbooks and seasonal catalogues where the artefact is the pitch
- Digital magazine and zine issues that want the object to feel bound
- Restaurant and bar menus, where turning a page beats scrolling one
- Product brochures and press kits presented as a flipbook
- Portfolio case studies paced one spread at a time
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## How It Works
Each leaf is cloned into a row of strips, every strip holding a clipped copy of both faces. On each frame the script walks the strips as a polyline: strip i is placed where strip i-1 ended, rotated by a hinge angle plus a bend that swells through the middle of the turn, so the sheet stays joined while it curves.
Shading comes from a Lambert term against each strip's own normal, which flips past upright so the reverse of the page is lit differently. Strip widths are CSS custom properties, so a resize only re-measures rather than rebuilding.
Draggable runs on an off-document proxy with a snap function, letting InertiaPlugin project the flick before deciding which page it lands on. Strips are built lazily the first time a leaf moves, and the flat faces are swapped back in the moment it settles so the type stays crisp.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add to your ``:**
```html
Inside cover
Back page
Page one
Page two
Page three
Page four
```
**3. Add before the closing `` tag:**
```html
```
### Options
Set on the `[data-turn-book]` element.
| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-turn-strips` | number | `18` | Strips the leaf is cut into. More is a smoother curl and more DOM. Narrow screens cap this at 9. |
| `data-turn-curl` | degrees | `55` | How far the free edge leads the spine at the middle of the turn. `0` is a flat rotating plane, `30` is card, `55` is magazine stock, past `80` it creases. |
| `data-turn-riffle` | `true` \| `false` | `true` | Whether a hard flick carries extra leaves over with it. |
| `data-turn-invite` | `true` \| `false` | `true` | The one unprompted peel on load that shows the page is grabbable. |
Optional child hooks: `[data-turn-prev]`, `[data-turn-next]`, `[data-turn-status]` (live region, gets "Spread 2 of 5").
### Accessibility
- Arrow keys and Page Up/Down turn the page whenever the book has focus; `:focus-visible` draws a ring on it.
- The prev/next buttons are real `