Discover the Virtual Hot Shop: Crafting Glass with Constant Motion
Imagine a digital space that immerses you in the rhythm of a real hot-glass studio, where molten forms are shaped through continuous movement and precise control. This AI-built web experience transforms a browser into a living, breathing workshop, highlighting the core principle of keeping the hot glass in perpetual motion. The signature technique? A dynamic CSS-driven gather that inflates, cools, and sags, mimicking the physical flow of molten glass without a single image asset. It’s an interactive tribute to the art of glassmaking, presented entirely through code that captures the essence of a fiery studio environment.
Design Foundations: Palette, Typography, and Signature Interaction
The visual language centers around a soot-dominant palette, with deep blacks and browns forming the backdrop, accented by warm amber hues to signify heat and finished glass in tranquil aqua. The typography employs a condensed, mechanical typeface reminiscent of industrial signage, lending a tactile feel to the digital interface. The core interaction—a CSS-variable-controlled gather—serves as the site’s signature move, enabling users to observe the glass form inflate, sag, straighten, and neck through intuitive controls. This layer of interaction is built with layered CSS objects that respond to user input, modulating shape and temperature effects seamlessly, thereby embodying the workshop’s relentless movement. The entire design eschews static images in favor of inline SVGs representing vessels, each rendered with translucent fills and subtle shadows, evoking the thickness and transparency of real glass. An annealing curve SVG visually maps the cooling process, adding depth and educational value, while reduced-motion mode ensures accessibility without sacrificing the core experience. Responsive testing across devices ensures the workshop’s vitality remains intact whether viewed on a phone, tablet, or desktop.
The Three-Step Creative Pipeline
This project follows a straightforward yet rigorous process: first, constructing the initial prototype with pure HTML, CSS, and JavaScript that embodies the interactive gather and visual motifs. Next, subjecting the work to a relentless critique—examining how well the motion mimics a hot shop, and refining the shape-shifting interactions for clarity and engagement. Finally, the piece is art-directed, ensuring the aesthetic coherence, responsiveness, and accessibility meet a high standard. This guide was instrumental in shaping the approach, emphasizing the importance of active studio narratives and kinetic visualizations that keep the viewer engaged with the craft’s continual flow.
The full build notes live in the room’s design guide.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 69 of 175, “glassworks”):
FURNACE & CANE — a hot-shop glass studio. Aesthetic: dark workshop lit by the glory hole. Palette: workshop soot #17130f, furnace orange-white glow, molten amber #ff9d3d, annealed aquas and ambers for finished pieces. Fonts: syne (display), epilogue (body). SIGNATURE: GATHER AND BLOW — a glowing gather on the pipe (radial-gradient orb with heat shimmer and slow gravity sag; it droops if you idle) that you shape: HOLD to blow (it inflates with wall-thickness thinning, glow cooling from white to orange to cherry), roll on the marver to straighten, jack a neckline; release too late and it overblows (gentle crack + start again). Finished-pieces shelf (SVG vessels with cased-color gradients), the annealing curve chart, studio rules (“the pipe is always hot”). Unforgettable: the sag when you hesitate.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/glassworks/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
Explore the Digital Hot Shop
Visit the live AI-built exhibition to experience the continuously moving glass studio firsthand. Dive into the full collection of 175 innovative sites at the hub and see how AI can faithfully recreate the tactile energy of traditional craft spaces through pure code.
Visit the live room → · Browse all 175 rooms
Previously in Wing III
- Room 66: The Comb Works — Bees, decoded
- Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
- Room 68: The Belfry | Eight Bells, Endless Changes
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
hot glass studio glassblowing kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
