memories

A kraft-paper scrapbook that stands upright in the dark.

Stack: React Three Fiber, Three.js, GSAP, Zustand, Express
Live: album demo
Source: github.com/rainbow-rayna/album-ui

The album stands upright in open darkness. Its pages fan out from the spine like a carousel rather than lying flat, and each one flips with a curl that bends along its length instead of pivoting rigidly. The cover is kraft paper with a ribbon bow, spiral binding, and a scatter of glued-on hearts and stars.

Drop a screenshot or a looping GIF of the album mid-flip here. This is the single highest-value addition to the page — the whole project is visual.

The interesting problem

Infinite pages, fourteen meshes

I wanted to flip forward indefinitely without a page count baked in anywhere. Allocating a mesh per page doesn't survive that, so the album keeps a fixed pool of fourteen <Page> meshes and slides a window across an unbounded index.

As the current page changes, whichever mesh falls out of the window on one side gets reassigned to the logical page entering on the other side, and snapped instantly to its resting position at the far edge of the fan. The trick is that the far edge is nearly edge-on to the camera, so a mesh teleporting into place there is effectively invisible. No mesh is ever created after mount.

Pages that bend rather than pivot

A page rotating on a hinge reads as cardboard. Real paper resists at the spine, gives in the middle, and whips at the outer edge. Each page is a skinned mesh with a bone chain running its width, and the curl is distributed across those bones with separate curve strengths for the inside face, the outside face, and the fold itself. GSAP drives the easing so the flip accelerates and settles rather than moving linearly.

The bone-chain approach and the GSAP easing pattern come from Wawa Sensei's 3D Book Slider tutorial. I reworked it for an upright, fanned layout instead of a flat lying book, which changed the resting transforms and the camera framing substantially.

No binary assets at all

Every texture — the kraft grain, the ribbon, the spiral wire, the paper edges — is drawn onto a <canvas> at runtime. Nothing ships as an image file. That keeps the repo clean and the project runnable with no asset pipeline, at the cost of a look that's stylised rather than photographic.

What I'd change

The bundle is 1.17 MB, about a third of a megabyte gzipped, essentially all Three.js. Nothing paints until all of it arrives, which is rough on a phone. Splitting the 3D engine out and showing a poster image first would fix it.
Pages take a content prop but every one is currently { kind: "blank" }. The geometry and flip logic don't care what's drawn on them, so photos are a matter of adding variants — I just haven't.
Fourteen is a guess. I never measured what the smallest pool is that still hides the recycling at the widest fan angle.

Add a section on what you learned or what surprised you. That's the part readers remember, and it's the part only you can write.