TITLE A Short History of Fog in Port Verrow PROMPT A long-read magazine essay about fog in an invented harbour town, which the reader must read through fog. Slow volumetric-looking fog (WebGL fragment shader with layered fbm noise; CSS fallback) drifts over the whole page between the reader and the text; the pointer clears it locally, like a sleeve wiping a window or a lamp carried through mist; paragraphs condense into legibility as they reach the middle of the viewport and thin away again at the edges. Concept: an editorial page whose weather is its subject. Mood: muffled, maritime, literary, dry-humoured. Palette: fog white-grey #E6E8E6 page ground, thicker fog #BFC5C4, wet slate-green ink #26302F for text, and sodium amber #D98E04 as the one warm accent (the harbour lamp, drop caps, rules, the foghorn icon, links). Light page, low contrast in the fog but full contrast where cleared: body text itself is always dark ink at AA contrast underneath; the fog layer above never exceeds an opacity that would make text unreadable in the reading band, and a "Lift the fog" control removes it entirely. Fog system: a fixed full-viewport WebGL canvas above the content (pointer-events none): two or three layers of domain-warped fbm noise drifting at different speeds and directions, alpha shaped so the fog is densest at the top and bottom thirds of the viewport and thin in a horizontal "reading band" around the middle; a clearing mask: an array of recent pointer points passed as uniforms, marking where the pointer/finger has passed, which punches soft holes that slowly close again over ~4 seconds as the fog rolls back in: so the reader drags a clear patch around; a warm amber glow follows the pointer as if carrying a lantern, tinting the nearby fog. Scroll velocity stirs the fog (faster scrolling shears the noise). The fog density varies through the essay: section by section it is described in the text and enacted on the page (a "sea-fret" light haze; a three-day "blanket" during which the page is noticeably thicker and a foghorn sounds; a clear morning at the end when the fog withdraws entirely and the page stands in sharp light for the last section). The essay (about 900–1,200 words of real, good prose, bylined to the invented writer Maren Tollefsen for the invented quarterly "The Lee Shore"): numbered sections with cross-heads: I. "The Town That Is Sometimes There" (geography: the cold current, the warm land breeze, 140 fog days a year); II. "Seven Words" (the local vocabulary for fog: haar-like invented dialect words with definitions: "fret", "smoor", "wool weather", "the grey lady", "a dumb day", "a blanket", "a lifter"); III. "The Horn" (the foghorn installed 1883, its two-tone note every ninety seconds, the year it was silenced and the petition to bring it back because nobody could sleep without it); IV. "The Blanket of 1952" (three days, the ferry that tied up to the wrong town, the wedding conducted by voice alone); V. "What Fog Is For" (a reflective close: the town is the only place the writer knows where people give directions by sound). Layout and typography: classic magazine long-read: a generous single text column (max 34em) set in a fine book serif (Baskerville/"Iowan Old Style"/Palatino/Georgia) at 19–21px with real paragraph indents, hanging punctuation where possible, amber drop caps three lines deep, small-caps cross-heads with section numerals, pull quotes set very large in italic that sit half-submerged in fog ("We do not say the fog comes in. We say the town goes out."), marginal notes in small sans at the side on desktop (inline on phones). The title is set huge in a light-weight serif with wide tracking, its letters appearing out of the fog on load: the first three seconds: the page begins almost blank white-grey; the amber harbour lamp glows first, then the title's letters condense one by one as if seen through thinning mist, then the fog settles into its drift. Illustrations (SVG, monochrome slate with amber): a harbour chart fragment with soundings; the foghorn in elevation with sound arcs; a row of rooftops and masts in silhouette that sits behind the fog as a fixed parallax layer at the top of several sections, appearing and vanishing as density changes; a tide-and-fog calendar for an invented October as a small data graphic (days as cells shaded by hours of fog). Signature moment: section III's foghorn: when it scrolls into view, a long amber sound-wave ring expands from the foghorn illustration across the page every ninety seconds of story-time (every ~9 real seconds), physically pushing a ripple through the fog shader; if sound is enabled (designed toggle, off by default) a soft two-tone horn plays (two detuned low oscillators with slow attack and long release) with filtered-noise sea wash. Other interaction: click/tap sends a puff that clears a larger circle for a moment; keyboard users get a focus "lamp" that clears fog around the focused paragraph. Fallback without WebGL: CSS-animated layered semi-transparent noise textures (SVG turbulence) drifting, with a radial-gradient mask following the pointer. Reduced motion: fog is static and very light; text fully legible everywhere; no ripples. DESCRIPTION A magazine long-read from the invented quarterly "The Lee Shore" whose weather is its subject. The page opens almost blank: an amber harbour lamp glows at the end of a silhouetted mole, the letters of the huge wide-tracked title condense out of the mist one by one, and then a slow, volumetric fog settles into its drift between the reader and the essay. Text is always dark slate ink underneath; the fog is thick in the top and bottom of the window and thin in a reading band across the middle, so paragraphs come into legibility as they are scrolled to the centre and thin away again. Each of the five sections has its own weather: a light sea-fret for the vocabulary, a dense smoor for the foghorn, a near-total blanket for 1952, and a clear, sharp morning for the close. A fixed "Visibility" readout names the current conditions, the foghorn sends an amber ring through the fog every ninety seconds of story-time, and a "Lift the fog" control clears everything for anyone who simply wants to read. VISUAL TECHNIQUES - Full-viewport WebGL fragment shader above the content: three layers of domain-warped fbm value noise drifting at different speeds, premultiplied alpha, rendered at reduced resolution with dither grain - Vertical density profile with a noise-broken "reading band"; density and band width interpolate per section from data attributes - Clearing mask from an array of eighteen pointer/puff/focus points passed as uniforms, with noise-wobbled edges and a four-second decay - Amber lantern tint around the pointer and an exponential amber halo around the harbour lamp, both drawn in the fog itself - Foghorn ripple: an expanding ring that displaces the noise domain, thins the fog and reveals a DOM amber sound-ring beneath it - Scroll-coupled fog: partial parallax of the noise field and velocity-driven shear and stirring - Letter-by-letter blur-to-focus title entrance timed against a flat fog veil that thins over the first three seconds - Book typography: 34em serif column, real indents, three-line amber drop caps, small-caps first lines and cross-heads, hanging quotation marks, marginal notes that fall inline on phones - Very large italic pull quotes with a gradient mask so their lower halves sink into the fog - Hand-drawn inline SVG: chart fragment with soundings and depth contours, foghorn house in elevation with animated sound arcs, rooftops-and-masts skyline with parallax and density-linked opacity - Tide-and-fog calendar for October 1952 built as a CSS grid: cells shaded by hours of fog, amber bars for tidal range, the Blanket outlined - Fallback without WebGL: two drifting SVG-turbulence textures with a radial mask that follows the pointer and a CSS lantern glow - Web Audio foghorn: two detuned sawtooth oscillators plus a sub sine per note, low-pass filtered, slow attack and long release, over a filtered-noise sea wash with slow LFOs - Paper grain from an SVG noise texture; palette restricted to #E6E8E6, #BFC5C4, #26302F and #D98E04 INTERACTION MODEL Moving the pointer carries a lantern through the fog: a warm-edged clear patch follows it and the trail closes again over about four seconds. Clicking or tapping sends a puff that opens a much larger clearing for a moment. Scrolling moves the reader through five kinds of weather and stirs and shears the fog in proportion to scroll speed; the Visibility readout at the lower left reports the conditions. When the foghorn section (and the Blanket after it) is at the reading line, the horn sounds every nine seconds: the figure's arcs flare, a countdown in the caption runs in story-time, and an amber ring rolls out across the whole page, pushing the fog aside as it passes. The "Horn" button turns sound on (off by default), adding the two-tone horn and sea wash. "Lift the fog" withdraws the fog entirely and "Let it back in" returns it. Keyboard users can tab through paragraphs, each of which receives a focus lamp that clears the fog around it; pull quotes surface fully on hover or focus; calendar cells show their hours on hover. With reduced motion the fog is static and very light, the entrance is skipped and no rings are drawn.