Connect · Pinned Scroll

Summary

A horizontal take on the DEPO Connect page set like a night issue. After a banner with a huge "Connect." and a cover portrait, the PARTNERS section pins under the header and the vertical page scroll drives its row sideways: each partner magazine is a spread — the latest cover large, the name in a big serif, genre, line, the earlier issues as small covers and a link into the magazine — while a big yellow counter ("03 / 56") and ticks say which title is in front. When the row ends the page carries on to FREE, a two-row rail, and People, a one-row rail of portrait cards, both with the album's wheel-over-row behaviour and quiet controls inside the row.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: the DEPO "Connect" page (https://dev0.dphub.net/connect)
— page banner, PARTNERS (56 premium magazines), FREE (77 basic magazines), People (84 creators)
— with horizontal rows.

Content: the shared data file js/connect-data.js (window.CONNECT). "View all" links go to
https://dev0.dphub.net/premium, /basic, /locals; cards link to their href; Premium / Free /
Creator badges. Keep the real DEPO header and footer and the shared animated background
(shared.js from demo20 + .ellipses); no opaque full-page fill.

Function:
- PARTNERS is a pinned (sticky) section: the stage sticks under the header and the vertical
  page scroll moves the row sideways 1:1; the section's height is the stage height plus the
  length the track overflows by. The wheel, a touch swipe and the keyboard all just scroll the
  page. Controls inside the row (semi-transparent prev / next zones, hidden at that end), the
  arrow keys on the focused row and a mouse drag scroll the page to the matching position, so
  page and row never disagree. A big counter "03 / 56" with the magazine name, ticks and a
  progress line show the position.
- FREE: a two-row rail and People: a one-row rail, on the shared rail engine (js/rail.js): the
  wheel over a row scrolls the row (eased) and hands back to the page at its ends; mouse drag;
  keyboard; soft edge controls inside the row; a thin progress line with "01–06 / 06".
- The frame-by-frame screenshots must still show the pinned scene sensibly: each 900 px of
  page scroll moves the row about one spread.

Design — "Pinned Scroll": an editorial night issue. Instrument Serif display (huge "Connect."
with a yellow full stop), Poppins small caps labels, Lato text, DEPO yellow #ffb500 as the only
accent on the dark site ground. Banner: headline, lead, two buttons and a three-part index
(01 Partners, 02 Free, 03 People) beside a tall cover portrait with a caption. Partner spreads:
the latest cover at the stage's height, the text column beside it; the spread in front is full
strength, the others dimmed; covers drift slightly against the movement. Free cards: 2:3 covers
with name, city and a Free badge; People cards: 3:4 portraits with role · city, name and a
Connect pill over a dark gradient. Responsive to 375 px (spreads stack cover over text),
prefers-reduced-motion respected, lazy images, alt texts, visible focus.

Look

• Type: Instrument Serif 400 roman + italic (self-hosted Latin subset) for the headline, section and magazine names, the counter; Poppins 500 small caps for labels and buttons; Lato for text.
• Palette: ground #18171a (site) under the shared green background, white #f4f2ee, muted #a8a49c, hairlines rgb(244 242 238 / 0.14), DEPO yellow #ffb500 for the counter, numbers, the lit button and the rail thumbs; soft glass rgb(18 17 20 / 0.55) behind the chevrons.
• Layout: header · banner (copy + index | portrait) · pinned Partners stage 100svh − 70px (head with title, counter and View all · the sideways track of 8 spreads with edge controls · ticks + progress line) · Free head + two-row rail · People head + one-row rail · footer.
• Motion: a scroll listener (rAF) translates the track by stageTop − section.top, clamped to the overflow; the counter, ticks, dimming of the other spreads and a ±28 px drift of each cover follow it. The edge buttons use window.scrollTo({behavior: 'smooth'}) to the next spread's position. The rails glide with the shared engine's eased rAF. Banner portrait fades in with a slow scale.

Built with

Borrowed

• The header and footer markup and the site CSS, as in the shared Connect kit (from demo20); the rail engine js/rail.js / css/rail.css of the Connect demos.
• Instrument Serif by Rodrigo Fuenzalida and Jordan Egstad (SIL Open Font License), from Google Fonts.

Config

None — static page.

Notes

• 2026-10-23: seven times the content — 56 partners (the original eight, Depo Magazine and 47 more) with 220 issues, 77 free titles, 84 people (js/connect-data.js, the same file in every Connect demo). The album has ~30 covers and 24 portraits, so the new entries reuse them as close-up crops in /_img/photos/crops/ (logos cropped away; mag1–4.jpg are the Depo Magazine covers from front/public/images/depo-magazine/), spread so the same photo never sits next to itself.
• css/rail.css here resets .rail { display: block; gap: 0; padding: 0; overflow: visible; scroll-snap-type: none }: the site's own .rail rule in site.css (home rails) otherwise turns the rail wrapper into a flex scroller and puts track, edge zones and progress side by side.
• The pinned row is driven by the page scroll, not by scrollLeft, so a wheel over it scrolls the page (and so the row) rather than being captured; this keeps the frame-by-frame screenshot meaningful (each frame shows the row about one spread further on).
• At 1440 px the free rail only overflows by about 120 px (six columns of two covers fit almost entirely); it has more to scroll on narrower screens.