Quintin & Ron~8 min read
The site had to behave like the camera.
I built three ways to look at the same photographs. The one that shipped makes you behave like someone holding a loupe.
- Role: Art direction, design, front-end
- Timeline: Side project
- Team: Solo, with the photographers on the brief
- Impact: Not measured yet
- Platform: Web
The short version
Quintin & Ron are editorial photographers. The pictures are dark, saturated, staged, and expensive-looking. The site showing them was a white page with a grid on it, which is what almost every photography portfolio is.
Nothing on that site was broken. It was a catalogue of work that had a world, and the catalogue kept the world outside.
I set a brief with them rather than for them, and the question that made it buildable was narrower than the brief: if the pictures came out of a camera, what happens when the site is one? Three answers got built to working prototypes. One became the default.
There are no numbers in this study. The only people who have used it are the two photographers it was made for.
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
The brief
The photographs had a world. The website was a catalogue.
A white page is not a neutral container. It is a claim that the interface and the work are separate things, and it holds the pictures at arm’s length from what made them worth looking at. This was self-initiated, and the failure mode of self-initiated work is a demo that flatters the designer, so the constraint I set was narrow: every effect had to come from a camera, or it didn’t ship.
What replaced the white is depth, with creamy organic tones set against it — aged film stock and a studio spotlight rather than a neutral grey. The goal wasn’t a dark site; dark is a preference, and there are thousands of dark portfolios. It was for the interface to look like it was made of the same material as the pictures. Display type is Instrument Serif, the closest free relative to PP Editorial; the supporting interface is JetBrains Mono, which is what stops the typography turning precious.
I stopped looking at web design and started looking at what sits around a camera.
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.
A reference is applied to a design. A mechanic has rules, and the rules decide things for you — which is the difference between a page that looks like an aperture and a page that stops down like one.
Three directions
Each one tested a different answer to the same question: how should a viewer move through a body of photographs?
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. Scrolling enlarges the background image until it dissolves into the next one. 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 one I pushed furthest technically: 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, which puts the gesture closer to reframing a photograph than to browsing a set of them.
The loupe won
Which of the three was actually a camera?
I made Ribbon the default and kept Square and Bleed as modes, rather than choosing on which one looked best. All three ran on the same scroll model, so the comparison was about the relationship between interaction and photograph and nothing else.
Square is the most legible and by far the cheapest to run, and it describes a camera without ever making you use one. Bleed produces the most striking single screen and the least navigable set: reframing one picture is a good gesture that gives you no way through sixteen. Ribbon makes the viewer behave like someone looking through a loupe — the lens is the subject, the surrounding images are the archive, and the movement is the act of finding the next frame. For a photographer, an interaction carrying the brand is a stronger claim than a typeface carrying it.
Three modes, or three websites?
A single scroll model sits underneath all three explorations instead of each one owning its input handling. They share the image index, the image positions, the active-frame calculation, and the snapping, so scrolling, dragging, snapping, and stepping all reduce to one question: which image centre is closest? Three separate implementations would have been faster to write and would have drifted by the second week, and the drift would have shown up as the modes disagreeing about where you were.
The lens follows the same rule. Its effect list is long — optical pull, rim distortion, chromatic dispersion, a central glow, a shimmering ring — and assembling it was not the hard part. Controlling when any of it happens was. A lens that distorts constantly is a filter; a lens that answers focus, entry, scrolling, and movement as one continuous optical system is a lens. So every setting is modulated through a single lens factor, and the whole effect breathes in and out on one number rather than five animations that happen to be running at once. The cost is that the factor is now load-bearing.
Mode changes don’t fade either: six blades wind shut, the layout changes while it is hidden, and the aperture opens onto the new mode, rotating as it stops down the way a real iris does. The Work panel is the one thing I refused to make a fourth mode — the experience presents the work, the index helps you find it, and those two jobs want different layouts.
How it got built
AI is how this went from a visual idea to a running experience in the weeks available: testing layouts quickly, turning interaction ideas into working prototypes, and pushing concepts further than I could have reached by hand in the same time. It was not the art director. The camera vocabulary, the composition, the motion language, and the relationship between the photograph and the interface came from the system I was setting. I wrote the HTML and CSS, built the Lenis integration, and implemented the WebGL shader from an existing one.
The useful part was not that it can write code. It is that it made testing whether a visual idea can exist cheap enough to do three times. Two of the three got cut, and cutting two directions is only affordable if building them was cheap.
Immersive sites fail the same way: everything moves, and the visitor ends up trapped inside someone else’s motion demo.
Which is why the camera was a filter rather than a taste call. Movement communicates focus, distortion communicates optics, the iris communicates transition — each doing a job that can be named. When an interaction couldn’t justify itself through the camera, it had less reason to exist. That is a cheaper argument to have with yourself than “is this too much”, because it has an answer.
They also said they’d consider hiring me if they decide to update the site. That is interest, not a commission, and this study is not going to round it up into one. What it does settle is the thing the experiment was for: whether two photographers would recognise themselves in an interface. They did.
A photographer doesn’t need a website that looks like photography. They can have one that behaves like it.
Two people have seen it, and neither of them is the audience
The reaction on this page is from the photographers. Nobody has put this in front of the person a photography site is actually for — a photo editor, an art buyer, a client hunting for one specific image before a meeting. That reader is the case for the white grid I threw out, which is fast, familiar, and gets out of the way. I never ran the two against each other, so “immersion serves this work better than a catalogue” is an argument here, not a finding.
Nothing is instrumented. There are no load figures and no frame rates from anything other than the machine it was built on, and a full-screen WebGL2 lens is exactly the kind of thing that runs beautifully there and badly on a four-year-old laptop. That is a real risk to the work and it is currently unmeasured.
There is also no reduced-motion path, and that one is not an unknown — it is a thing I know the build does not have. Someone who has asked their operating system for less movement gets the lens, the iris, the drifting film lines, and the inertial scroll anyway, because nothing in here ever asks. On a site whose whole argument is that motion carries the identity, that is where the argument stops being free and starts being a cost somebody else pays. It is the first thing to fix rather than a caveat to publish around, and the fix isn’t to turn it all off: the iris can cut, the lens can hold still and stay sharp, and the archive can land without the wave. The photographs are the content. None of the motion is.
And the shader is not mine from nothing. I implemented it from an existing one. The optical behaviour, the single lens factor, and the decisions about when distortion is allowed to happen are mine. The refraction maths is not, and a study that lists seven optical effects owes the reader that sentence.
