# Page Turn — `page-turn@1.0.0`

A page-curl transition: your first shot peels away like a page to reveal the next.

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.

- Kind: effect; status: published; digest sha256:b80beb034a7e8f78f5950079db6081006bd362c28e771eaa5b878286b7026bde
- Role: Transition (Three.js, full frame): a 3D page curl between two pictures.
- Implementation: three; entry `src/page-turn.js`
- Files: https://aipixelwizard.com/registry/page-turn/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/page-turn.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/page-turn/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/page-turn/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `three@0.185.1` (source) — Renderer and shaders for the curling sheet.; `apw-runtime@1.0.0` (demo) — Demo harness.

## Exports
- `createPageTurn({ from, to, aspect?, corner?, angle?, curl?, back?, showThrough?, shadow?, segments? }) => { group, setProgress(progress), setTextures(from, to), materials, dispose() }` — The transition between two textures, filling OrthographicCamera(-aspect, aspect, 1, -1). setProgress(0…1) every frame.
- `curlAt(progress, { aspect?, corner?, angle?, curl? }) => { origin, dir, radius }` — Where the fold is at a progress, for driving your own shaders or sounds.

## Parameters
- `titleA` (text, default "Chapter One") — First card
- `subtitleA` (text, default "In which it begins") — First card, small line
- `colorA` (color, default "#efe5d0") — First card colour
- `titleB` (text, default "Chapter Two") — Second card
- `subtitleB` (text, default "A new page") — Second card, small line
- `colorB` (color, default "#16294a") — Second card colour
- `corner` (select one of bottom-right | top-right | bottom-left | top-left, default "bottom-right") — Starts from
- `angle` (number 0–60, default 28) — Fold angle: Degrees. 0 turns straight like a book page; higher peels from the corner.
- `curl` (number 0.03–0.2, default 0.08) — Curl size
- `paper` (color, default "#f3ede1") — Paper colour (back)

## 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).
- Works with: kinetic-title, gradient-background, ceiling-fan-wipe
- 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.

## Output and loop
- 1080×1080, 30 fps, 4 s, procedural
- Seamless loop: no — A one-way transition: holds the first card, turns, holds the second.
- Verified 2026-10-05 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)); deterministic: yes

## Use it
New project: Create an OrthographicCamera(-aspect, aspect, 1, -1), add createPageTurn({ from, to, aspect }).group, and call setProgress each frame.

Existing project: 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.

Reuse ideas:
- 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.

## 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
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.
- three.js 0.185.1: MIT (https://github.com/mrdoob/three.js)

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.