Cinematic

Summary

The home page as the opening titles of a film about the people who make pictures. A widescreen opening shot pushes in behind the title "The speed of your vision"; six community portraits arrive as pinned full-screen scenes that wipe in over each other, each with a scene title and the person's name as a credit; the six values are chapter cards over photographs; the magazines are a drifting poster wall; a closing credits roll lists every person and magazine and ends on Join DEPO. A fixed scene strip at the bottom (and a DVD-style scene selection menu) jumps to any scene. 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 — "Cinematic": DEPO as a film's opening sequence. Full-bleed community portraits fill
the screen one after another with deep multi-layer parallax (big title type in front, photo in
the middle moving slower, a slow Ken Burns scale), scenes change with soft clip-path wipes as
you scroll; type set like film titles (large, confident, not tracked caps). Ground: a rich deep
dark (not flat #000/#111 — e.g. a very dark green-black or ink-brown) with warm white text and
the brand yellow on the main action only. Sections: opening title (what DEPO is), the people
(portraits as scenes with their names as credits), the six values as chapter cards over images,
magazines, a closing credits roll (names of people + magazines) ending in Join DEPO. Live thing:
a scene strip / chapter selector that jumps between scenes.

Look

• Type: Lazurski, the DEPO site's own serif (self-hosted /demo8/fonts/LazurskiRegular.woff2 and LazurskiBold.woff2, declared as "H11 Lazurski"), for every title, set large like film titles with tightened word spacing; Lato (site font, /demo8/fonts/) for text. No Google Fonts.
• Palette: ground #0d1410 (deep green-black), raised panels #16201a / #1e2a23, warm white #f2efe8, soft warm grey #bdb6a8, brand yellow #ffb500 only on the two Join DEPO buttons.
• Layout: opening shot (the green fringe-coat banner as a letterboxed frame over the title and intro), "For the people who make pictures"; the cast: six pinned full-screen portraits, scene title plus "with [name]"; "Six values, six chapters": chapter cards over portraits; "Where the pictures end up": a four-column poster wall of covers with a magazine picker; "Your name belongs in the credits": a centred credits roll and Join DEPO. Type scale of five sizes (152 px down to 15 px).
• Motion: one requestAnimationFrame loop on a passive scroll listener drives everything. The opening frame opens from scope ratio to a close-up while the title rises and fades faster than the photo. Cast scenes wipe in from the right with clip-path, photo slower than the type, the outgoing scene darkens, each portrait has a slow Ken Burns zoom. Value photos wipe open and drift in their frames; the four poster columns drift against each other; credits brighten as they pass the middle of the screen. Staggered reveals and hover/press feedback elsewhere. Reduced motion or no JS: every scene is a plain full-height block.
• Live thing: the scene strip — a fixed bottom bar with the current chapter and scene, 15 small frames grouped by chapter (hover names the scene, click jumps), previous / next. "Scene selection" opens a full-screen menu of stills with titles, Escape to close and focus kept inside. On phones the bar shrinks to the label, arrows and a "Scenes" button (44 px+). It slides away over the footer. Second interaction: picking a magazine lights up its covers on the poster wall and dims the rest.

Built with

Borrowed

• The real DEPO site header and footer markup, styled by the /demo8/css/* snapshot of the DEPO front (taken at commit 43a7a8b^), with the site's own /demo8/js/* scripts.
• The DEPO site fonts Lazurski and Lato from the same snapshot; the home-page banner (model in a green fringe coat).
• The real DEPO copy (values, roles, magazines, people) from the shared builder data of the home10–20 session; the scene titles ("Find your crew", "Shoot down the street", "Answer an open call" …) were written by the builder.
• Skills: frontend-design and taste-skill (house rules and inspector), as the brief required.
• No third-party code.

Config

None — static page.

Notes

• Lazurski draws Ï and Í as the wrong letters, so the @font-face rules leave those characters out (unicode-range); "ALAÏS" and "VOÍD" fall back to a system serif.
• Lazurski's "d" carries extra space after it; display lines pull the next word in (.h11x-d).