Showroom · Build notes

How Atelier Varga was made

Six unrelated stock photographs, one fictional architecture practice, and a scene instead of a page: full-viewport chapters, one duotone, and a wordmark that shears apart as you scroll.

What it demonstrates

Scene logic instead of page logic. There is no hero-and-sections scaffold and no grid of cards: the portfolio opens full-bleed on one duotone case-study photograph with the studio name at 20vw, and every project after it is a full-screen chapter — image, oversized title, and a file card you open for the metadata. Coherence still comes from the same two-declaration trick: every photo forced through one grayscale-plus-multiply duotone over an oxide ground. The footer says plainly that the photos are stock stand-ins for buildings that do not exist.

Techniques, honestly named

• Kinetic wordmark — "VARGA" at clamp(6rem, 20vw, 19rem), one span per letter; a staggered rise on load, then each letter drifts vertically at its own scroll factor, so the type shears apart as you leave the intro.
• Full-viewport chapters — every project is a 100svh section with scroll-snap-align: start (proximity snapping on the root), a bottom-anchored plate, and an 11vw uppercase title.
• CSS duotone at full bleed — filter: grayscale(1) plus mix-blend-mode: multiply over a solid oxide ground; the images run 114% tall and translate ±6% with scroll for parallax depth.
• Scrim discipline — a fixed ink gradient under every plate keeps paper-on-photo text at AA contrast no matter how bright the image gets.
• File cards on native <details> — the program / status / structure / area list opens upward from the plate; keyboard interaction comes from the platform, and it works with JavaScript disabled.
• Chapter chrome — an IntersectionObserver drives the "02 / 06" HUD counter, the active right-edge dot, and the plate reveal; the dots are plain anchor links, so chapter navigation is fully keyboard-operable.
• Reduced-motion stills — no letter drift, no parallax, no reveals: the same chapters as elegant stills.
• Honest fictions — the practice, clients, and carbon audit are labeled fictional in the copy itself; alt text describes what each photograph actually shows.

Recreate it