Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Page Turn

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

Effect, V1 Effects3D243 lines of codev1.0.0

In Craft & heritage

Next: ASCII PortraitSurprise me

Page Turn preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

28

Degrees. 0 turns straight like a book page; higher peels from the corner.

0.08

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 228 KB)
Info

What it is

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.

Reuse it in your own idea

  • 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.

Which part is reusable

src/page-turn.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • The sheet curls round a straight fold; it does not crumple or flutter.
  • The demo's title cards use the system serif font.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/page-turn.js
Exports
  • createPageTurn({ from, to, aspect?, corner?, angle?, curl?, back?, showThrough?, shadow?, segments? }) => { group, setProgress(progress), setTextures(from, to), materials, dispose() }
  • curlAt(progress, { aspect?, corner?, angle?, curl? }) => { origin, dir, radius }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer and shaders for the curling sheet.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

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).

Output
1080×1080, 30 fps, 4 s · procedural (computed from the frame number) · not a loop — A one-way transition: holds the first card, turns, holds the second.
Tested
Rendered 120 frames on 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)). Same frame twice from fresh pages: identical.
Performance
One finely divided plane bent in the vertex shader, and two texture reads per pixel. Smooth at 1080p on laptop GPUs. Very tight curls (curl below 0.03) need more segments to stay round.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- page-turn/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:b80beb034a7e8f78…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
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.
BinMore like this

More like this

Play these full screen