Orbit

Summary

A home page for DEPO that shows the community as something alive and in motion. In the hero twelve portraits (inner ring) and twelve magazine covers (outer ring) orbit the green DEPO eye in 3D under the headline "The speed of your vision" — DEPO's slogan. The ring tilts with the pointer and steepens as you scroll; in a pinned scene the portraits then fly into the cells of a flat grid of named people next to "Everyone you need for the shot". Further down: "Choose who you are" (picking a role turns that role's pictures to the front of a second ring), the magazines as a fan of covers per title, a banner, the six values and a closing "There is a place for you here" circled by faces. It was one of the ten home pages (home10–home20) made to match the quality of home3 (demo5).

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 — "Orbit": the community as a living constellation. Signature scene: in the hero,
community portraits and covers float on slow 3D orbits/rings around the DEPO mark (CSS 3D +
rAF), the ring tilts with the pointer and with scroll, and depth of field is suggested by
scale/opacity (avoid blur-heavy glass). Then a pinned scroll scene where the orbit unwraps into
a flat grid of people. Palette: deep forest dark with soft warm light, brand green/yellow
accents (no violet/indigo); a modern humanist or geometric sans with a distinctive display
weight. Sections: hero orbit, what DEPO is, roles (choosing a role re-arranges the orbit to
bring that role's people/magazines to the front — the live thing), magazines, values, Join.

Look

• Type: Red Hat Display 500–900 for headlines (800, tight −0.035em tracking, up to 124 px in the hero) and buttons; Red Hat Text 400–700 for body text, name pills and lists. Site header and footer keep the site fonts in /demo17/fonts/.
• Palette: forest ground #0c1811 with two lifts #122219 and #173022 (cards, panels), ink #eeeee4, soft #b9bfae, muted #7f8f82, brand green #469a58 and a light green #7cc58a (bullets, link underlines), brand yellow #ffb500 (main button, focus ring).
• Layout: the real DEPO header on the forest ground. Hero: the orbit fills the stage, the DEPO eye in the middle, the big headline bottom left and lead + actions bottom right. Pinned scene: copy on the left, a 4×3 grid of portraits with name pills on the right. Roles: copy and role buttons on the left, the ring of role pictures around the eye on the right. Magazines: title list with cover counts beside a fan of covers. Then a full-width banner, the values as a two-column list, the join ring and the real footer. Below 768 px everything stacks and the rings get smaller.
• Motion: one requestAnimationFrame loop drives three rings. Points sit on tilted circles in 3D and are projected by hand; depth shows as scale and opacity, not blur. The tilt follows pointermove and the scroll position. In the pinned section the portraits move from their orbit places into their grid cells (FLIP: the grid is the resting layout). Choosing a role rotates that role's three pictures to the front; picking a magazine brings its covers forward in the fan; the banner moves with scroll; headings and list items reveal on entry. Each ring only animates while its section is on screen (IntersectionObserver). With reduced motion or without JS every section is a plain static layout.

Built with

Borrowed

• The real DEPO site header and footer, copied 1:1 from the live site, and their styles and scripts from the site-asset snapshot (/demo17/css/, /demo17/js/, /demo17/fonts/, /_img/site/) of the DEPO front (taken from front/ at commit 43a7a8b^).
• Values, roles, magazine names and the slogan "the speed of your vision" are DEPO's own copy (the shared build/shared.mjs data of the home10–home20 batch).
• Covers in /_img/photos/ and the portraits are DEPO's demo photography.
• Skills used while building: frontend-design and taste-skill (named in the shared brief).
• No third-party code: the 3D projection is hand-written, no three.js or animation library.

Config

None — static page.