Studio light

Summary

"Studio light" stages the home page as a dark charcoal-green photo studio. The hero portrait (Rian Galdos) is shown dim and desaturated, and a soft key light follows the pointer to reveal it in full colour; on touch, or when the pointer rests, the light drifts by itself. A small console sets the light warm or cool, soft or hard. As you scroll, the same light sweeps the "What DEPO is" statement word by word, holds still while twelve faces walk through it, opens one craft at a time, lights one magazine's covers and switches on each value. Built as home17 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 — "Studio light": a dark photo studio. In the hero a soft key light follows the pointer
(a radial mask) and reveals a full-colour portrait over its dim, desaturated version; on
touch/no-pointer it drifts slowly by itself. As you scroll, the light "sets up" each section:
portraits light up when they enter, values appear like lit set cards. Very tasteful, cinematic,
not a gimmick: deep charcoal-green studio tones, warm light, brand yellow only for the action; a
refined grotesk or a contemporary serif display. Sections: hero, what DEPO is, people (lit one
by one with parallax), roles, magazines, values, Join. Live thing: a small lighting control
(warm/cool, soft/hard) that changes the light on the hero portrait in real time.

Look

• Type: Instrument Serif (regular and italic) for headlines ("Set the light. Make the cover.", "Twelve faces, one light", "Step onto the set."), vertical role names and value names; Lato (the site's font) for reading text, buttons and the console.
• Palette: #0c110f studio ground, #131a16 wall, #18211c raised surface, #f1ebe0 warm white text, #b4afa3 soft text, #ffcf94 warm light (glows, link underlines, focus), #469a58 brand green, #ffb500 yellow only for the action.
• Layout: hero (title, lead, "Join DEPO", "See the gallery", the console "Key light on Rian Galdos", portrait in a lit frame); statement and four tools (Connect, Locals, Open calls, Depo Awards) with small light bars; "Twelve faces, one light", a pinned horizontal track of portraits; "Everyone on the call sheet", five tall dim strips with vertical serif names; "Magazines on DEPO", pick a title to light its covers; "What DEPO stands for", six set cards alternating left and right; "Step onto the set." on the banner with the same light rig. Real DEPO header and footer.
• Motion: the light rig is a dim base picture plus two masked colour layers moved only by transform (two custom properties per frame), with eased lag behind the pointer and a slow drift path on touch. On load the light fades up and the headline lines rise. The statement lights word by word on scroll; the faces track is pinned and slides through a fixed central light, each face going from dim to colour as it passes, with parallax inside each frame. Role strips widen into the light on hover or click (on phones each lights as it enters); value cards switch on with a warm beam from above. Without JS everything is fully lit; with reduced motion nothing moves by itself.

Built with

Borrowed

• The real DEPO site header and footer markup and the site CSS, fonts and header JS (/demo14/css/, /demo14/fonts/, /demo14/js/) and images (/_img/site/), snapshotted from front/ at commit 43a7a8b^.
• DEPO's own portraits, covers and banner.
• Instrument Serif 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 last full inspector run did not finish (the machine was overloaded); there was no final 768 px pass or automated horizontal-scroll check. Worth a look at tablet width.
• Instrument Serif has a single weight, so the CSS font-weight: 500 and the "opsz" variation setting have no effect.