{
 "slug": "inset",
 "name": "Inset",
 "title": "Free ceramic tile website template",
 "description": "Free HTML ceramic tile website template with a live tile designer, glaze wall and trade specs. AGENTS.md for Claude Code, or no code with 8B.",
 "kind": "One-page website for a tile maker or ceramics studio that sells custom glazed tiles to homes, cafes and trade",
 "summary": "A one-page site for a tile studio: thirteen glazes, four floor patterns, a tile designer with a live price, how a tile is made, six installed projects, a sample box, trade specs for three sizes, a FAQ and a studio contact form. A field of square tiles in saturated colours on white and navy, sorted into one giant frame on the first scroll.",
 "fits": [
  "tile maker, ceramics studio or tile showroom",
  "custom product maker with colour or size options (rugs, glass, wallpaper, paving)",
  "interior materials supplier selling to homes and trade",
  "any craft brand that wants a bold colour grid and a simple configurator"
 ],
 "categories": [
  "Shop",
  "Architecture and building"
 ],
 "tags": [
  "tile studio",
  "ceramic tiles",
  "glazed tiles",
  "tile shop",
  "ceramics",
  "interior design",
  "product configurator",
  "sample box",
  "trade pricing",
  "colour grid",
  "square grid",
  "gsap",
  "scrolltrigger",
  "lenis",
  "single-file"
 ],
 "language": "en",
 "size_kb": 115,
 "photos": 10,
 "fonts": [
  "Instrument Sans",
  "Pliant"
 ],
 "libraries": [
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js",
  "https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js",
  "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.min.js"
 ],
 "browsers": "Chrome and Edge 111+, Safari 16.2+, Firefox 121+ (it uses color-mix(), container query units, :has(), cascade layers, small/dynamic viewport units).",
 "sections": [
  {
   "key": "navigation",
   "id": "navigation",
   "heading": "",
   "about": "fixed bar: logo with a tile mark, seven links, Sample box button and a menu button; full-screen menu with a colour square per link under 1080px; hides on scroll down"
  },
  {
   "key": "opening",
   "id": "opening",
   "heading": "Square tiles, glazed by hand, laid by the thousand.",
   "about": "two screens: a field of square tiles under a headline plate with two buttons, then a navy core explaining that every tile is three squares, with a photo"
  },
  {
   "key": "glazes",
   "id": "glazes",
   "heading": "Thirteen glazes, fired to stay loud.",
   "about": "a wall of thirteen glaze tiles with names and pairing notes, plus a note about the clay"
  },
  {
   "key": "patterns",
   "id": "patterns",
   "heading": "One tile, four floors.",
   "about": "a held screen where a 6 by 6 floor of tiles flips between four layouts while a list marks the current one"
  },
  {
   "key": "maker",
   "id": "maker",
   "heading": "Design your own tile.",
   "about": "a tile designer: pick frame glaze, core glaze, inlay and size, see a 5 by 5 floor and a live price per square metre"
  },
  {
   "key": "making",
   "id": "making",
   "heading": "From wet clay to a loud floor.",
   "about": "five making steps on a sideways track beside one tile that goes from clay to fired colour (held screen)"
  },
  {
   "key": "projects",
   "id": "projects",
   "heading": "Laid in kitchens, pools and cafés.",
   "about": "a collage of six installed projects with captions, among small coloured tile chips"
  },
  {
   "key": "samples",
   "id": "samples",
   "heading": "Six tiles in a box, at your door in three days.",
   "about": "sample box offer with three facts, two actions and a photo, beside a sliding-puzzle board of eight tiles"
  },
  {
   "key": "trade",
   "id": "trade",
   "heading": "For architects, builders and anyone ordering by the pallet.",
   "about": "trade offer text and three size cards with specs, each with a nested square drawing"
  },
  {
   "key": "faq",
   "id": "faq",
   "heading": "Asked every week.",
   "about": "six questions and answers as native details, beside a heading and a contact link"
  },
  {
   "key": "contact",
   "id": "contact",
   "heading": "Come and see them fired.",
   "about": "showroom details and a project enquiry form inside a frame of four colour bands"
  },
  {
   "key": "footer",
   "id": "footer",
   "heading": "",
   "about": "a row of thirteen tiles, four link columns, a large wordmark, and a legal line with the Design: 8B credit"
  }
 ],
 "placeholders": [
  "og-image",
  "favicon",
  "form",
  "phone",
  "email",
  "social"
 ],
 "lighthouse": null,
 "license": {
  "code": "MIT",
  "photos": "Unsplash License",
  "fonts": "SIL Open Font License 1.1"
 },
 "get": {
  "degit": "npx degit 8bsite/ceramic-tile-website-template my-site",
  "curl": [
   "curl -LO https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/index.html",
   "curl -LO https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/AGENTS.md",
   "curl -LO https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/LICENSE",
   "curl -LO https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/CREDITS.md"
  ],
  "agent_prompt": "Read AGENTS.md, then edit index.html. Make this the site for <my tile or ceramics business: name, city, products, colour or size options with prices per square metre, how a piece is made, projects, sample and trade terms, showroom, how people enquire>. Replace first the brand name, the footer wordmark's len, the glaze names and pairing notes, prices, specs and contacts. Keep the section ids, the data-price, data-extra and data-core attributes and the counts AGENTS.md lists. Ask me for missing facts and never invent prices, specs, firing claims or contacts."
 },
 "links": {
  "page": "https://8b.com/templates/inset/",
  "md": "https://8b.com/templates/inset.md",
  "json": "https://8b.com/templates/inset.json",
  "demo": "https://8b.com/templates/inset/demo.html",
  "ghDemo": "https://8bsite.github.io/ceramic-tile-website-template/",
  "repo": "https://github.com/8bsite/ceramic-tile-website-template",
  "zip": "https://8b.com/templates/inset/ceramic-tile-website-template.zip",
  "use": "https://github.com/new?template_name=ceramic-tile-website-template&template_owner=8bsite",
  "agents": "https://github.com/8bsite/ceramic-tile-website-template/blob/main/AGENTS.md",
  "credits": "https://github.com/8bsite/ceramic-tile-website-template/blob/main/CREDITS.md",
  "raw": {
   "index": "https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/index.html",
   "agents": "https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/AGENTS.md",
   "license": "https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/LICENSE",
   "credits": "https://raw.githubusercontent.com/8bsite/ceramic-tile-website-template/main/CREDITS.md"
  },
  "preview": "https://8b.com/templates/inset/desktop.webp",
  "phone": "https://8b.com/templates/inset/phone.webp",
  "clip": "https://8b.com/templates/inset/scroll.mp4",
  "og": "https://8b.com/templates/inset/og.jpg",
  "design_md": "https://8b.com/templates/inset/DESIGN.md"
 },
 "github": {
  "repo": "8bsite/ceramic-tile-website-template",
  "template_repository": true,
  "topics": [
   "html-template",
   "landing-page",
   "website-template",
   "website-templates",
   "tile-shop",
   "ceramic-tiles",
   "ceramics-website",
   "interior-design",
   "product-configurator",
   "html5",
   "agents-md",
   "gsap",
   "scrolltrigger",
   "scroll-animation",
   "lenis",
   "single-file",
   "cursor-ai",
   "static-site",
   "mit-license",
   "vibe-coding"
  ]
 },
 "made_by": {
  "name": "8B",
  "url": "https://8b.com/"
 }
}