A workshop, not a showroom
The concept begins with one instruction heard constantly in a hot shop: keep it moving. Glass is never a static ornament while it is hot, so the composition avoids polite symmetry. The hero pipe crosses the furnace mouth, oversized type leans into the dark, and thin steel lines interrupt broad fields of soot. Content is written as an active studio log—temperatures, batch numbers, timings, and terse safety rules—so the room feels inhabited rather than themed.
Light is the primary architecture. Multiple radial and repeating-conic gradients build the glory hole from a white center through amber, iron red, brick joints, and black refractory. A low-opacity turbulence data URI in styles.css adds soot grain. The one orchestrated load moment combines loadReveal with lightSweep; continuous motion is reserved for heat and the playable material.
The gather has a memory
The interactive gather is a layered CSS object, not canvas. Its size, sag, axis, and neck are controlled by the custom properties --volume, --sag, --straighten, and --neck. The tick() loop in main.js cools the glass, waits 1.35 seconds, then lets gravity lengthen and lower the form. Holding the blow control increases volume while HSL stops cool from white-hot yellow through orange to cherry. At extreme volume, fail() draws a fracture seam, plays a tiny generated noise crack, and preserves a clear restart path.
Tools that change the form
marverButton subtracts sag and corrects the pipe axis; jackButton increases neck definition only after a viable bubble exists. renderVisuals() updates only the shape variables, while renderReadouts() throttles text and meter updates. Pointer and keyboard input share the same blow functions. The bounded animation loop begins when the bench enters view and pauses whenever the document is hidden.
Cold glass, drawn in code
The three archive pieces are inline SVG. Each silhouette is a hand-tuned path filled with translucent aqua, smoke, or silver-amber gradients. Blurred highlight strokes suggest thick cased glass; dark ellipses and CSS drop shadows seat each vessel on its shelf. The cold-light inspection is a second, quieter interaction: positionInspectionLight() maps pointer position to --light-x and --light-y, while selectVessel() makes each piece keyboard- and tap-selectable and swaps its maker, wall, pontil, and process record.
The annealing curve is another SVG. An IntersectionObserver adds is-drawn when kiln K-03 enters view; drawCurve resolves the line’s dash offset before the translucent temperature field and inspection points appear. Reduced-motion mode presents the complete chart immediately.
Palette & type tokens
Syne is the display face: compact, blunt, and slightly mechanical at heavy weights. Epilogue handles body copy, measurements, and control labels. Both are self-hosted. The palette keeps roughly three quarters of the page in soot and near-black, reserving amber for heat and aqua for finished, annealed material. Cream text stays warm enough to belong in the workshop.
Reproduce this
Prompt an AI agent to build a no-image hot-glass studio in pure HTML, CSS, and JavaScript. Ask for one physically legible interaction driven by CSS variables: a radial-gradient gather that inflates, cools, sags under idle gravity, can be straightened and necked with tools, and safely overblows. Specify a soot-dominant palette, furnace-white focal light, Syne display type, Epilogue body text, inline-SVG finished vessels, an annealing chart, reduced-motion support, and responsive testing at phone, tablet, and desktop widths.