Through the lens

Summary

"Through the lens" turns the camera into the page's grammar. The first screen is the word DEPO in a heavy wide grotesk; its letters are windows onto the real banner photograph (the model in the green fringe coat) and its O is a lens ring with a second picture inside. A pinned scroll scene flies through the O until that studio shot fills the screen, and "Where pictures find their people" lands on it. From there every section opens through a circle: a role portrait opened with an f-stop slider, portraits that open like a shutter, the magazines and the closing banner opening as an iris. Built as home15 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 — "Through the lens": the first screen is the word DEPO set huge, its letters acting as
a window (CSS mask/background-clip with a real photograph inside, not a gradient); as you scroll
the camera zooms through the letter "O" (like through a lens aperture) until the photograph
fills the screen, then the story continues. Later sections open with circular aperture clip-path
reveals. Palette: deep brand-green darkness with warm white and the brand yellow; a strong
modern grotesk. Sections: hero zoom, what DEPO is, people (portraits revealed through
apertures), magazines, values, Join. Live thing: an aperture slider (f/1.4 … f/16 style control)
that opens/closes a circular reveal over a community portrait, revealing their name and role
link — keep it elegant.

Look

• Type: one family, Archivo (variable width 62–125 and weight 100–900): the wordmark and section titles at weight 800 and width 112 %, body text at 18–20 px, buttons at 700.
• Palette: #0b1a12 ground, #10261a field, #173823 moss, #469a58 brand green, #eef0ea warm white text, #b8c3b9 soft text, #ffb500 yellow for buttons, the active f-stop rim, focus rings and the value in focus.
• Layout: 1 the lens (≈ 3.3 screens, pinned); 2 "Your role, in focus": five role pills, the aperture dial (f/16 … f/1.4) and the round reveal over the role portrait, its three lines beside it; 3 "In front of the lens": four columns of portraits; 4 "Answer the call, make the cover": two rows of covers; 5 "What keeps us in focus": the six values as a list; 6 Join over the banner. Real DEPO header and footer.
• Motion: the word scales around the centre of the O while a clip-path: circle() opening grows with it (scroll-linked, one rAF loop); on load the letters rise, the ring opens and the photo settles. Portraits open from a pinhole, the people columns drift at different speeds, the two cover rows slide in opposite directions, the magazines and closing sections open as an iris tied to scroll, and the value nearest the middle of the screen is full white with a yellow name while the rest dim. Changing role stops down to a pinhole, swaps the picture and opens again. With reduced motion or no JS everything is static and visible; a 4-second fallback in the head removes the motion class if the script never loads.

Built with

Borrowed

• The real DEPO site header and footer markup and the site CSS, fonts and header JS (/demo12/css/, /demo12/fonts/, /demo12/js/) and images (/_img/site/), snapshotted from front/ at commit 43a7a8b^.
• DEPO's own banner, portraits and magazine covers.
• Archivo 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 f-stop dial is a real <input type="range">, so it works with the keyboard; the role name and link appear on the photo only at f/2.8 or wider, the three lines beside the frame always stay readable.