How the vessel became the interface.

01 · Concept

Lock the argument before the look.

Three directions were tested: a kiln archive, tidal diffraction and a living lathed profile. The last one won because form and glaze are the actual subject, not an ornamental layer. DESIGN.md then locked the thesis, tokens, mobile composition, risk contract and observable runtime states before component work began.

02 · Geometry

One topology, three profiles.

The vessel starts as 56 two-dimensional radius and height points. Three formulas describe Calx, Pelagic and Verdigris. Three.js revolves those points with LatheGeometry; because every profile has the same topology, the runtime can interpolate each vertex without loading a model file.

radius = mix(profileA[row], profileB[row], progress)
vertex = [radius × sin(angle), height, radius × cos(angle)]

A physical material adds clearcoat, restrained transmission and thin-film iridescence. RoomEnvironment supplies texture-free reflections, so no licensed HDR file or heavy image download is needed.

03 · Progressive enhancement

The static frame is a design, not an apology.

The opening first paints an original SVG vessel and complete HTML. The polished SVG stays in place until the reader moves into or touches the chamber, or activates a material control. That intent gate avoids spending the first load on shader compilation while preserving the full 3D study on demand. Only a successful WebGL context sets data-webgl="ready"; otherwise the SVG stays visible. Reduced motion freezes a complete Calx state and removes automatic rotation. JavaScript-free navigation and all body descriptions remain available.

• data-material exposes the current body.
• aria-pressed keeps material controls understandable.
• Arrow keys move between the three native buttons.
• Pixel ratio is capped for mobile and desktop performance.

04 · Identity

Color behaves like ceramic chemistry.

Shell and limestone make the quiet field. Cobalt acts as the decisive structural color, oxidized copper marks the third body, and sea-glass becomes mineral light. Unbounded gives display type a tool-cut skeleton; Manrope handles specifications. Both variable fonts are self-hosted. Mobile gets its own 62svh chamber, title rhythm and full-width material rail instead of a squeezed desktop layout.

05 · Iteration

Three passes, three different questions.

1. Defect and mobile: inspect interaction, overlap, timing, console output and fallbacks at four widths.
2. Depth and tactility: build one material hypothesis, compare it in fresh renders and keep it only if the vessel becomes more convincing.
3. Cohesion and reduction: retune rhythm, remove competing decoration and confirm the signature remains singular.

The concrete findings and retained changes are published in the repository's ITERATION-PASSES.md.

06 · Release

Measure the real URL.

The release gate runs Astro type checks, Biome, Playwright, axe, evidence validation, repeated Lighthouse profiles, dependency audit, CSP and secret scans. Cloudflare Pages serves only the built dist directory. Live QA repeats route, fallback, header, cache and Lighthouse checks after deployment.

Every public-safe prompt used to frame the work is available on the prompts route and as matching Markdown files in prompts/.