The Johnny Marr Collection
Thirteen guitars, shown one at a time. Built from Christie’s designs, reworked after review, and live for the sale.
Launch the experience ↗A catalogue is a list. This is a collection: thirteen instruments that come into view one at a time, the way you'd lift each from the rack.
The situation
Present a landmark guitar auction without flattening it into a grid.
Johnny Marr's instruments carry history: a 1960 Gibson ES-355, a Rickenbacker 330, the signature Jaguars. A conventional lot grid gives a £150,000 guitar the same space as a thumbnail. Christie’s designers answered with a single guitar in focus at a time.
The page is for people deciding whether a lot deserves a closer look: collectors weighing a bid, and fans who know the records. Its job is to move them from browsing to a lot, so every guitar arrives with its catalogue details, its estimate and a Place Bid action.
My part
Christie’s designed it. I built it, on my own, with AI agents.
Christie’s designers gave me the Figma files. I turned them into a working experience in React, working with AI coding agents and reviewing every change myself. How it moves, how it responds to scroll and screen size, and the deployment were mine.
Christie’s also supplied the lot data and photography, and reviewed each version. Their feedback changed the build twice, which is covered below.
The signature interaction
Key decisions
- 01
One scroll value drives everything
The design shows a ring of guitars that opens into one guitar in focus. A static file cannot say how you get from one to the other. I derived every guitar's position, scale and depth from a single scroll value in one animation loop, so the ring, the orbit and the focus view can never drift out of step.
Principle 03 · What ships is what was designed
- 02
From free scroll to a stepped carousel
Version one was a continuous scroll. After Christie’s reviewed it, I rebuilt it as a stepped, looping carousel that lands on one guitar per gesture, with a side menu to jump straight to any lot. I kept both versions live behind a landing page so the team could compare them side by side before choosing.
Principle 02 · Test before build
- 03
A separate layout for small screens, not a scaled one
Below 1280px the orbit squashed the guitars. Rather than shrink it, the build switches to a separate upright, single-column layout: the guitar keeps its proportions, the details sit in a glass card, and the menu becomes a two-by-two grid. I added snapping so scrolling settles on the nearest guitar when the gesture ends.
Principle 01 · Give the important thing weight
The Lots
Thirteen instruments · Est. GBP 8,000 – 150,000Working with Christie’s
Two rounds of review, and the catalogue checked lot by lot.
Review happened on working builds, not screenshots. The first round produced the stepped carousel. The second refined the focus view and the menu until they matched the designers’ file.
An auction page cannot be wrong about a lot. Titles, makers, dates and estimates for all thirteen guitars were corrected against Christie’s catalogue data before launch.
Under the hood
One rAF loop
Every guitar's position, scale and depth is derived from a single scroll value each frame, with no per-element tweens to fall out of sync.
A 4 MB opening
The hero video was compressed to about 4 MB so the first frame appears at once, with no poster flash.
Matched to the Figma
The focus guitar sits at the design's exact 68.57° angle, and the hero, menu and neighbouring guitars were checked against the file.
What I’d do next
Measure each lot
Track which guitars people stop on and which Place Bid actions they use, so the next sale starts with a baseline instead of a guess.
A reduced-motion path
The orbit is the experience, and some people cannot use it. A static, one-guitar-per-screen version should load when the system asks for less motion.
Lighter cut-outs
The thirteen guitar cut-outs are PNGs of around 1 MB each. Moving them to WebP or AVIF would cut the page weight without touching the design.
Results
- Lots, estimated at £8,000 to £150,000
- 13
- Days from first commit to the reworked version
- 7
- Versions built and compared with the client
- 2
- Higher click-through on new lots at Christie’s, 2026
- 12.5%
Build figures are from the project’s commit history, 25 June to 1 July 2026. The click-through figure is from analysis I ran at Christie’s in 2026.
