PHOTO STACKS

mac-style folder stacks. built for dreamspace so a gallery can sit on a desk instead of a card grid. the primitive is cms-agnostic: pass PhotoStack[], that's it.

film

4

coast

4

peaks

3

unsorted

0

inspiration

finder stacks: closed folder shows a peek of the files inside, open it and they spread. polaroids: native aspect, caption underneath, never cropped into a square.

i didn't want another masonry of identical tiles. folders and photos share one wrap at the same tile size. open a folder, items insert in place, the rest reflow.

how it works

• closed — two photos, back one tilted. open / empty — thick grey panel, chevron (or a folder-open icon if there's nothing in it)
• spread — FLIP via useAnimate. measure offsetLeft/Top of the folder vs each item so a second click isn't fighting a transform mid-flight. items fly out of the folder, reverse on collapse
• preview — click stores the tile's offset from the viewport centre. the lightbox springs from that point; escape / backdrop plays it back
• hover — closed: the back photo tilts further (no lift). open: flap rotates more, icon drops. photo corners go square, no scale
• prefers-reduced-motion skips the flights

dreamspace is just a mapper: sanity folders → PhotoStack[], plus ?folder= for the open slug. this page is the same PhotoStacks component with unsplash.

<PhotoStacks
  stacks={[
    {
      id: "film",
      title: "film",
      slug: "film",
      images: [{ id, url, caption, width, height }],
    },
  ]}
/>