Split

Summary

"Split" is a home page cut in two like a fashion-house lookbook. On desktop the whole page is one pinned scene: the left half is a paper panel that tells DEPO's story chapter by chapter (what DEPO is, the five crafts, the six values one per screen, the people, Join), and the right half is an off-black wall of 42 real covers and portraits moving in two columns, up and down at different speeds. The live thing is the craft list: point at Photographers, Models, Make-up artists, Stylists or Magazines and only that craft's photographs stay in colour. It was built for the owner's "ten million-dollar variants" round as home14.

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 — "Split": a fashion-house split screen. Signature scene: the viewport is divided in two
halves; one half is a sticky editorial text panel whose content changes per chapter, the other
half is two columns of photographs moving in opposite directions at different speeds (parallax),
photographs revealed with clip-path as they enter. Palette: near-monochrome (off-black and soft
white — choose refined tones, not #000/#fff) with brand yellow as the single accent; a high-
fashion display face (a refined serif or a thin-to-bold grotesk) + sans. Chapters: what DEPO is,
for photographers / models / stylists / make-up artists / magazines (roles content), the six
values, people, Join. Live thing: hovering/tapping a role in the text panel recolours and
refilters the photo columns. On phones it becomes a stacked composition.

Look

• Type: Bodoni Moda (optical sizes, 400–600 and italic 400) for the display lines, chapter titles and the big craft list; Lato (the site's own font, /demo11/fonts/) for reading text, notes and buttons.
• Palette: #ecebe8 soft white (the text half), #17161a ink, #67636a secondary ink on paper, #141315 / #201f22 off-black (the photo half), #a19da3 secondary ink on dark, #ffb500 brand yellow as the single accent (button, active chapter dot, link hover).
• Layout: desktop (≥ 960 px): a 50 / 50 split under the real DEPO header. Left: chapter text set large ("The speed of your vision", "Made for everyone on set", "What DEPO stands for", "Faces of the community", "Your name in the credits") with a chapter menu (DEPO · Crafts · Values · People · Join) and a values menu at the bottom. Right: two photo columns with captions such as "Lucid Magazine". Under 960 px it becomes a stack: paper text blocks alternating with dark photo pairs.
• Motion: scroll progress through the pinned section picks the chapter; chapter parts enter with a stagger and each value name rises out of a mask. The two columns move in opposite directions with smoothing (the longer column faster), each photo wipes in with a clip-path (from below in the rising column, from above in the falling one) and eases down from a slight zoom. The columns almost stop during the Crafts chapter so the colour filter always has photos on screen. On phones the photo pairs wipe in and drift apart. Reduced motion: no wipes, the columns jump once per step. All in vanilla JS (rAF, IntersectionObserver).

Built with

Borrowed

• The real DEPO site header and footer markup and the site CSS, fonts and header JS (/demo11/css/, /demo11/fonts/, /demo11/js/) and images (/_img/site/), snapshotted from front/ at commit 43a7a8b^.
• The magazine covers in /_img/photos/ and the portraits in /_img/site/first-page/ are DEPO's own content.
• Bodoni Moda 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 builder's taste-skill inspector run left FAILs only in the site header and footer (button shadow, footer gradient, Poppins and Lazurski fonts), which are kept 1:1 on purpose.