The concept
Moon Jar Kiln treats the browser as a working hanok room, not a museum label. A Korean moon jar exceeds what one pull of clay can comfortably hold, so its maker throws two hemispheres and joins them at the equator. Moisture, pressure, and gravity make the bowls disagree. The surviving seam is not decoration; it is evidence of the vessel’s construction.
That fact organizes the whole page. Porcelain fields leave breathing room around dense acts of making. Celadon enters as a mineral atmosphere, walnut arrives with the firing room, and a narrow iron-amber line keeps returning wherever one state meets another. The opening jar sits off axis and the title crosses its field: balance is pursued, but mechanical centering is refused.
The visual technique
The signature workshop is painted by drawWheel() in main.js. baseProfileRadius() describes the broad foot, belly, shoulder, and lip. On top of it sits a 33-point surfaceOffsets field. shapeFromPointer() converts hand distance into a local radius and spreads pressure to neighboring points with a Gaussian falloff. This lets a hand pull one precise height rather than merely choosing among three presets.
evaluateWall() turns excessive outward pull into thinning, then accumulates a real slump that shortens and leans the upper wall. setStage() moves from wet porcelain to two visibly separated bowl edges, then into a dark kiln chamber. updateAnimation() climbs to 1,300°C, holds at cone 10, and cools while the glaze shifts from grey clay through incandescence into celadon, iron blush, and a gesture-derived warp. The requestAnimationFrame loop pauses when the document is hidden; reduced-motion visitors receive an immediate finished state.
CSS supplies the remaining material logic: layered gradients suggest hanji fiber, celadon depth, kiln brick, and walnut grain without image requests. The seam essay magnifies two clipped hemispheres around a labeled join. setupSeamWitness() turns that equator into a pointer and keyboard slider: its loupe follows a CSS custom property while five kiln observations translate position into ash depth, bowl memory, and iron bloom. Native <details> elements make the chemistry drawer keyboard-accessible. makeJarSVG() gives every shelf vessel its own silhouette, glaze gradient, firing note, and reusable profile.
Palette and type
Jost at light weights gives the display voice measured geometry; its tight negative tracking makes headlines feel drawn as continuous contours. Epilogue carries longer notes with firmer rhythm and more open line spacing. Zen Kaku Gothic New supports Korean labels and the maker’s maxim. Porcelain is the dominant field, celadon is atmospheric, iron ink does the reading work, and amber is reserved for heat, joins, and active states.
Reproduce this
Prompt an AI agent to build a code-native editorial workshop around a craft whose imperfection has structural meaning. Name the material, the physical process, and the trace the interface must preserve. Ask for one real Canvas interaction with a complete pressure-to-consequence cycle, plus an accessible control alternative. Require locally hosted type, a material-derived palette, asymmetric composition, deterministic visitor artifacts, semantic controls, hidden-tab pausing, reduced-motion behavior, and screenshot review at 390, 834, and 1440 pixels. The useful phrase is: “Do not simulate the appearance alone; translate the craft’s constraint into the interaction.”