The Wall assembles

Summary

"The Wall assembles" makes the magazine covers the hero. The thirty real covers float at different depths and rotations around the headline "From the shoot to the cover"; scrolling a pinned stage flies them into one perfect wall (10 × 3 on desktop, 6 × 5 on tablet, 5 × 6 on phone). While the wall holds, a filter by magazine sends the other covers back into depth, and then the camera dives into one cover until it fills the screen and becomes the background of "What DEPO is". Every later section reuses that depth. Built as home18 in the owner's "ten million-dollar variants" round.

Prompt

The brief this page was built from.

Build a new home page for DEPO, a community where photographers, models, stylists, make-up
artists and magazines meet, shoot together and get published. Keep the real DEPO site header and
footer. Use real content only: the sections With your eyes, Connect, Locals, Depo Magazine,
Awards, Blog; the five roles; the six values (Collaboration, Responsibility, Inclusivity,
Empowerment, Tolerance, Innovation); the magazines Lucid, Palisade, ALAÏS, Delorian, VOÍD, DUSK,
Kaleido, Persona.Code; the shared covers and portraits. The bar is the home3 page (demo5):
premium, photo-led, editorial, rich but tasteful motion. Vanilla JS, self-hosted assets,
360–1920 px without horizontal scroll, visible focus, reduced motion respected.

Concept — "The Wall assembles": signature scene — the 30 real covers start scattered in 3D space
(different depths, rotations) around the headline and, as you scroll through a pinned section,
fly into place to form one perfect wall; then the camera zooms into a single cover which grows
to fill the screen and becomes the background of the next chapter. Palette: warm stone grey
ground with deep green and the brand yellow; a bold modern grotesk display (different from home3
(demo5)'s Schibsted Grotesk). Sections after: what DEPO is, magazines, roles, people, values,
Join. Live thing: once assembled, the wall can be filtered by magazine (non-matching covers drop
back into depth).

Look

• Type: one family, Bricolage Grotesque (optical sizes 12–96, weights 400 / 500 / 700 / 800): the headline at 800 with tight tracking (50–140 px), section titles 40–92 px, text 18–21 px, small 15 px.
• Palette: #d6d2ca warm stone ground, #e5e2dc paper, #c6c1b7 deep stone, #1b1c18 ink, #45463f soft text, #13321f / #1a3f28 deep green (header, chapter panel, roles), #469a58 green (hover, link underline), #edeae3 text on green, #ffb500 yellow (Join button, focus).
• Layout: the pinned stage (about 6.4 screens): headline, scattered covers, wall, the filter (All plus Lucid, Palisade, ALAÏS, Delorian, VOÍD, DUSK, Kaleido, Persona.Code), the dive and the green "What DEPO is" panel; "Eight magazines, one wall" (titles with a 3D stack of covers each); "Pick your side of the camera" (five portrait tabs on deep green); "Faces of the community" (12 portraits in four columns); "What we stand for" (sticky title, values list, a cover); "Your cover is next" over a wall tilted back into the floor. Real DEPO header and footer.
• Motion: one scroll progress value drives the stage: the headline leaves (0–14 %), the covers fly from seeded scattered positions into the wall with a stagger (4–36 %), the wall holds and filters (36–60 %), the camera dives (60–84 %), a crisp full-size copy fades in, and the chapter panel slides in from the right (from below on phones). Magazine stacks deal in and out on hover or click, the chosen role steps forward in depth, the face columns drift at different speeds, the final wall recedes slowly. CSS 3D transforms driven by vanilla JS. With reduced motion or no JS the stage is a plain page and the filter still fades the other covers.

Built with

Borrowed

• The real DEPO site header and footer markup and the site CSS, fonts and header JS (/demo15/css/, /demo15/fonts/, /demo15/js/) and images (/_img/site/), snapshotted from front/ at commit 43a7a8b^.
• DEPO's own magazine covers and portraits.
• Bricolage Grotesque from Google Fonts (SIL Open Font License).
• Craft guidance from the taste-skill and frontend-design skills; no code was copied from them.
• No third-party code otherwise.

Config

None — static page.

Notes

• The page has 153 cover <img> elements (122 of them lazy) and no srcset; the stage is heavy on slow phones.
• The "Show [title] on the wall" button in the magazines section scrolls back to the stage and applies that filter.