Back to Gallery
Page Turn Book
£5 Standard License Unlimited projects
Drag a page and it curls around a real cylinder, then throws over with momentum and settles.
About This Effect
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.
Read the full effect overview
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.
What's Included
- 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
Perfect For
- 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
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.
Plugins Draggable, InertiaPlugin
Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
