Snapshots: a loose pile of photos

I added a new page to this site: Snapshots.

It’s a small collage of photos — travel, meals, and everyday scenes — stacked like prints on a desk. Grab one to bring it forward, drag it somewhere else, and it stays where you leave it.

Why a collage

A neat grid felt too much like a gallery product page. What I wanted was something closer to how I actually look at photos: a messy pile, a bit of overlap, and the freedom to pull one into focus.

Each photo has a caption, location, and date that appear when it’s in front. The layout itself is just data — position, width, rotation, and stacking order — so I can rearrange the pile without rewriting the UI.

Interaction

The page is an Astro route with a React island for the collage. Pointer events drive the grab-and-drag behavior:

• pointer down brings a photo to the front and starts the drag
• moving updates position and a soft tilt based on both horizontal and vertical offset
• releasing commits the new pose so the photo stays put

Tilt is intentional but light. Moving right or up rotates one way; left or down the other. It makes the pile feel a little more physical without turning into a physics toy.

Keeping it light

Dragging used to push React state every animation frame, which meant re-rendering the whole collage on every move. That was more work than the interaction needed.

Now the active photo’s transform is written straight to the DOM during a drag. React only updates when you pick something up or put it down. The entrance animation is a single reveal flag with staggered CSS delays, instead of flipping one boolean per photo.

Same behavior, less churn.

What’s next

Right now the set is a handful of photos from Mie. I’ll keep adding to the pile as I take more — and probably keep tweaking the coordinates until the overlap feels right.

If you want to play with it, head over to /snapshots.