Paper, wobble, and no hurry.

Kiln Collective is a warm light-theme marketplace for a fictional ceramics co-op, built with Astro and exactly one photograph. Everything else — the vessels, the frames, the underlines, the maker's marks — is hand-drawn-style SVG that draws itself in as you scroll.

Terracotta and cream ceramic vessels arranged on linen in warm side light — the site's only photograph — THE ONLY RASTER IMAGE ON THE SITE · BATCH KC-041 · 3:2 · COMPRESSED JPEG

The idea

A ceramics co-op sells two things: objects with fingerprints in them, and the feeling of a room where nobody is in a rush. So the site is built around tactility and patience. The background is cream paper with real tooth, every border and underline wobbles like it was inked freehand, prices sit in a typewriter mono like a shop ledger, and motion runs on a slow "kiln ramp" curve — nothing snaps, everything settles. The marketplace patterns underneath are borrowed from shipped products (Etsy's maker-attributed product cards, Airbnb Experiences' matter-of-fact "3 spots left"), then dressed in the studio's own hand.

The stack — why Astro

Astro 5, zero client framework. A shop-front like this is content: six pieces, three classes, four makers. In Astro those live as typed arrays in frontmatter and render to plain HTML at build time — the shipped page carries one small script for reveals and counters, nothing else.
Components without a runtime. The vessel illustrations and maker's marks are .astro components — reusable at author time, free at run time. A growing catalog would graduate the piece data into Astro content collections without touching the templates.
Fraunces / Work Sans / DM Mono. Fraunces with its SOFT axis maxed and WONK on gives the display type a thrown-not-machined feel; Work Sans stays out of the way; DM Mono does the ledger work — prices, batch numbers, cone charts.

Signature technique #1 — paper you can almost feel

The grain is a single SVG feTurbulence tile, inlined as a data URI and fixed over the whole page with mix-blend-mode: multiply. No image request, no canvas, no animation loop — it's just noise math the browser rasterizes once:

.grain {
  position: fixed; inset: 0; pointer-events: none;
  opacity: .4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,\
    <svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'>\
      <filter id='p'>\
        <feTurbulence type='fractalNoise' baseFrequency='.55'\
                      numOctaves='2' seed='7' stitchTiles='stitch'/>\
        <feColorMatrix values='0 0 0 0 .29  0 0 0 0 .21\
                               0 0 0 0 .16  0 0 0 .14 0'/>\
      </filter>\
      <rect width='280' height='280' filter='url(%23p)'/>\
    </svg>");
}

The feColorMatrix tints the noise to warm umber and knocks its alpha down to 14%, so at 40% layer opacity the texture reads as paper tooth, not dirt. stitchTiles keeps the 280px tile seamless.

Signature technique #2 — linework that draws itself

Every vessel, frame, arrow and squiggle is a hand-written SVG path with deliberate asymmetry — curves that overshoot a little, like a loaded brush. Each visible stroke carries pathLength="1", which normalizes its length so CSS can animate the draw without JavaScript ever measuring anything:

<path pathLength="1" class="s" d="M83 40 Q100 33 117 41" …/>

.js .draw .s        { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .draw.is-in .s  { stroke-dashoffset: 0;
                      transition: stroke-dashoffset 1.5s var(--ease); }

One IntersectionObserver adds .is-in when a drawing scrolls into view and hands each stroke a 160ms stagger, so a moon jar appears rim → body → glaze line → speckles, the order a potter would make it. The easing is the site's signature cubic-bezier(.65,.05,.18,1) — a slow ramp and a gentle settle, like a firing schedule. With prefers-reduced-motion, the dashes are stripped entirely and every stroke arrives complete.

Details that matter

The wobble is CSS too. Buttons, badges and pills use the uneven-corner trick — border-radius: 255px 18px 225px 20px / 20px 225px 18px 255px — so even form controls look inked, not stamped.
Contrast did the seating chart. Terracotta on cream is only 3.4:1, so --clay is reserved for large display accents and linework; anything small gets --clay-deep (4.9:1), umber (6.1:1) or ink. Same split for sage.
Scarcity without alarm. Class cards show seats as little hand-drawn dots — filled means taken — and the sold-out state opens a waitlist instead of greying out.
Progressive enhancement. A .js class gates every reveal; without JavaScript the page renders complete, drawings included.

Ship it on GitHub Pages

Astro builds static HTML, so Pages can serve it straight from the repo — no Actions workflow needed. Two config lines do the work:

// astro.config.mjs
export default defineConfig({
  site: 'https://bswxyz.github.io',
  base: '/kiln-collective',   // project-site path prefix
  outDir: './docs',           // Pages serves main + /docs
});

Every internal link and asset goes through import.meta.env.BASE_URL so nothing 404s under the /kiln-collective/ prefix, a .nojekyll in public/ stops Pages from mangling the output, and deploying is:

npm run build                      # emits ./docs
git add -A && git commit -m "batch KC-041"
gh repo create bswxyz/kiln-collective --public --source . --push
gh api --method POST /repos/bswxyz/kiln-collective/pages \
  -f 'source[branch]=main' -f 'source[path]=/docs'

Kiln Collective is a design-showcase concept — the shop, classes, makers and numbers are fictional, and there's no cart or booking backend. The repository README maps exactly what a production version would need.

← Back to the studio