Free pottery studio website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: fettle.md, data: fettle.json

Pottery studio website template: first screen on a phone

About this pottery studio website template

Pottery studio website template: one free HTML file for a studio that makes tableware to order, teaches classes and sells a few pieces. It holds commissions, a six-step process, four glazes, class prices, makers, a membership and a shop, in pale grey with huge type and visible grid lines. AGENTS.md lets an AI agent adapt it.

At a glance, October 2026. One 95 KB index.html with its CSS and JavaScript inside, 12 sections, 30 Unsplash photos credited in CREDITS.md, TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

A pottery studio website template for Claude Code, Cursor or Codex suits a studio with several income streams: tableware made to order for restaurants, evening classes, an open studio membership and a shelf of one-off pieces. Anyone comparing a ceramics website template or ceramic website templates will find the sections carry over to a candle, glass, weaving or woodwork workshop that teaches. The prices, venues and makers shown are invented.

If you vibe code the site, it goes fastest when you give the agent the facts only the studio has: class days and prices, commission minimums and lead times, firing temperatures, glaze safety claims, membership terms, makers, address and hours. The agent should replace the name in every letter case, then write the character count of each glaze name and of the footer wordmark into its --len. A glaze is recoloured on its own row. It must not invent food-safe or dishwasher claims.

Choose it when classes, commissions and a few pieces share one page. If the shop is most of your income, a shop-led one-page site fits better. A studio that needs a basket, a booking calendar or many pages needs more than this file: Book links go to the form and the six shop pieces use email links. The weak spot is the long sideways process row, which can feel slow on a phone. For no code, 8B has a builder.

Good for:

Pottery or ceramics studioCraft workshop with classes (candles, glass, weaving, woodwork)Maker that sells made-to-order work to restaurants and shopsAny small studio that wants a pale, grid-led look with one strong hero photo

Turn the pottery studio website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/pottery-studio-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/pottery-studio-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/pottery-studio-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/pottery-studio-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my studio: what we make, classes with days and prices, commission terms, glazes, makers, membership, shop pieces, address and hours>. Replace first the studio name, the Sheffield address, the three client venues, the prices and the makers. Keep the classes AGENTS.md lists and the five grid lines, and set --len on each glaze name and the footer wordmark to its new length. Ask me for missing facts and never invent prices, firing details, food-safety claims or contacts.

In a terminal

npx degit 8bsite/pottery-studio-website-template my-site

Pottery studio website design prompt for any AI tool

Use this to build a pottery studio site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design down as decisions; with the template files themselves, the short prompt above is enough.

Build a one-page website for a pottery studio that makes tableware to order for restaurants, teaches classes and sells a few pieces. Audience: chefs, cafe owners and locals booking an evening class. Sections in order: navigation, opening with a full-screen photo, commissions, a six-step process, four glazes, classes with prices, makers, membership, shop, questions, contact form, footer. Type: TikTok Sans only, a variable font; headings at weight 720 to 780 and the widest width, tight tracking, sentence case; body 16px at weight 400. Colours: #f1f2f2 page ground, #0f0f10 text and black buttons, #ffffff cards, #656869 captions, #1d42cf cobalt for plus marks and hover fills, glaze grounds #b9361a, #a9c4b7 and #2a1c15. Layout: four columns with five visible hairlines over the whole page, huge tight headings, text blocks starting on column three, square photo corners, pill buttons only. No shadows, no purple gradient, no three icon cards, no centered hero with two buttons. Motion: one idea, the section ground turns to each glaze colour as its row reaches mid-screen; the six steps slide sideways while pinned. Respect prefers-reduced-motion by stacking everything. Copy: short and concrete. Ask me for class days and prices, commission minimums, address and hours; never invent prices, firing details or food-safe claims; leave marked placeholders. One primary action, Book a class, repeated in every class row and the bar. Mobile: check 390px, tap targets 44px, a full-screen menu. Done when: no console errors, keyboard focus visible, every placeholder listed.

Pottery studio website design and motion

Palette

#f1f2f2 page ground, nav bar, about screen, the glazes section before the first glaze#0f0f10 text, black buttons, hairlines, footer and phone menu ground, ink on the celadon glaze#ffffff venue cards and shop photo frames, button labels, footer text, ink on the cobalt, iron red and tenmoku glazes#656869 captions and small descriptions#1d42cf plus marks, button hover fill, form status line, the cobalt glaze ground#b9361a second plus mark colour, the iron red glaze ground#a9c4b7 the celadon glaze ground, used only there#2a1c15 the tenmoku glaze ground, the commissions section ground behind its photos, loading colour of photo frames

Fonts

TikTok Sans: the only typeface, a variable font from 400 to 800 weight and 100 to 112 percent width: headings at weight 720 to 780 and 112 percent width with tight tracking, body text at 400, small labels in 12px uppercase semibold, buttons at 14px semibold

Four columns with five hairlines fixed over the whole page, which the opening photo and the contact heading follow. Headings are huge, tight, wide-set sans type, mostly in sentence case; the logo and the footer wordmark are lowercase. Text blocks often start on column three, with full-bleed photo backdrops, a horizontal row of steps, class rows with price and Book link, and white venue cards. Photos and cards have square corners, buttons are pills.

The ground colour is the signature: the glazes section turns cobalt, iron red, celadon green and tenmoku brown as each glaze row reaches mid-screen. Cobalt and iron red plus marks turn into place, and the opening photo drifts sideways. Colours and fonts are stored as agent-readable tokens.

Every value of this pottery studio website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the pottery studio website page

Navigation
A bar with three plus-marked links around a lowercase logo and a Contact us pill (a menu button on phones); a full-screen menu with seven links
The bar slides away on a scroll down past 140px and returns on a scroll up; on phones a menu button opens a full-screen overlay of seven links.
Pottery Studio
A photo band under a huge heading that rises into a full-screen photo in four strips, then an about screen with a statement and two big links
On load the heading lines and photo rise in and the photo drifts sideways in a loop; on scroll the page holds while the photo splits into four strips along the grid lines, each rising to fill the screen, then the about screen slides over and its statement darkens word by word.
Where clay meets the table
Three venue cards (restaurant, cafe, hotel) whose rooms open full screen behind them
A restaurant photo stays fixed behind the text and two more photos open full screen from the cafe and hotel cards as those cards scroll up.
Mud to table in six steps
Six steps in a horizontal row (wedge, throw, trim, bisque, glaze, fire) with a rule that fills
Pinned: the six steps slide sideways while a rule below fills, and each step photo grows from 72 percent to full size as it arrives.
Four glazes, mixed in the back room
Four glaze rows whose names are huge; the section's ground and text colour turn into each glaze as its row reaches the middle
The section's ground and text colour blend into each glaze's colours as its row crosses the middle of the screen.
Classes for any pair of hands
A photo and four class rows with when, how long, price and a Book link
The heading, intro and each class row rise into view once, and the plus marks turn into place as you scroll.
Three pairs of hands
Three potters as portraits that deal out of a fanned stack
The three portraits start fanned in one stack and deal out to their places, then the names and notes fade in.
Open studio membership
A photo of studio shelves and the open studio offer with price and five benefits
The heading, price and five benefits rise into view once, and their plus marks turn into place.
From the shelf
Six one-off pieces with prices and Reserve links; photos turn from pale bisque to colour as they cross the middle
Each photo starts under a pale grey, washed-out layer that wipes away as the photo crosses the middle of the screen.
Questions
Six questions as native <details>
Each question rises into view once; opening one turns its plus into a cross.
Come by the studio
Address, hours, email, phone and a message form under a heading whose words gather into a line
The four words of the heading slide in from their grid columns and settle into one line.
Footer
A huge lowercase wordmark, address and hours, page links and follow links

Before you publish the pottery studio website site

Replace social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a class button in the first screen lead to #classes now; point them to your class booking page or calendar, or keep it on the classes list.
Book links on the four class rows lead to #contact now; point them to a booking link for each class (a booking tool or a form with the class chosen), or keep them on the contact form.
Start a commission button in the commissions section lead to #contact now; point them to your commission enquiry form or email.
Join the waiting list button in the membership section lead to #contact now; point them to your waiting list form or email.
Reserve links under the six shop pieces lead to a mailto: link with the piece named in the subject now; point them to your shop or payment link for each piece, or keep the email reservation.
Send message button of the contact form lead to a script checks the fields and shows a thank-you line; nothing is sent (the form has action="#contact") now; point them to a form service (Formspree, Netlify Forms) or your own handler, or remove the form and keep the email and phone.
Instagram and Newsletter links in the footer lead to the Instagram homepage and a mailto: link now; point them to your Instagram profile and your newsletter sign-up page.
The process section is pinned and moves sideways by the width of the six-step track minus one screen, about 1,200 px of scrolling at 1440 px and about 1,350 px on a 375 px phone (each step is 76vw there), which some visitors find tiring.
The shop's pale bisque overlay and the glaze colour blend need JavaScript; without it (and with reduced motion) the shop photos show in colour from the start and each glaze row keeps its own colour band.
The Make and Learn links in the about screen and the glaze names are set very large; keep them short. The glaze names and the footer wordmark shrink to fit by --len, Make and Learn do not.
gsap, ScrollTrigger, SplitText and Lenis load from jsDelivr at the end of the body; if the CDN is blocked the page shows its still layout (steps in a grid, glaze rows as colour bands) while the menu and form scripts keep working.

Questions about this pottery studio website template

Can I use this pottery studio website for clients, and is it free?

Yes. Among ceramics templates free to use, this is a single index.html under the MIT license, so it can ship on client sites at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, with no build step, no CMS. The photos are Unsplash images, listed with the font in CREDITS.md. The studio's whole site lives on that one page.

Where does the contact form send messages?

Nowhere yet. The form checks for a name, a valid email and a message, shows a thank-you line promising a reply within two working days, and clears itself. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or remove the form and keep the email and phone. Edit that promise too.

How do I hand it to Claude Code, Cursor or Codex?

Download index.html and AGENTS.md into an empty folder with the curl lines, then tell the agent to read AGENTS.md before editing. In Codex, the command line tool reads AGENTS.md without being told. Give it files, not the page address. To start from scratch instead, paste the pottery studio website design prompt below into Lovable, v0 or Bolt.

Which parts break if I change them?

Keep every id and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists for each animation. The five grid lines must stay, and each glaze row needs its own --gl-ground and --gl-ink. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a site like this without editing code?

Not this exact file, but yes for a site. 8B's AI website builder designs a new site, with its own design, from a sentence about your studio. Designing and restyling are free. Publishing with hosting, HTML export and AI edits in chat are on Pro at $9 a month billed yearly, and it also runs inside Claude and ChatGPT.

What happens on a phone, with reduced motion or with scripts off?

On a phone the process row still slides sideways and the bar shrinks to the logo and a menu button. With reduced motion on, entrance and scroll animations and smooth scrolling are off: steps stack in a grid and glaze rows stay colour bands, while button fills still react to hover. Without JavaScript the menu cannot open.

Not a pottery studio website? More free templates