Field guide to
winter glass

01 / Concept

A window pretending
to be a collection

The Frost Herbarium treats an ordinary winter pane as a nocturnal botanical archive. The emotional hinge is loss: visitors can make a warm, clear circle with a held press, briefly see the sodium streetlamp beyond, and then watch the aperture close. The supporting copy borrows the precision of specimen labels—temperatures, humidity, plate numbers, custodian times—while admitting that every “plant” disappears at sunrise.

The page avoids a conventional product layout. Its opening is a deep, asymmetric stage: typography crosses the jamb, the control console sits like an instrument on the sill, and the live glass occupies more visual weight than the title.

02 / Visual techniques

Physics made legible

Diffusion-limited growth

FrostGarden.growParticle() in main.js releases random walkers around several sill seeds. Each drifts across a compact integer lattice until neighbor() finds attached ice; temperature decides whether it sticks. paintPoint() records the bond on an offscreen canvas, so thousands of particles do not require repainting every branch each frame. growLeader() establishes tall crystalline trunks, then the same walkers roughen them into feathery fern, vertical spear, or dense sheet habits.

Breath and reclamation

paintCondensation() lays a milky cyan atmosphere behind the bonds. Pointer hold creates a breath record whose radius eases outward; in draw(), a feathered destination-out mask removes haze and frost so the streetlamp suddenly resolves. After release, the radius contracts while drawReclaimNeedles() adds inward strokes around its rim. A short tap calls addSeed(); keyboard users hold Space to thaw and press Enter to seed.

The second light

A tiny CSS-built attic sits behind the condensation at the pane’s warm centre. The Night Watch control calls revealWitness() to open a guided breath there. updateWitness() compares the aperture radius with the attic coordinates; at contact, one silhouetted neighbour raises an arm and the status ledger records the second light. The figure vanishes when the aperture closes, so discovery remains temporary rather than becoming another permanent decoration.

Depth, glass, and preserved plates

The lamp, distant windows, snowbank, sash, and wooden sill are layered CSS shapes beneath the transparent canvas. A glass sheen and vignette join them optically. Gallery plates use deterministic seeded branching in drawSpecimen(), giving each archived pane a stable silhouette without image files. IntersectionObserver reveals sections once, while the main animation halts when the document is hidden and motion preferences remove continuous effects.

03 / Palette & type

Cold field,
warm interruption

Cormorant supplies fragile, high-contrast display forms; Outfit keeps labels and controls clinical and readable. The dominant blue-black field makes frost luminous, while amber appears only where human warmth or the streetlamp interrupts winter.

04 / Reproduce this

Prompt the atmosphere,
not merely the widget