Quintin & Ron~4 min read

The site had to behave like the camera.

A self-initiated side project, built alone, with two photographers defining the brief.

  • Role: Art direction, design, front-end
  • Timeline: Side project
  • Team: Solo, with the photographers on the brief
  • Impact: Not measured yet
  • Platform: Web
Skip the static, live it

Overview

The photographs had a world, and the site showing them was a white page with a grid on it.

Quintin & Ron are editorial photographers. The pictures are dark, saturated, and staged. Their site was a white grid, which is what almost every photography portfolio is. Nothing on it was broken. The catalogue kept the world outside.

Worked with: no one on the build; the photographers on the brief.

Scope

I owned

  • The visual language: the darkroom palette, Instrument Serif against JetBrains Mono, and the camera vocabulary everything else hangs off
  • Three presentation modes taken to working builds, and the call about which one leads
  • The shared scroll model underneath all three, which is what stops them being three websites
  • The iris transition, the film-edge hairlines, and the archive panel
  • Front-end: the HTML and CSS, and the smooth-scroll integration the motion is timed against
  • The WebGL2 lens, implemented from an existing shader rather than written from nothing

Shared with Quintin & Ron

  • The brief, which was self-initiated and then defined together rather than presented
  • The only read that mattered at the end: whether it looked like them

Research

I set one rule: every effect had to come from a camera, or it did not ship.

A white page claims the interface and the work are separate things. I looked at what sits around a camera instead of at web design.

What the interface is made of

  • The darkroom became the palette.
  • Film stock became the warmth and the texture.
  • The viewfinder became the framing system.
  • 35mm film became the tracking lines.
  • The lens became the primary interaction.
  • The iris became the transition between modes.

The rule made arguments with myself cheaper. “Is this too much” has no answer. “Does a camera do this” does.

Decision: which mode leads

I built three ways to look at the photographs, and the one that shipped makes you behave like someone holding a loupe.

01 — Square

A centred aperture holds the current photograph while a filmstrip runs horizontally through it. The frame in hand is sharp; its neighbours lose focus with distance. Built entirely in DOM and CSS, with no shader behind it.

02 — Ribbon

The aperture becomes a lens. A ribbon of photographs passes underneath it, the centre frame dominant and its neighbours receding. The optical effect is built directly with WebGL2, so the centre of the screen feels physically refracted.

03 — Bleed

The photograph becomes the page. A crop rectangle sits over a full-bleed image and everything outside it is suppressed. Scrolling changes the composition rather than replacing the picture.

Square is legible and cheap but only describes a camera. Bleed is the most striking single screen and has no way through sixteen photographs. I made Ribbon the default and kept the other two as modes.

Decision: one scroll model

All three modes share one scroll model, so they never disagree about where you are.

They share the image index, positions, and snapping. Three separate versions would have been faster to write and would have drifted within a week. The lens runs on one factor, so the whole effect breathes in and out on one number. The cost is that the factor is now load-bearing.

Mode changes use an iris rather than a fade: six blades close, the layout changes while hidden, and it opens on the new mode.

Redesign

The interface was made from the same material as the photographs.

Depth and warm tones replaced white, like aged film stock and a studio spotlight. Dark was not the goal, because thousands of portfolios are dark. Display type is Instrument Serif and the supporting interface is JetBrains Mono.

AI let me build three directions quickly enough to cut two. It was not the art director. I wrote the HTML and CSS and built the smooth-scroll integration. The WebGL lens shader is adapted from an existing one.

Scope

Three modes and an archive of 16 photographs shipped, and the Work panel stayed out of the modes.

I refused to make the Work panel a fourth mode, because presenting work and finding it want different layouts.

Results

Both photographers said “That looks amazing!” and recognized themselves in it.

They also said they would consider hiring me if they update the site. That is interest, not a commission. No metrics exist. The only reactions on record are short remarks from two people.

Nobody who buys photography has used it, and there is no reduced-motion path

I never ran it against the white grid, so “immersion serves this work better” is an argument, not a finding. A full-screen lens may run badly on an older laptop, and I only tested on the machine I built it on.

Someone who has asked their operating system for less movement still gets the lens, the iris, and the inertial scroll. That is the first thing to fix. The iris can cut and the lens can hold still.

Sam Cusano