The theatre
behind the fall.

Concept

A webpage staged as
a live saleroom.

Lot 87 treats an auction as theatre: a lit artwork occupies centre stage, the walnut rostrum rises below, and the interface behaves like equipment in the room.

The hierarchy follows the auctioneer’s attention: Emilia Varos’s fictional painting, the illuminated bid amount, then your cream paddle. Scholarship and disclosure follow the performance. Specific provenance, an inspectable condition report and a live total let spectacle and trust share one room.

Visual & interactive technique

Every prop is
made in code.

The Painting & Frame

The artwork is an inline SVG in index.html. Layered paths form the rust earth and orchard trunks; radial gradients make a captive moon; sparse circles become fruit. A restrained turbulence filter adds tooth to the invented oil-and-casein surface. The gilt frame is CSS: nested gold gradients, inset rules and a long shadow produce physical depth without an image request.

The Raking-Light Examination

The brass surface-exam control calls toggleInspection() in main.js. It opens an SVG conservation layer through #inspection-aperture, revealing an earlier path, shifted trunks and handling marks. setInspectionPosition() converts pointer coordinates into the painting’s 560 × 680 viewBox, so the circular lamp follows the visitor without reading layout in an animation loop. Touch and keyboard users can switch on the centred finding with the same button.

The Bid Sequence

main.js advances the hammer in exact £20,000 steps. updateBoard() synchronizes amount, source, telephone lamp, conversions and the bid tape; appendPatter() preserves the auctioneer’s latest calls. Two telephone bids answer; the third paddle wins. declareSold() locks the control, swings the CSS gavel and slams SOLD across the frame.

The Crack & Atmosphere

makeCrack() synthesizes filtered noise and a falling triangle oscillator through Web Audio—no sound file is loaded. Concentric CSS shock rings, six light rays and the stamped SOLD band make the impact visible. The visibility-aware delay() pauses the sequence in a hidden tab. An IntersectionObserver stages later sections without a continuous animation loop.

The Honest Ledger

updateLedger() applies 26% to the first £300,000, 21% to the balance, then 20% VAT to premium alone. It recalculates with every bid. Native details keeps the condition report keyboard-accessible; an assertive live region announces the win without duplicating visual copy.

Palette & type tokens

Walnut, brass,
paper, signal.

Playfair Display carries catalogue titles and the auctioneer’s voice; Archivo handles factual prose; Chivo Mono gives amounts, dates and labels bid-board precision. --display, --body and --mono keep those roles consistent. Brass guides attention, cream carries evidence and SOLD red appears only at consequential moments.