The Stack

Summary

DEPO's magazine covers as physical things. The hero is a pinned scene on a deep green field: a pile of covers lies on a table in perspective next to "From the shoot to the cover"; as you scroll it lifts, stands up into a deck receding to the right and deals twelve covers one by one, each swinging toward you and out of frame while its magazine name fills the left side. After that: what DEPO is (paper), the values, a deck of all covers per magazine (the live thing), the roles as tabs, two rows of faces and "Your cover is next" with a fan of covers. One of eleven parallel home-page concepts (home10–home20) made after the owner picked home3 as the bar.

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 Stack": real magazine covers as physical objects in 3D. Signature scene: a pinned
hero where a tall stack of covers (CSS 3D, perspective) fans out, tilts and deals cover after
cover toward the viewer as you scroll, with soft realistic depth (no heavy drop shadows at rest
— use tone and perspective), each cover's magazine name appearing beside it. Ground: deep brand
green fields alternating with a pale paper section; a modern geometric/grotesk display face.
Sections after: what DEPO is, the magazines (stack per magazine), roles, people, Join. Live
thing: drag/swipe (and arrow buttons) to flip through the stack manually, with a filter by
magazine.

Look

• Type: Archivo only, variable width 100–125 and weight 400–900: display at weight 850 and width 116 %, section titles 800 / 112 %, text at 400–500. Five sizes (104 px down to 15 px).
• Palette: deep green #0d2618 / #12321f (hero, values, magazines, people), pale paper #eef1ea / #e2e7dd (about, roles, join), ink #121612, mist text on green #edf2eb, soft #b8c8bb, brand green #469a58 for link underlines and bullets, brand yellow #ffb500 for the main button on green and focus rings.
• Layout: pinned hero (title and actions left, the pile right; then the magazine name huge left with "Cover N of 12 from the stack"). About on paper: statement, a full-bleed parallax band with the banner, then Connect / Locals / Depo Awards / DEPO Magazine. Values in large type. Magazines on green: filter chips (each with a tiny fanned stack and count), the deck, a discard pile. Roles on paper: five name tabs with a picture panel. People on green: two rows of twelve portraits. Join on paper with a fan of five covers.
• Motion: the hero is driven by requestAnimationFrame on a passive scroll listener, transform and opacity only: the pile lifts, stands into a deck, then deals covers that swing toward the viewer and drop out. Depth comes from perspective and a green tone layer that darkens deeper covers, no drop shadows. Role pictures deal in with a 3D swing, the people rows drift in opposite directions, the join fan opens on arrival. Reduced motion: no pin, no drift, a static standing deck.
• Live thing: the magazine deck — flip by drag or swipe (with momentum and snapping), prev / next buttons, tap, or arrow / Home / End keys; flipped covers arc over onto a face-up discard pile; the big magazine name and "N of M" follow; chips filter by title (All, Lucid, Palisade, ALAÏS, Delorian, VOÍD, DUSK, Kaleido, Persona.Code).

Built with

Borrowed

• The real DEPO site header and footer markup, styled by the /demo10/css/* snapshot of the DEPO front (taken at commit 43a7a8b^), with the site's own /demo10/js/* scripts.
• The real DEPO copy (values, roles, magazines, people) from the shared builder data of the home10–20 session; headlines like "From the shoot to the cover" and "Your cover is next" were written by the builder.
• Google Fonts (Archivo); DEPO's magazine covers, community portraits and home banner.
• Skills: frontend-design and taste-skill (house rules and inspector), as the brief required.
• No third-party code.

Config

None — static page.

Notes

• At 768 px the pinned magazine name could sit close to the stack; the stack was moved below the name on narrow screens, but the inspector was not re-run after that change.