TITLE Pluvia & Sons — Umbrella Makers PROMPT A landing page for an invented umbrella maker, "Pluvia & Sons, est. 1871", in the rainy invented city of "Garrow". It is raining on the page: real simulated rain falls across the whole viewport, over the text and pictures; and the viewer's cursor is an open umbrella. Rain hits the umbrella's canopy, runs off its edge in beads, and the area beneath stays dry; text sheltered by it becomes crisp and readable in full contrast while the rest of the page is seen through streaks. Concept: the product demonstrated by the interface itself. Mood: wet-pavement melancholy with dry wit and one bright colour. Palette: rain grey #8E9AA3 as the page ground (overcast sky colour-field), wet slate #2C3338 for text and illustration, canary yellow #FFD400 as the single accent (the umbrella, key words, buttons), and dry white #F2F2EE for paper panels and highlights. Grey colour-field page, neither dark nor white. Rain system (full-viewport canvas above the content, pointer-events none): 400–900 drops depending on viewport, drawn as short slanted streaks with slight wind sway and depth layers (thin fast far drops, thicker slow near ones); drops that reach the "ground" of each content block's top edge or the bottom of the viewport make tiny splash crowns (two or three pixels arcing up) and ripple rings; drops that hit the umbrella canopy (an arc collision test against the canopy's upper curve) burst into small droplets that slide down along the canopy curve to the rib tips and drip from the eight points in a steady beaded fall, so a visible dry cone exists beneath. The intensity cycles slowly between drizzle and downpour, with a rare gust that slants everything. The umbrella cursor: a custom drawn yellow umbrella (top-quarter view: scalloped canopy with eight panels and ribs, a ferrule, a slim shaft and a curved malacca handle) that follows the pointer with a slight springy lag and tilts into its direction of travel; on touch devices it follows the finger and, when not touching, rests where last placed (and drifts slowly on its own tour of the page until first touch). Clicking (or, on touch, tapping the umbrella itself; a tap elsewhere moves it there) closes and reopens it with a snappy two-stage animation (ribs folding): while it is closed, everything gets rained on. Under the umbrella, a circular "dry" region (CSS mask or clip tracked to the pointer) reveals the dry version of the page: text at full contrast, illustrations in yellow and white; outside it, the wet version: text slightly blurred/greyed with running-water distortion (a subtle SVG displacement filter or layered streak overlay), so the viewer naturally reads the page by sheltering it. The page remains fully legible and usable without the effect (contrast outside the dry circle still passes readability; a "Come inside" toggle, fixed at the top right, stops the rain entirely and puts the umbrella away for those who prefer; a small live readout in the hero names the grade of rain currently falling). Content: 1) Hero: giant headline in a tight condensed grotesk, slate on grey: "IT IS RAINING IN GARROW." second line in yellow: "It usually is." Sub-line: "Pluvia & Sons have kept the city dry, one head at a time, since 1871." A row of pedestrians with umbrellas (SVG silhouettes) walks across the horizon line, one of them yellow. 2) "The Garrow No. 4": the flagship umbrella shown as an exploded technical illustration (canopy, eight ribs of solid carbon steel, stretchers, runner, shaft of a single piece of ash, handle) with numbered callouts and specifics: 61 cm ribs, 420 g, canopy woven at 190 threads per inch, "tested in a car wash on Finch Street". 3) "A Short Catalogue of Rain": the house's eleven grades of rain as a typographic list, each with a one-line verdict on whether an umbrella helps and a tiny canvas vignette of that rain (a still frame at rest, looping when hovered, focused or tapped): mizzle, smirr, a steady soak, stair-rods, sideways, "the kind that gets in at the cuffs". 4) Repairs: "We mend what we make, and several things we did not" with prices in a plain ruled table and a lifetime re-covering promise. 5) The shop: address at 14 Tolhouse Arcade, opening hours ("closed on dry days, i.e. the 3rd of August"), a note from the fifth-generation maker Odalys Pluvia. Footer: puddle at the bottom of the page in which the footer text is reflected upside-down and rippled when drops land. Signature moment: bringing the umbrella over the hero headline for the first time: the rain audibly (if sound is on) and visibly drums on the canopy, beads race off the points, and the words beneath sharpen and dry. Typography: headline in Impact/"Arial Narrow"/"Helvetica Neue Condensed" bold caps; body in a sturdy serif (Georgia) at comfortable size; labels in tracked small caps; prices in tabular figures. Optional sound toggle (off by default; drawn as a small cloud that rains): steady rain from filtered noise plus a distinct patter that rises when drops hit the umbrella. Reduced motion: light static drizzle texture, no splashes, no cursor lag; the dry-circle reveal remains. Performance: single canvas, typed arrays, DPR capped at 2, pause when hidden. DESCRIPTION A grey, overcast landing page for a fifth-generation umbrella maker on which it is actually raining: several hundred simulated drops fall in three depth layers across the whole viewport, splash on the top edges of the paper panels and the pavement, and blur and drain the colour from everything they fall on. The viewer holds the only bright thing on the page, a canary-yellow umbrella drawn in quarter view, which replaces the cursor. Rain bursts on its canopy, beads slide down the panels to the rib tips and fall in a steady drip, and beneath it a soft circle of the page is dry: sharp, full-contrast, and in colour. Reading the page means sheltering it. The copy is dry in the other sense: a headline that says it is raining in Garrow and usually is, an exploded drawing of the Garrow No. 4 that assembles itself when scrolled into view, a house catalogue of eleven grades of rain, a ruled price list for repairs, the shop's hours ("closed on dry days, i.e. the 3rd of August"), a note from Odalys Pluvia, and a footer wordmark standing at the edge of a puddle that reflects it upside-down and ripples when drops land. VISUAL TECHNIQUES - Single full-viewport 2D canvas rain simulation on typed arrays: three depth layers of slanted streaks, wind sway, slow drizzle-to-downpour intensity cycle and occasional gusts - Arc collision of every drop against the umbrella's tilted canopy curve, spawning beads that travel along quadratic paths to the eight rib tips, which accumulate water and release it as falling drips - Splash crowns and perspective ripple rings where drops meet panel edges, the pavement line, the viewport floor and the footer puddle - Procedurally drawn umbrella (scalloped eight-panel canopy, ribs, ferrule, shaft, crook handle) with spring-lagged motion, velocity tilt and a parametric two-stage fold and pop-open - Wet/dry page split: a fixed backdrop-filter veil (blur, desaturation, lowered contrast) with canvas-generated running-water streak textures, pierced by a radial CSS mask tracked to the umbrella - Inline SVG exploded technical drawing with numbered callouts whose parts spring apart from the assembled position on entering view - Eleven small canvas vignettes, each a parametric rain pattern with a tiny yellow umbrella coping with it - SVG silhouette pedestrians with swinging legs and wet-pavement reflections walking past a tiled skyline, one umbrella yellow - Footer wordmark mirrored into a puddle through an animated feTurbulence and feDisplacementMap filter whose strength jumps when drops land - Fitted condensed grotesk headline type, tracked small-caps labels, Georgia body, tabular price figures; four-colour palette of rain grey, wet slate, canary yellow and dry white - Web Audio rain bed from filtered noise with a canopy patter that follows the measured hit rate INTERACTION MODEL The pointer is the umbrella: it follows the mouse with a springy lag and leans into its direction of travel, and until the viewer first moves it drifts on its own slow tour across the headline. Whatever lies under it is revealed dry, crisp and in colour, while rain drums on the canopy and drips from the rib tips. Clicking anywhere that is not a control folds the umbrella in two stages and lets the rain fall on everything; clicking again pops it open with a shake of droplets. On touch screens the umbrella follows a dragging finger, stays where it was left, moves to a tap, and closes or opens when tapped itself. Hovering, focusing or tapping a grade in the catalogue plays its rain vignette; hovering a part in the No. 4 list highlights it in the drawing and vice versa. Two fixed controls sit at the top right: a small cloud that turns the sound of the rain on and off (off by default), and "Come inside", which stops the rain, lifts the wet veil and restores the ordinary cursor. With reduced motion the rain becomes a light static drizzle, splashes and cursor lag are removed, and the dry circle still follows the pointer.