KILN is a fictional stoneware studio in Marshall, North Carolina. The page's single job: make you feel the wheel turning — so the centrepiece is a pot that is literally re-thrown in real time as you scroll.
Every design decision comes from the reduction kiln: a dark, oxygen-starved atmosphere (the near-black ground), iron pulled to the surface (tenmoku rust accents), and the pale slip of porcelain (the type color). The layout keeps the left column for words and gives the right half of the screen to the vessel, the way a potter's bench keeps tools left, wheel right.
All five are glaze chemistry: slip, celadon and tenmoku are real cone-10 glazes; the ground is the inside of a cooling kiln.
Instrument Serif — display. High-contrast strokes echo the profile lines a rib tool leaves in wet clay. Italic reserved for the words that carry heat.
Karla 300 — body. Quiet, wide-set, lets the serif speak.
Azeret Mono — data voice: catalog numbers, firing schedules, chemistry.
| Element | How it works |
|---|---|
| Morphing vessel | A custom BufferGeometry lathe (96 radial × 72 ring segments). Four pot silhouettes are stored as control-point profiles, sampled through a Catmull-Rom spline into radius tables. Each frame lerps between adjacent tables with a smoothstep ease, recomputes normals, and tints the MeshStandardMaterial toward the next glaze color. Scroll position drives the morph via GSAP ScrollTrigger scrub. |
| Studio lighting | Three directional lights: warm key (window light), celadon rim, and a faint tenmoku underglow — the glow of a spy-hole. |
| Firing curve | The real 31-hour cone-10 reduction schedule plotted as SVG. The trace draws itself with stroke-dasharray scrubbing; a live readout inverts the path's Y back into °C. The rust band marks the body-reduction window. |
| Grain | A fixed SVG feTurbulence overlay at 4% alpha — tooth of unglazed clay. |
| Accessibility | prefers-reduced-motion swaps scroll-scrubbing for an IntersectionObserver that snaps the vessel to each form; the firing curve renders complete. Focus rings in celadon. |
| You do | The page does |
|---|---|
| Scroll the Forms section | The pot is re-thrown — moon jar → bottle → tea bowl → amphora — glaze shifting with it |
| Scroll the Fire section | The kiln trace draws toward 1,305 °C with a live temperature readout |
| Reach the footer | The wheel fades out and lets the words close the room |