Kiln

Kiln is a site for a potter or a ceramics studio: makers who sell one-off pieces, teach wheel classes and take commissions, and other craft studios with a shop and classes. It is set edge to edge on a ground of pale clay with a fine grain, iron speckles and the faint throwing rings of a wheel head, in fired clay, celadon and ash glaze, with a high-contrast serif for headings. On the home page a pot is thrown as you scroll: a lump of clay wobbles and settles on the wheel, is opened, pulled up into a cylinder, swells into a jug and narrows into a vase, is trimmed, dipped in glaze, fired in the kiln until it glows orange, and cools to its speckled glaze. The demo is a fictional studio, Fernhollow Pottery.

Kiln comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Shop (delivery notes, texts after paying)	Pages → Shop page
Classes (booking, gift vouchers, questions)	Pages → Classes page
Commissions (photo, packages, how a commission works, deposits, questions)	Pages → Commissions page
Visit (opening hours, open studio days, map, getting here, contact form, questions)	Pages → Visit page
Journal, 404	Pages → the page’s own entry
Pieces (kind, price, size, clay, glaze, firing, care, photo, sold, story)	Content → Pieces
Classes (price, length, group, when, level, what you make, what’s included, questions, photo)	Content → Classes
Journal posts (one can be for members only)	Content → Journal
Name, phone, address, navigation, header button, profiles, small print	Pages → Site settings
Buttons, labels, chat, emails, game texts	Content → Interface texts
Privacy, terms, delivery and returns	Pages → Legal

In headlines, words wrapped in *stars* get a stroke of celadon slip trailed under them, as in “Pots made slowly, *by hand*”.

The pot on the home page

The opening (Home page → Opening) has a headline, two buttons and seven step names in the order the pot is made: centre, open, pull, shape, trim, glaze, fire. They light up one by one as the pot is made. Rename them in your own words, but keep seven. The drawing itself, its seven shapes and the script of the scroll live in src/components/sections/Throw.astro. Browsers without scroll-driven animations, and visitors who prefer reduced motion, see the finished pot in the kiln and the page doesn’t pin.

The shop

Every piece is one of one: a 4:5 photo (one on a plain plinth looks best), what it is, the price, size, clay, glaze, firing, when it was made, how to look after it and its story. Pieces for sale come first. When one sells, tick Sold: it stays in the shop, marked and without a buy button, so visitors see what else came out of the kiln. Each piece takes payment with its own one-time Price id (Stripe or Lemon Squeezy); without one, the button explains that online payments aren’t on yet.

Classes, booking and vouchers

Each class has its own page with a booking button and a gift voucher link. The classes page holds the Cal.com booking (a preview of the calendar until you connect it) and up to a few gift vouchers, each with a one-time Price id.

Commissions

Up to four packages (mark one as the most asked-for, shown in fired clay), how a commission works as steps on a band of test tiles (three to six), deposits paid online, and questions.

The map

The visit page and the home page show a map of the lanes round the studio, drawn from OpenStreetMap in your colors, with a pin, the address and directions links. It is part of the page (no embed, no cookies) and follows the theme and your accent. To draw your own, put the studio’s coordinates in map.config.json and run pnpm map -- fetch. No street names are shown.

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Buy a piece	A piece’s page (a one-time Price id each)	Stripe or Lemon Squeezy
Book a class	Classes page, loads on click; a preview of the calendar until connected	Cal.com
Gift vouchers, commission deposits	Classes and Commissions pages	Stripe or Lemon Squeezy
Studio news by email	Home and journal pages, with a welcome email	Supabase or Mailchimp
Contact form	Visit page; messages go to the email in Site settings	Resend
Members-only journal posts	Journal	Clerk
AI chat	Every page, answers about pieces (and which are sold), classes, commissions and visiting	Claude or OpenAI
Search	⌘K or the search button: pieces, classes, journal, commissions, visit	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, PostHog, Google Analytics
Photos	Production builds, when set	Cloudinary

Sections

The home page is built from these sections, in any order: Opening (the pot), From the shop (pieces on a shelf), Classes, Commissions (a photo and points), Numbers (beside witness cones that bend as they scroll in, like the cones in a firing), Visit (the map and the next open studio days), Journal, Studio news by email and Closing call (a band of ash glaze with a dipped edge).

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (fired clay: buttons, marks, links, the rust where the glaze breaks on the pot), the second (celadon: fills, the slip under marked words, the pot’s glaze) and the third (ash glaze). Buttons are darkened until their porcelain text is readable, the second and third lightened until ink text on them is; a color that can’t get there stops the build with a message. Brand also sets the fonts and the corners (“thrown”: rounded and a little uneven, or evenly soft). The site opens in the day theme even when the visitor’s system is dark; the toggle switches to the night, tenmoku, and the browser remembers the choice.

Languages

Kiln is ready for more languages: see Languages.

The 404 page

A small game, Glaze test: a fired test tile shows a glaze; mix the same one by adding spoonfuls of three oxides to a bucket of base glaze (the buttons or keys 1–3, Backspace washes it out), then fire it (the button or Enter). The bucket shows the glaze raw, pale and chalky, so you judge how it fires. The fired tile then sits beside the target and scores up to 100 by how close the colours are. Five tiles; the oxides are your brand’s three colours, and the best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, pieces, classes and posts for AI assistants, in every language.
• Pages carry JSON-LD: the studio as a Store with its opening hours and packages, pieces as Products with their price and availability, classes as Courses, open studio days as Events, how a commission works as a HowTo, questions as a FAQPage, and each post as a BlogPosting.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm map -- fetch            # draw the map round map.config.json from OpenStreetMap
pnpm cms sanity schema|seed  # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).