Slaacr

The situation

Slaacr is an AI image project structured around sustainable futures and bio-engineering — a prompt-crafted gallery that wants to be read as an editorial publication, not a stock-image directory. The original site treated the work like an art portfolio: thumbnail grid, hover-to-see-prompt, no real entry points for someone arriving via an essay or a workshop link. The result was traffic that bounced because there was no clear reading experience to engage with.

The brief was to rebuild Slaacr around three explicit ways in: a curated library of imagery, a prompt-crafting workshop that teaches as it builds, and an essay series on AI art, sustainability, and the craft of seeing. Three reading depths, one site, no compromise on image fidelity.

The brief

A Next.js publication. Three top-level surfaces (Library, Workshop, Essays) each with their own typographic shape — gallery-first for Library, walk-through-first for Workshop, long-form-first for Essays. Image pipeline tuned for AI work: large native files, sharp at every breakpoint, fast even on the densest gallery view. A URL structure that survives social shares — every essay, every workshop, every library item gets its own permalink with the right OpenGraph card.

Architecture decisions

Next.js 15 App Router with route groups for the three surfaces, sharing one design system but giving each surface room to breathe. The Library uses a dynamic masonry grid that respects each image's native aspect ratio — AI imagery often comes in unusual aspect ratios and forcing it into uniform thumbnails kills the work. Workshop pages render as multi-step walk-throughs with sticky prompt blocks the reader can copy as they scroll. Essays get the full long-form treatment: 65-character measure, Georgia-class serif, ample line-height.

The image pipeline is the engineering centre of the project. Originals live in R2 at full fidelity (4K plus). Edge transforms produce sized variants on demand and cache them aggressively — so the first reader of a page eats the transform cost and every reader after gets cached delivery. Lazy loading is gated by intersection observer with rootMargin tuned so images come in just before the user reaches them. CLS is locked to near-zero on every gallery view by reserving aspect-ratio slots before the image streams in.

The reading typography pair (display + serif body) was chosen to honour the long essays without making the gallery views feel academic. Both render with size-adaptive line-height so a 1200-word essay and a four-image gallery both feel "right" without manual tuning per page.

Outcomes

The rebuild shipped with all three surfaces live. Reading depth is now visitor-controlled: a quick browse stays in the Library, a curious reader moves to the Workshop, and a committed visitor lands in the Essays. Page weight on Library pages dropped substantially compared to the original — image-fidelity preserved, transit weight reduced.

CWV scores hold green even on dense Library pages thanks to aspect-ratio reservation and lazy-load tuning. The Essays surface in particular gets disproportionate dwell-time, suggesting the long-form treatment was the right call.

What we'd evolve

A Workshop "save your prompts" feature is the obvious next step — currently the workshop teaches by example and lets the reader copy prompts, but doesn't persist their personal collection. A search feature spanning all three surfaces would help the long tail of visitors looking for specific themes. Both queued for a future engagement.