Gallery Issue

Summary

A gallery preview for DEPO in the motion language of an experimental studio portfolio. Each of five galleries — shoots by DEPO members published in partner magazines (LUCID, PALISADE, ALAÏS, DUSK, VOÍD) — has its own composition of photo cards on a cream page. Switching galleries morphs one composition into the next: shared cards travel to their new places while the new gallery's pictures wipe over them, new cards fly in from the nearest edge, and every line of text rises out of its own mask. The large card carries the magazine's name knocked out of a cream band. Click it (or "Open the issue") and it grows to the full screen, and the gallery opens over it as a magazine issue built from the same photos and credits.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: a preview of DEPO photo galleries that opens a gallery
as a magazine issue. Take the motion language of blacklead-studio's CodePen "DICH™" (column
compositions on a cream page, sharp cubic-bezier(.75,0,0,1) easing, clip-path masks, masked
uppercase text lines, inertia columns, photo swap on scroll, cursor parallax on the large
image) and make it a real DEPO gallery.

Content:
- Five galleries, each a shoot by DEPO members published in a partner magazine: LUCID "Soft
  Geometry" (Lisbon), PALISADE "Red Hour" (Milan), ALAÏS "Green House" (Paris), DUSK "After
  Dark" (Berlin), VOÍD "White Noise" (Tbilisi). Six photos each from /_img/photos/ (crops a and
  b = twelve pictures), photographer, three models, stylist, make-up, city, date, a three-line
  deck, cover lines, contents, a four-paragraph story, a pull quote and a short interview —
  the team always met through DEPO (Connect, Locals, groups).

Gallery view (one screen, no page scroll):
- Header in exclusion blend: LFT / RGHT (mirror the composition), "DEPO™ GALLERIES" pinned to
  the large card's inner edge, gallery numbers 01–05 with a sliding duplicate on hover.
- One composition per gallery (large card + ratio columns, two bottom stacks, two endless
  columns moving in opposite directions, a 40/33/27 band, one endless column), each with a
  mirror. Cards are slots; the pictures come from the gallery, the large card shows the lead.
- Gallery change: cards in both compositions travel and the new picture wipes in diagonally,
  new cards fly in from the nearest edge, leftovers fly out, staggered by distance from the
  large card. Mirror switch: everything closes behind a mask, moves, reopens.
- The large card has a cream band on top with the magazine name and issue number knocked out
  of it (SVG mask), so the photo shows through the letters.
- Text blocks sit in the empty columns of each composition: title, deck, index 1—6, date,
  issue, "Open the issue ↗", photo arrows. Every line rises out of its own mask.
- Wheel / swipe: on the static compositions one gesture = one photo step for every card
  (diagonal wipe, captions swap, index counts); on the column compositions the columns scroll
  with inertia and their edges bow with speed.
- Keys: 1–5 galleries, ↑ ↓ previous / next gallery, ← → mirror, Enter opens, Esc closes.
- Phones: large card on top, text in the middle, three small cards in a row; swipe swaps photos.

Issue view:
- The large card grows to the full screen, the other cards close, the text drops away; the
  issue opens over it with a clip-path wipe. Its own bar: back, magazine and month, reading
  progress, close.
- Cover (lead photo, masthead, title, cover lines), contents with the printed cover, feature
  opener with credits and a two-column story with a drop cap, a two-photo spread, a pull quote
  on the magazine's accent colour, a full-bleed photo, a five-minute interview, more from the
  shoot, and the next issue (closes and moves to that gallery).
- Lines rise out of masks, photos open from the bottom with a slow zoom-out and keep a scroll
  parallax. The address keeps #<gallery>(-r)(/issue); Esc or Back closes with the reverse wipe.

Design: cream #FFFDF3 and ink #0D0D0D, Inter Tight 600 uppercase at 0.9vw for the gallery,
Inter Tight 600/800 display and Newsreader text for the issue; photography carries the colour.
Vanilla JS, no libraries.

Look

• Type: Inter Tight 600 — every label and caption in the gallery (uppercase, max(0.9vw, 11px), −0.02em), the issue's display titles; 800 — the knocked-out mastheads. Newsreader 400 / italic — the issue's reading text, deck and pull quote.
• Palette: cream #FFFDF3 page and band, ink #0D0D0D, muted #5d5a52, placeholder #e9e5d6; each issue adds its magazine accent for the drop cap and the quote block — LUCID lime #cdd43c, PALISADE red #c41e2a, ALAÏS green #24452f, DUSK vermilion #d8432a, VOÍD stone #d9d5cb.
• Layout: gallery — the canvas is 82 vh at the bottom of the screen; columns in vw (large card 40vw, gap 1.3vw); the text layer is 56vw wide on the side away from the large card and places its blocks in the empty columns. Issue — a fixed overlay that scrolls by itself: full-screen cover, 5/7 contents, giant feature title, 6-column credits, 7/5 story + sticky photo, 7 + 4 offset spread, accent quote, 118 vh full bleed, 5/7 interview, three staggered photos, next issue.
• Motion: CSS transitions on top / left / width / height for the morph (1.5 s, cubic-bezier(.75,0,0,1)), clip-path masks with per-column stagger, keyframed text lines; rAF for the inertia columns (friction 0.9, a cubic path() clip that bows with speed) and for the cursor parallax on the large picture; the issue uses IntersectionObserver for reveals and rAF for the scroll parallax and progress.

Built with

Borrowed

• Motion engine adapted from blacklead-studio's CodePen "DICH™" (https://codepen.io/editor/blacklead-studio/pen/01a0d773-dab5-744d-bc5e-3f11d4f2262e, public pen, CodePen's default MIT licence): the CFG block, column geometry (computeRects), the morph / mask switch / caption logic, the inertia columns with the bowed path() clip, the diagonal photo-swap overlays, the masked text layer and its mirror clone, the cursor parallax and the hover duplicates of the header numbers and arrows. Rewritten parts: gallery data, slots showing gallery pictures, the photo wipe on a gallery change, the SVG-mask masthead band (the pen's band was a fixed path), the phone composition, the address hash and the whole issue view. Not taken: the stand-in hero card and the WebGL smear shader.
• Text and names: invented DEPO content for the demo; magazine names are DEPO's partner titles.

Config

None — static page.

Notes

• The gallery is one screen (overflow: clip), so the catalog screenshot is a single frame; the issue is reached by clicking the large card or by the address #soft-geometry/issue.
• The pen's WebGL "B" shader (a smear that follows the cursor) was left out; it could come back as an option on the large card.