{
 "slug": "dotdrum",
 "name": "Dotdrum",
 "title": "Dotdrum, a free print studio website template",
 "kind": "One-page website for a print studio or small press, with a price calculator, shop and workshop dates",
 "summary": "A one-page site for a two-ink risograph studio that prints zines, posters and books, sells its own editions and runs workshops. Two flat inks, ultramarine and fluorescent pink, and halftone dots drawn in CSS; as you scroll, four drums print the page band by band, ink plates slide into register and a drum inks the workshop dates one by one.",
 "fits": [
  "risograph, screen-print or letterpress studio",
  "print shop or copy shop with online quotes",
  "small press or zine publisher with a few editions for sale",
  "craft studio that sells work and runs workshops",
  "any small studio with a two-colour graphic identity"
 ],
 "categories": [
  "Agency and studio",
  "Shop"
 ],
 "tags": [
  "print studio",
  "risograph",
  "print shop",
  "small press",
  "zines",
  "workshops",
  "price calculator",
  "halftone",
  "two-colour",
  "gsap",
  "scrolltrigger",
  "lenis",
  "single-file"
 ],
 "language": "en",
 "size_kb": 99,
 "photos": 13,
 "fonts": [
  "Gabarito",
  "Rethink Sans"
 ],
 "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": "nav",
   "heading": "",
   "about": "top bar: wordmark, section links, Price a run button; phone menu overlay"
  },
  {
   "key": "opening",
   "id": "press",
   "heading": "Two inks, ten thousand dots.",
   "about": "two-screen opening: big two-line headline and four drums with halftone trails, then a pink panel with the studio statement, a photo and three facts"
  },
  {
   "key": "inks",
   "id": "inks",
   "heading": "Two inks. Sixteen colours.",
   "about": "colour chart: two ink plates overprint into a 4×4 grid of tints (demo: blue and pink)"
  },
  {
   "key": "process",
   "id": "process",
   "heading": "One sheet, two passes.",
   "about": "how it works: five numbered steps on a horizontal track beside a sheet that gets printed step by step"
  },
  {
   "key": "studio",
   "id": "studio",
   "heading": "A small room with a loud machine.",
   "about": "about the studio: paragraph, list of four machines, three photos at alternating heights"
  },
  {
   "key": "editions",
   "id": "editions",
   "heading": "From our own drum.",
   "about": "shop: eight products in four staggered lanes, each with photo, title, format, price and Order link (demo: zines, prints and books)"
  },
  {
   "key": "workshops",
   "id": "workshops",
   "heading": "Learn the drum.",
   "about": "event list: five dated sessions with price, places left and a Book link, beside a lane where a drum inks each date"
  },
  {
   "key": "quote",
   "id": "quote",
   "heading": "Price a run.",
   "about": "price calculator: job options on the left, a live job ticket with total, unit price and turnaround, and a Send this ticket email button"
  },
  {
   "key": "runs",
   "id": "runs",
   "heading": "Lately on the drum.",
   "about": "list of recent clients and jobs set in large type (demo: a press log)"
  },
  {
   "key": "faq",
   "id": "faq",
   "heading": "Before you send a file.",
   "about": "questions and answers (native <details>)"
  },
  {
   "key": "contact",
   "id": "contact",
   "heading": "Bring a file. Leave with a stack.",
   "about": "address, opening hours, email, phone and a contact form (placeholders), four drums across the foot"
  },
  {
   "key": "footer",
   "id": "footer",
   "heading": "",
   "about": "width-filling dotdrum wordmark, links, address, socials, copyright and the Design: 8B credit"
  }
 ],
 "placeholders": [
  "og-image",
  "favicon",
  "email",
  "form",
  "phone",
  "social"
 ],
 "lighthouse": null,
 "license": {
  "code": "MIT",
  "photos": "Unsplash License",
  "fonts": "SIL Open Font License 1.1"
 },
 "get": {
  "degit": "npx degit 8bsite/print-studio-website-template my-site",
  "curl": [
   "curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/index.html",
   "curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/AGENTS.md",
   "curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/LICENSE",
   "curl -LO https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/CREDITS.md"
  ],
  "agent_prompt": "Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your studio or shop: what you make or print, where you are, your prices, products, workshops or events, how people order or book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, photos, prices and rates, dates, client list, links and contacts, and recolour it through the CSS variables if needed."
 },
 "links": {
  "page": "https://8b.com/templates/dotdrum/",
  "md": "https://8b.com/templates/dotdrum.md",
  "json": "https://8b.com/templates/dotdrum.json",
  "demo": "https://8bsite.github.io/print-studio-website-template/",
  "repo": "https://github.com/8bsite/print-studio-website-template",
  "zip": "https://github.com/8bsite/print-studio-website-template/archive/refs/heads/main.zip",
  "use": "https://github.com/new?template_name=print-studio-website-template&template_owner=8bsite",
  "agents": "https://github.com/8bsite/print-studio-website-template/blob/main/AGENTS.md",
  "credits": "https://github.com/8bsite/print-studio-website-template/blob/main/CREDITS.md",
  "raw": {
   "index": "https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/index.html",
   "agents": "https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/AGENTS.md",
   "license": "https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/LICENSE",
   "credits": "https://raw.githubusercontent.com/8bsite/print-studio-website-template/main/CREDITS.md"
  },
  "preview": "https://8b.com/templates/dotdrum/desktop.webp",
  "phone": "https://8b.com/templates/dotdrum/phone.webp",
  "clip": "https://8b.com/templates/dotdrum/scroll.mp4",
  "og": "https://8b.com/templates/dotdrum/og.jpg"
 },
 "github": {
  "repo": "8bsite/print-studio-website-template",
  "template_repository": true,
  "topics": [
   "html-template",
   "landing-page",
   "website-template",
   "free-template",
   "print-studio",
   "print-shop",
   "risograph",
   "html5",
   "css",
   "gsap",
   "scrolltrigger",
   "scroll-animation",
   "lenis",
   "single-file",
   "no-build",
   "static-site",
   "mit-license",
   "vibe-coding",
   "claude-code",
   "ai-agents"
  ]
 },
 "made_by": {
  "name": "8B",
  "url": "https://8b.com/"
 }
}