{"id":"page-turn","version":"1.0.0","title":"Page Turn","summary":"A page-curl transition: your first shot peels away like a page to reveal the next.","kind":"effect","target":"three","collections":["kinetic-text"],"tags":["page turn","page curl","page peel","transition","book","paper","chapter","storybook","reveal"],"loopable":false,"motion":"procedural","durationSeconds":4,"status":"published","media":{"poster":"https://aipixelwizard.com/media/page-turn/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/page-turn/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/page-turn/1.0.0/sample.mp4","sampleBytes":233447,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/page-turn","manifest":"https://aipixelwizard.com/api/v1/visuals/page-turn/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/page-turn/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/page-turn/1.0.0/","demo":"https://aipixelwizard.com/registry/page-turn/1.0.0/index.html"},"description":"The frame you are leaving becomes a sheet of paper: it lifts from a corner, rolls over with a highlight along the bend and slides away, showing the next frame underneath. The back of the sheet is paper with the old picture faintly showing through, and soft shadows fall on both frames. Pick the corner it starts from, the angle of the fold (straight for a book page), how tight the curl is and the paper colour. The demo turns from one title card to another; in code it turns between any two pictures, videos or 3D scenes.","role":"Transition (Three.js, full frame): a 3D page curl between two pictures.","useCases":["Chapter breaks in storytelling, travel and recipe videos","Before and after reveals with a paper feel","Turning from one slide or card to the next in a presentation"],"synonyms":["page flip transition","page curl transition","peel transition","turning page","book page turn","paper peel","corner peel","chapter transition"],"digest":"b80beb034a7e8f78f5950079db6081006bd362c28e771eaa5b878286b7026bde","implementation":{"target":"three","runtime":"browser","language":"javascript","module":"esm","entry":"src/page-turn.js","exports":[{"name":"createPageTurn","signature":"createPageTurn({ from, to, aspect?, corner?, angle?, curl?, back?, showThrough?, shadow?, segments? }) => { group, setProgress(progress), setTextures(from, to), materials, dispose() }","description":"The transition between two textures, filling OrthographicCamera(-aspect, aspect, 1, -1). setProgress(0…1) every frame."},{"name":"curlAt","signature":"curlAt(progress, { aspect?, corner?, angle?, curl? }) => { origin, dir, radius }","description":"Where the fold is at a progress, for driving your own shaders or sounds."}],"reusable":["src/page-turn.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"three","version":"0.185.1","scope":"source","reason":"Renderer and shaders for the curling sheet."},{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness."}],"uses":[],"usedBy":[],"params":[{"key":"titleA","label":"First card","type":"text","default":"Chapter One","maxLength":32,"sensitive":true},{"key":"subtitleA","label":"First card, small line","type":"text","default":"In which it begins","maxLength":40,"sensitive":true},{"key":"colorA","label":"First card colour","type":"color","default":"#efe5d0"},{"key":"titleB","label":"Second card","type":"text","default":"Chapter Two","maxLength":32,"sensitive":true},{"key":"subtitleB","label":"Second card, small line","type":"text","default":"A new page","maxLength":40,"sensitive":true},{"key":"colorB","label":"Second card colour","type":"color","default":"#16294a"},{"key":"corner","label":"Starts from","type":"select","default":"bottom-right","options":[{"value":"bottom-right","label":"Bottom right"},{"value":"top-right","label":"Top right"},{"value":"bottom-left","label":"Bottom left"},{"value":"top-left","label":"Top left"}]},{"key":"angle","label":"Fold angle","help":"Degrees. 0 turns straight like a book page; higher peels from the corner.","type":"number","min":0,"max":60,"step":1,"default":28},{"key":"curl","label":"Curl size","type":"number","min":0.03,"max":0.2,"step":0.005,"default":0.08},{"key":"paper","label":"Paper colour (back)","type":"color","default":"#f3ede1"}],"presets":[{"id":"default","label":"Chapter one to two","params":{}},{"id":"book","label":"Book page, straight fold","params":{"titleA":"Once upon a time","subtitleA":"A story","titleB":"The End","subtitleB":"Thank you for reading","colorB":"#3d1f1a","angle":4,"curl":0.11}},{"id":"corner","label":"Top corner peel","params":{"titleA":"Before","subtitleA":"The old look","colorA":"#f4f4f2","titleB":"After","subtitleB":"The new look","colorB":"#0f0f12","corner":"top-right","angle":40,"curl":0.06}},{"id":"launch","label":"Launch reveal","params":{"titleA":"Coming soon","subtitleA":"Spring collection","colorA":"#f6d6d8","titleB":"Now open","subtitleB":"Come and see","colorB":"#1d4b3f","corner":"bottom-left","angle":22}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":4,"posterSeconds":1.8,"alpha":false,"motion":"procedural","loop":{"seamless":false,"method":"A one-way transition: holds the first card, turns, holds the second."},"seed":null},"composition":{"inputs":"Two textures (pictures, videos or render targets of other scenes) and the progress of the transition, 0…1.","outputs":"A THREE.Group with the page and the frame beneath it, filling OrthographicCamera(-aspect, aspect, 1, -1).","coordinates":"The page is 2 × aspect wide and 2 tall, centred at the origin and facing +z.","lighting":"Self-lit: the shader lights the bend itself; scene lights do not affect it.","timing":"setProgress(progress) is a pure function of progress; frames render in any order. Ease the progress yourself (the demo uses ease-in-out).","compatibleWith":["kinetic-title","gradient-background","ceiling-fan-wipe"],"notes":["Card texts are treated as private: not stored in shared packs unless you choose to include them.","To turn between two 3D scenes, render each into a WebGLRenderTarget and pass their textures.","Chain transitions with setTextures(next, nextAfter) and a new progress from 0."]},"reuse":["Chapter break: one card per chapter title, a turn of about 2.5 seconds between them.","Between two videos: use VideoTextures for from and to, and drive setProgress from your edit's timeline.","A storybook: chain several turns with angle 0 and a cream paper colour."],"integration":{"newProject":"Create an OrthographicCamera(-aspect, aspect, 1, -1), add createPageTurn({ from, to, aspect }).group, and call setProgress each frame.","existingProject":"Copy src/page-turn.js. Render your outgoing and incoming shots into render targets, pass their textures, and draw the turn as a final full-screen pass."},"performance":{"notes":"One finely divided plane bent in the vertex shader, and two texture reads per pixel. Smooth at 1080p on laptop GPUs.","limits":"Very tight curls (curl below 0.03) need more segments to stay round."},"limitations":["The sheet curls round a straight fold; it does not crumple or flutter.","The demo's title cards use the system serif font."],"license":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[{"name":"three.js","version":"0.185.1","license":"MIT","url":"https://github.com/mrdoob/three.js"}]},"rights":{"approvedForPublicRelease":true},"provenance":"Adapted from the owner's threejs-sketches/objects-scenes/book-flip (MIT), rebuilt for AI Pixel Wizard in October 2026 as a page-curl transition between any two pictures: cylinder-curl geometry, lit bend, paper back with show-through, soft shadows, and the frame/time contract.","changelog":[{"version":"1.0.0","date":"2026-10-05","notes":"Initial release."}],"verification":{"testedOn":"2026-10-05","inputs":{"page-turn@1.0.0":"b80beb034a7e8f78f5950079db6081006bd362c28e771eaa5b878286b7026bde","three@0.185.1":"664ca387e5fab46ff2daaa6895e1d015426850891af5ea5082cbbcc3985b068c","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"WebGL 2 via SwiftShader (software)","width":1080,"height":1080,"fps":30,"frames":120,"renderSeconds":29.2,"loopCheck":{"checked":false,"seamless":null,"maxDifference":null,"note":"Asset does not claim a seamless loop."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/page-turn/1.0.0/poster.webp","preview":"/media/page-turn/1.0.0/preview.mp4","sample":"/media/page-turn/1.0.0/sample.mp4","sampleBytes":233447}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/page-turn/1.0.0/LICENSE"},{"path":"asset.json","size":9024,"sha256":"6dc289409e342643c9ccbd7fa83c344d6e558b6530c5de1231e2083a5479821a","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/page-turn/1.0.0/asset.json"},{"path":"demo.js","size":4444,"sha256":"db9fc78067e9e4f716ffe6c84aa5aa9b20aaf7d3aeabda02f0cf75a4890fee09","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/page-turn/1.0.0/demo.js"},{"path":"index.html","size":523,"sha256":"4a0e252a01de3b0098330fde347456308c5dda9360c2fd6d20f2d0669d93843e","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/page-turn/1.0.0/index.html"},{"path":"src/page-turn.js","size":9509,"sha256":"486238038eb29f408713e11b7dc73e29942136714ebb0e6d892725fd50f72fec","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/page-turn/1.0.0/src/page-turn.js"}],"warnings":[]}