3D Book
An album you leaf through like paper.
A Three.js engine written for one job: a real book in 3D. The leaf is a folding ribbon attached to the spine, with thickness, front, back and a gilded edge, and content is drawn onto it as a texture: there is never a hand-off between a 3D object and an HTML page. On top sits an edit mode with alignment guides, and a save that loses nothing.
- 3D engine, interaction and sync
- 3D / WebGL · Interaction · Personal project
Context
What the book had to do
- Open on a phone, upright or sideways
- Turn the page like paper, not like a door
- Photo, video and music on the same leaf
- Be edited without a line of code
Challenge
A digital album is usually a gallery with arrows.
The photo swaps, and nothing there resembles an object. The idea was the opposite: a book you hold with one finger, that lives on a phone and can be edited by someone who doesn't code.
Decisions
The leaf as a ribbon, not a rectangle
- A rectangle rotating on the spine is what gives away an amateur 3D book: the page swings like a door.
- Each leaf is a ribbon attached to the spine, with thickness, front, back and a gilded edge, deformed every frame by weighted springs.
- Physics written for the object rather than borrowed from a library: the engine serves this one job and no other.
- The tip lags, the middle follows, and the leaf settles like paper.
At rest, it costs nothing
- The book had to live on a phone.
- It only renders when something moves, and pauses when the tab is hidden; only visible leaves have a mesh (the rest of the block is one solid), and textures load on demand, behind a cache.
- If the device can't keep up, resolution drops on its own; and there is no post-processing.
- The light belongs to the scene, not to a filter.
A save that loses nothing
- Whoever edits doesn't code, and may be on a phone and a laptop at the same time.
- Every save is a new version; the second save notices the first, receives the newer version and merges the two page by page.
- Offline, the change waits on the device and only goes up on the next visit.
- Closing the tab sends whatever was pending straight away, and the last 300 versions stay in the cloud.
The gesture decides, not the button
- When zoomed in, the same finger that pans the view could turn the page by accident.
- When zoomed, one finger pans; tapping a photo frames that photo; releasing the pinch snaps back to the nearest framing.
- While zoomed in, turning by drag is suspended.
- Small rules, and they are what make the book feel like an object rather than an app.
Demonstration
- BookEnginescene, loop, open and close
- sheetthe leaf as a folding ribbon
- LeafDynamicsweighted springs on the turn
- CameraRigframing, zoom and pan
- Gesturesdrag, tap, pinch
Content never touches the geometry.
- PageRendererdraws the page into a texture
- PageStoretextures on demand, cached
- AudioManagermusic per chapter, with fades
- DocStoresaves, versions and merges
Personal project. The book's title, photos, texts and music are private and do not appear here. What this case shows is the engine.
Interactions
- The cover opens from the spine in a single cinematic take.
- The leaf pulls, drags through the air and settles: its curvature has a spring of its own.
Implementation
- TypeScript on Three.js and GSAP, bundled with Vite; Vercel Functions and Vercel Blob handle saving.
- Since 28 Sep, music by link (a file, Google Drive, Dropbox, YouTube or Spotify), with a chosen excerpt and the track name pulled from the link itself.
What was built
- A 3D book that opens in one cinematic take
- Page turns by drag, tap or star
- Pinch zoom that frames the photo you touch
- An edit mode with alignment guides
- Cloud saving that merges edits across screens
- Music by link, with a chosen excerpt
Technology
- TypeScript
- Three.js
- GSAP
- Vite
- Web Audio
- Vercel Functions
- Vercel Blob
Outcome
A personal project in use, and still growing: music by link arrived on 28 Sep. The content is private; only the engine appears here.
11.1k
lines of TypeScript across engine, content and editing
17
element types per page: text, photo, video, music, ornament
300
latest versions kept in the cloud: no save overwrites another
7
type families in the edit mode
0
post-processing passes: the light belongs to the scene
Learnings
- An amateur 3D book gives itself away with a page that swings like a door; what convinces is a tip that lags and settles.
- At rest it has to cost nothing: rendering only when something moves is what lets a 3D book live on a phone.
- Small gesture rules are what make a book feel like an object rather than an app.
