The Varnish

Artificial Noodles ·

Brief monochrome-editorial × hope × decision-branching × Stradivari varnish

Inspired by Stradivarius on Wikipedia

Built with HTML/CSS · GSAP-ish CSS animations · Web Audio API (additive violin synthesis + ConvolverNode plate reverb) · FAL.AI flux/dev (9 generated assets) · UnifrakturMaguntia · EB Garamond · Cormorant SC

Techniques Reading-as-interaction + decision-branching (pick 3 of 6 = 20 combinations) · Ingredient-modulated additive violin chord (each ingredient weights a specific harmonic partial) · CSS mask-image paper-burn dissolve on the shelf · CSS filter state transition on the hero violin (grayscale → warm varnish) · Deterministic verdict composition (hash → critic, size, amber phrase) · Click-to-begin audio gate · B♭ drone under everything until the chord decays

Direction A Guardian Long Read crossed with an Early Music journal plate. Fraktur headline, Garamond body, Cormorant SC for labels. Irving Penn’s side-light for the hero violin. Félix Vallotton’s woodcut discipline for the six ingredient bottles. Amber spent once, on the verdict phrase.

Result You read a real mystery (Stradivari’s varnish recipe was never written down), you pick three ingredients from six generated etchings, the page burns to dissolve your shelf, the violin warms from monochrome to amber, and a violin chord built from your exact ingredient combination plays while an italic verdict types in — closing with a deadpan punchline that the real mystery, of course, was in the wood.

The Story

The mystery of the Stradivari varnish is one of the longest-running open questions in applied material science. Antonio Stradivari (1644–1737) made roughly eleven hundred violins in a single workshop on the Piazza San Domenico in Cremona. About six hundred and fifty survive. What makes them sound the way they sound has never been fully decoded. The wood — Alpine spruce grown through the Maunder Minimum’s cold summers, dense and consistent — matters enormously. The arching matters. The varnish — the thin golden film Stradivari brushed in many coats — has been the romantic suspect for most of three centuries. Lawrence Livermore has run elemental analyses. The Musée de la Musique has X-ray-fluoresced instruments. Propolis has been found. Beeswax, linseed oil, pumice ash, volcanic mineral traces. Nobody has written the recipe down.

This piece makes you the apprentice. You pick three ingredients from six that have — credibly — been identified in Stradivari varnishes at one lab or another. The violin you didn’t actually build responds to your choices: its sound is composed on the fly from a stack of sine partials, each weighted by which ingredients you chose. A short italic Garamond verdict — written in the voice of an imagined magazine critic from some specific year in the twentieth century — declares what your varnish would have produced if you had, in fact, built the violin.

The final line is the quiet punchline the piece has always been about. The real mystery, of course, was in the wood.

The Take

The brief was monochrome-editorial × hope × decision-branching × Stradivari varnish. All four parts are working at once. The editorial POV is doing the heavy lift — the piece must read, first, as a magazine spread with typographic authority, not as an interactive toy that happens to have text. Hope is the emotional register — you made something unique. Decision-branching is the medium — a short, forked path that the reader owns. The varnish is the subject kernel that lets the first three parts breathe.

The interaction is deliberately quiet. You read the setup. You pick three bottles. The paper burns where the bottles used to be. The violin tints. A chord plays, a verdict types in. There is no scrubbing, no dragging, no sustained gesture — only three discrete choices that fix the outcome. The whole session is around 90 seconds including the reading time, and it ends.

Typography does structural work. Fraktur for the headline (and later, “The Verdict”) gives the register instantly — this is a craft editorial, not a product page. EB Garamond italic for the body and the verdict carries the argument; the verdict is written as if it were a paragraph in a 1923 Apollo Magazine review or a 1974 Early Music letter-to-the-editor. Cormorant SC small caps at heavy tracking handle every other label and caption — the dateline (“CREMONA · MCMXCII · AN ANACHRONISM”), the kicker, the ingredient names, the punchline. The amber accent — the single colour in an otherwise near-monochrome palette — appears exactly once, on the final phrase of the verdict. It’s the only burst of warmth in the piece, and it lands on a specific sentence written for the occasion.

The Tech

First piece built with FAL.AI-generated assets

Of the last ~30 experiences at Artificial Noodles, this is the first to use generated imagery. The project had drifted into procedural-math-only work — shaders, compute, particle systems — because the brief-seed tends to surface subjects that reward that approach. Vapochromism, sympathetic resonance, Cherenkov radiation, tidal disruption: all want shaders. But the Stradivari varnish brief demanded Irving Penn-register photography and Vallotton-register etching, neither of which a fragment shader can produce without looking like a crude caricature.

Nine assets were generated with fal-ai/flux/dev via the newly-registered FAL MCP server (raveenb/fal-mcp-server):

Total generation cost: ~$0.23.

CSS-driven visual state machine

The whole experience runs in the DOM. Three things change state on the third selection:

  1. The hero violin transitions its CSS filter from grayscale(1) contrast(1.05) to grayscale(0) sepia(0.35) saturate(1.15) contrast(1.05) brightness(1.02) over 1200ms with cubic-bezier(0.16, 1, 0.3, 1). The image itself never reloads — it was colour the whole time; the grayscale was the reader’s viewpoint, and varnishing removes it.

  2. The bottle shelf acquires a .dissolving class which applies mask-image: url(dissolve-mask.png) with a keyframe animation sliding the mask-position from 0% 0% to -90% -90% and opacity to 0 over 1400ms. The effect reads as the paper burning irregularly from the corner inward. After the animation completes, the element is set to display: none to collapse the vertical space.

  3. The verdict section’s Fraktur heading fades in, then three italic Garamond sentences type in one after another, with the third sentence broken into three spans — a plain-ink prefix, an amber-coloured centre phrase, and a plain-ink suffix — so the type-in writes directly into the amber-styled span character by character. The amber burst is not an animation; it’s simply the colour of the span into which the text is typed.

Web Audio: ingredient-modulated additive violin

The climax chord is built on A3 (220 Hz) with eight partials (×1, ×2, ×3, ×4, ×5, ×6, ×7, ×9) stacked as sine oscillators into a shared gain envelope (80 ms linear attack, 4000 ms exponential decay). Each partial has a baseline amplitude — an approximation of a violin’s harmonic spectrum — and each of the six ingredients boosts or dampens one specific partial by ±0.2ish:

Twenty possible three-ingredient combinations (C(6,3) = 20), each producing a distinguishable chord. A ConvolverNode plate reverb — impulse response is 400 ms of pow(1 - t/len, 2.0)-enveloped noise — opens to 0.22 wet on the chord and closes over the decay. A 58 Hz + 117 Hz sine-pair drone sits under everything from the moment the user clicks BEGIN (the audio gate) until the chord finishes decaying.

Click-to-begin audio gate

Applied from the previous feedback cycle: audio is gated behind an explicit visible BEGIN prompt in Cormorant SC at the centre of the screen with a soft pulse animation. AudioContext.resume() fires only inside the click handler. Hover-based audio unlock is specifically avoided — every previous audio experience had to learn this lesson once.

Deterministic verdict composition

The verdict text is composed from three fixed lookup tables — one per ingredient for the lead-adjective and body-clause phrases, one for the critic/author persona, one for the amber finale phrase. Each lookup uses an FNV-1a hash of the selection set so the same three ingredients always produce the same verdict — reload-stability matters because you might want to describe what you made to someone else.

Experience: The Varnish

This blog post was AI generated with Claude Code. Authored by Artificial Noodles.