The Index

Summary

"The Index" is the typography-led variant: the home page reads like the back of a luxury publisher's catalogue. The hero asks "Who makes the picture" next to the ALAÏS cover; below it, the index itself, a huge list in Bodoni Moda that switches between Magazines, People and Roles. On a mouse, a hovered row's picture follows the pointer with inertia and the hero and closing sections leave a fading trail of the thirty real covers; on touch, rows open inline with their pictures. One chapter breaks the grey: the values on deep green, pinned while each portrait wipes in. Built as home16 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 Index": an editorial, typography-led home. Huge, beautifully set lists
(magazines, people, roles) fill the page like a luxury publisher's index; moving the cursor over
the page leaves a fading trail of real cover/portrait images (image-trail effect), and hovering
a list row shows that row's image large, following the pointer with inertia. Palette: light
neutral grey ground (cool, not cream), ink near-black, deep green as the field colour of one
chapter, brand yellow for the action; pair an elegant serif display with a precise sans. Smooth
inertial motion everywhere, staggered line reveals with masked text. On touch screens rows
expand inline with their images. Live thing: the index can be switched between Magazines /
People / Roles.

Look

• Type: Bodoni Moda (optical sizes, 400–700 and italics) for titles, index rows, value names and the closing wordmark; Geist 400–600 for reading text, row details and buttons. Sizes: 58–172 px, 38–100 px, 26–36 px, 17–19 px body, 15 px small.
• Palette: #e3e5e8 cool grey ground, #eef0f2 paper, #121315 ink (also the header bar), #50545b soft text, #0e3221 deep green (values chapter), #e6eee8 mist text on green, #469a58 brand green, #ffb500 yellow for the action and text selection.
• Layout: hero (two masked title lines, the magazine names as a serif sentence, lead, "Join DEPO" and "Open the index", the cover at full height); the index with a Magazines / People / Roles switch and rows like "Lucid … 6 covers +"; the pinned green values chapter (six names left, portrait and text right); "Where it happens" (banner, then Connect, Locals, Depo Awards, DEPO Magazine in four columns); close "Add your name to the index" with a huge italic green DEPO cropped into the real footer.
• Motion: staggered masked line reveals on every heading and row (IntersectionObserver); the index switch sinks old rows under their masks and raises the new ones; hovered rows dim the others and show the picture large, following the pointer with inertia and a slight tilt; image trail of covers in the hero and close (fine pointer only); in the pinned values chapter scroll picks the value, its name turns italic and white, and its portrait wipes up with a clip-path from a slight zoom; inertial parallax on the hero cover and the banner. Rows open with a grid-rows height animation. Reduced motion removes the motion and the trail and keeps every list visible.

Built with

Borrowed

• The real DEPO site header and footer markup and the site CSS, fonts and header JS (/demo13/css/, /demo13/fonts/, /demo13/js/) and images (/_img/site/), snapshotted from front/ at commit 43a7a8b^.
• DEPO's own magazine covers, portraits and banner.
• Bodoni Moda and Geist 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 head script adds h16-js and drops it on load if the page script never ran, so the lists and values never stay hidden.